在浏览器中实时获取声音频率

991 字

5 分钟

在浏览器中实时获取声音频率

2024-12-31

博客

音高检测

/

音频处理

前言#

当你在给乐器调音时、又或者在小提琴、二胡这样的无品格乐器上演奏但无法确定音准时，你可以借助电脑或者移动设备的麦克风采集当前演奏乐器的声音，并通过算法实时分析声音的基音音高以及响度，这可以更好地帮助我们把握乐器的音准。

开始#

在浏览器获取麦克风权限#

在这里我们使用 Web Api 中的 getUserMedia 方法来获取设备麦克风。

1
async function getMicroPhoneDevice() {
2
  if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
3
    console.log("浏览器不支持音频输入");
4
    return;
5
  }
6

7
  try {
8
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
9
    const audioContext = new window.AudioContext();
10
    const mediaStreamSource = audioContext.createMediaStreamSource(stream);
11

12
    const processor = audioContext.createScriptProcessor(4096, 1, 1);
13
    mediaStreamSource.connect(processor);
14
    processor.connect(audioContext.destination);
15
    processor.onaudioprocess = (e) => {
16
      let inputBuffer = e.inputBuffer.getChannelData(0); // 读取第一个声道的数据
17
      console.log(inputBuffer);
18
    };
19
  } catch (error) {
20
    console.error("音频解析失败，请检查麦克风或重新尝试！", error);
21
  }
22
}

这里的 inputBuffer 就是麦克风实时获取的音频数据，格式为 Buffer 数组。

处理获取的音频数据#

现在我们得到了原始的音频数据，如果想要知道这段音频的频率，我们还需要使用自相关算法得出音频的基音以及周期。

1.首先使用 RMS 计算信号强度#

1
let rms = 0;
2
let SIZE = inputBuffer.length;
3
for (let i = 0; i < SIZE; i++) {
4
  let val = inputBuffer[i];
5
  rms += val * val;
6
}
7
rms = Math.sqrt(rms / SIZE);
8
if (rms < 0.01) {
9
  console.log("信号强度不足");
10
}

2.筛除噪声#

1
let startIndex = 0,
2
  endIndex = SIZE - 1,
3
  threshold = 0.2;
4

5
for (let i = 0; i < SIZE / 2; i++) {
6
  if (Math.abs(inputBuffer[i]) < threshold) {
7
    startIndex = i;
8
    break;
9
  }
10
}
11
for (let i = 1; i < SIZE / 2; i++) {
12
  if (Math.abs(inputBuffer[SIZE - i]) < threshold) {
13
    endIndex = SIZE - i;
14
    break;
15
  }
16
}
17

18
inputBuffer = inputBuffer.slice(startIndex, endIndex);
19
SIZE = inputBuffer.length;

3.自相关计算（Autocorrelation Function, ACF）#

1
let autocorrelation = new Array(SIZE).fill(0);
2

3
for (let i = 0; i < SIZE; i++) {
4
  for (let j = 0; j < SIZE - i; j++) {
5
    autocorrelation[i] += inputBuffer[j] * inputBuffer[j + i];
6
  }
7
}

4.峰值检测#

1
let peakIndex = 0;
2
while (autocorrelation[peakIndex] > autocorrelation[peakIndex + 1]) peakIndex++;
3

4
let maxCorrelationValue = -1,
5
  maxCorrelationPosition = -1;
6
for (let i = peakIndex; i < SIZE; i++) {
7
  if (autocorrelation[i] > maxCorrelationValue) {
8
    maxCorrelationValue = autocorrelation[i];
9
    maxCorrelationPosition = i;
10
  }
11
}
12

13
let period = maxCorrelationPosition;

5.二次插值提高精度#

1
let prevValue = autocorrelation[period - 1],
2
  currentValue = autocorrelation[period],
3
  nextValue = autocorrelation[period + 1];
4
let quadraticA = (prevValue + nextValue - 2 * currentValue) / 2;
5
let quadraticB = (nextValue - prevValue) / 2;
6
if (quadraticA) period = period - quadraticB / (2 * quadraticA);

6.频率计算#

频率计算的公式为：f = 采样率 / 周期

1
let sampleRate = audioContext.sampleRate;
2
let frequency = sampleRate / period;

完整代码#

1
async function getMicroPhoneDevice() {
2
  if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
3
    console.log("浏览器不支持音频输入");
4
    return;
5
  }
6

7
  try {
8
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
9
    const audioContext = new window.AudioContext();
10
    const mediaStreamSource = audioContext.createMediaStreamSource(stream);
11

12
    const processor = audioContext.createScriptProcessor(4096, 1, 1);
13
    mediaStreamSource.connect(processor);
14
    processor.connect(audioContext.destination);
15
    processor.onaudioprocess = (e) => {
16
      let inputBuffer = e.inputBuffer.getChannelData(0); // 读取第一个声道的数据
17
      console.log(`音频频率为：${getFrequency(inputBuffer, audioContext.sampleRate)}`);
18
    };
19
  } catch (error) {
20
    console.error("音频解析失败，请检查麦克风或重新尝试！", error);
21
  }
22
}
23

24
function getFrequency(inputBuffer, sampleRate) {
25
  let rms = 0;
26
  let SIZE = inputBuffer.length;
27
  for (let i = 0; i < SIZE; i++) {
28
    let val = inputBuffer[i];
29
    rms += val * val;
30
  }
31
  rms = Math.sqrt(rms / SIZE);
32
  if (rms < 0.01) {
33
    console.log("信号强度不足");
34
  }
35
  let startIndex = 0,
36
    endIndex = SIZE - 1,
37
    threshold = 0.2;
38

39
  for (let i = 0; i < SIZE / 2; i++) {
40
    if (Math.abs(inputBuffer[i]) < threshold) {
41
      startIndex = i;
42
      break;
43
    }
44
  }
45
  for (let i = 1; i < SIZE / 2; i++) {
46
    if (Math.abs(inputBuffer[SIZE - i]) < threshold) {
47
      endIndex = SIZE - i;
48
      break;
49
    }
50
  }
51

52
  inputBuffer = inputBuffer.slice(startIndex, endIndex);
53
  SIZE = inputBuffer.length;
54

55
  let autocorrelation = new Array(SIZE).fill(0);
56

57
  for (let i = 0; i < SIZE; i++) {
58
    for (let j = 0; j < SIZE - i; j++) {
59
      autocorrelation[i] += inputBuffer[j] * inputBuffer[j + i];
60
    }
61
  }
62

63
  let peakIndex = 0;
64
  while (autocorrelation[peakIndex] > autocorrelation[peakIndex + 1]) peakIndex++;
65

66
  let maxCorrelationValue = -1,
67
    maxCorrelationPosition = -1;
68
  for (let i = peakIndex; i < SIZE; i++) {
69
    if (autocorrelation[i] > maxCorrelationValue) {
70
      maxCorrelationValue = autocorrelation[i];
71
      maxCorrelationPosition = i;
72
    }
73
  }
74

75
  let period = maxCorrelationPosition;
76
  let prevValue = autocorrelation[period - 1],
77
    currentValue = autocorrelation[period],
78
    nextValue = autocorrelation[period + 1];
79
  let quadraticA = (prevValue + nextValue - 2 * currentValue) / 2;
80
  let quadraticB = (nextValue - prevValue) / 2;
81
  if (quadraticA) period = period - quadraticB / (2 * quadraticA);
82
  if (period === 0) return null;
83
  let frequency = sampleRate / period;
84
  return frequency;
85
}