在浏览器中检测实时音频输入的音高

Posted 2021-04-02

如何在浏览器中检测实时音频输入的音高？

以下代码将为您提供1,024个频率值。但是我不知道如何从这个到实际的音高（例如A＃）。

const audioContext = new window.AudioContext();
const analyser = audioContext.createAnalyser();

navigator.getUserMedia(
  { audio: true },
  stream => {
    audioContext.createMediaStreamSource(stream).connect(analyser);

    const dataArray = new Uint8Array(analyser.frequencyBinCount);

    analyser.getByteTimeDomainData(dataArray);

    // Log the contents of the analyzer ever 500ms. 
    setInterval(() => {
      console.log(dataArray.length);
    }, 500);
  },
  err => console.log(err)
);

答案

您当前访问的是时域数据，不能用于检索笔记（这似乎是您想要的）。

您想要的是频域，使用AnalyserNode.get[XXX]FrequencyData，您可以从中获得更响亮或更安静的频率。

但是，由于大多数声音都是由和声组成的，因此您无法检索从麦克风播放的音符，添加到此我们只能访问有限的分辨率，而且您不仅无法从麦克风中检索音符，但也不是来自虚拟振荡器。

下面的例子来自this Q/A和examples from MDN;

const canvasCtx = canvas.getContext('2d');
const WIDTH = canvas.width = 500;
const HEIGHT = canvas.height = 150;

const audioCtx = new (window.AudioContext || window.webkitAudioContext);
const analyser = audioCtx.createAnalyser();

const nyquist = audioCtx.sampleRate / 2;

// highest precision
analyser.fftSize = 32768;

const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
const osc = audioCtx.createOscillator();
osc.frequency.value = 400;
osc.connect(analyser);
osc.connect(audioCtx.destination);

range.oninput = e => {
  osc.frequency.value = range.value;
};

if(!audioCtx.state || audioCtx.state === 'running') {
  begin();
}
else {
  log.textContent = 'click anywhere to begin';
  onclick = e => {
    onclick = null;
    begin()
  }
}

function begin() {
  osc.start(0);
  draw();
}

function draw() {
  requestAnimationFrame(draw);

  // get the Frequency Domain
  analyser.getByteFrequencyData(dataArray);

  canvasCtx.fillStyle = 'rgb(0, 0, 0)';
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  const barWidth = (WIDTH / bufferLength) * 2.5;
  let max_val = -Infinity;
  let max_index = -1;
  let x = 0;
  for(let i = 0; i < bufferLength; i++) {
    let barHeight = dataArray[i];
    if(barHeight > max_val) {
      max_val = barHeight;
      max_index = i;
    }

    canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
    canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
    x += barWidth;
  }
  log.textContent = `loudest freq: ${max_index * (nyquist / bufferLength)}
real value: ${range.value}`;
}

#log{display: inline-block; margin:0 12px}
#canvas{display: block;}

<input id="range" type="range" min="0" max="1000" value="400"><pre id="log"></pre>
<canvas id="canvas"></canvas>

以上是关于在浏览器中检测实时音频输入的音高的主要内容，如果未能解决你的问题，请参考以下文章

使用以下 java 中的代码修改文件中特定位置的音频文件的音高

音频处理Melodyne 选择工具使用 ( 主工具简介 | 修改音高 | 自动吸附 | 音符长度修改 | 长度自动吸附 | 设置音符分离线 | 设置片段分离线 )

实时改变声音的音高（Swift）

用于查找歌曲音高的音频分析器

使用 Swift 使用 AVAudioEngine 实时进行音高转换

Python 音频帧音高变化