有没有办法检测 HTML 5 网络音频 API 中的音频频率？

Posted 2023-02-25

【中文标题】有没有办法检测 HTML 5 网络音频 API 中的音频频率？

【英文标题】：Is there a way to detect audio frequency in HTML 5 web audio API?

【发布时间】：2015-02-04 19:06:31

【问题描述】：

我想知道有没有一种方法可以检测 html 5 网络音频中麦克风的音频频率。我想制作一个在线吉他调音器，我需要从声音输入中获得以赫兹为单位的音频频率。我见过一些 EQ 和滤波器效果，但我没有看到任何关于频率识别的内容。

编辑： 我发现了这个：http://www.smartjava.org/content/exploring-html5-web-audio-visualizing-sound 第二点（分析器节点）非常有趣。我看过他的源代码，但我不知道如何将分析仪连接到麦克风输入。 当 mp3 文件开始播放时，他调用 playSound() 函数，并在那里绘制他的画布。但是我没有类似 playSound() 的功能...

【参考方案1】：

我编写了一个网络音频库，除其他外，它可以检测麦克风输入的频率。查看https://github.com/rserota/wad#pitch-detection

var voice = new Wad(source : 'mic' );
var tuner = new Wad.Poly();
tuner.add(voice);
voice.play();

tuner.updatePitch() // The tuner is now calculating the pitch and note name of its input 60 times per second. These values are stored in tuner.pitch and tuner.noteName.

var logPitch = function()
    console.log(tuner.pitch, tuner.noteName)
    requestAnimationFrame(logPitch)
;
logPitch();
// If you sing into your microphone, your pitch will be logged to the console in real time.

tuner.stopUpdatingPitch(); // Stop calculating the pitch if you don't need to know it anymore.

【讨论】：

今晚我会测试它，当我回家的时候！这似乎正是我想要的！谢谢拉斐尔！

这个例子有问题。我打开了一个问题。我会在它工作时给你一些消息。

不只是你。例子有问题。感谢您在 github 上打开问题。我们可以继续在那里进行故障排除。

有效！你的 lib 非常高效和简单！伟大的工作拉斐尔！

这太棒了。如果可以的话，我会投票两次。谢谢。

【参考方案2】：

你应该可以使用BiquadFilterNode。

链接中的示例代码：

var audioCtx = new AudioContext();
var biquadFilter = audioCtx.createBiquadFilter();
biquadfilter.getFrequencyResponse(myFrequencyArray,magResponseOutput,phaseResponseOutput);

【讨论】：

谢谢你，但经过测试，它似乎只返回给定频率的电平，而不是实时主频率。我错了吗？

【参考方案3】：

您可以使用以下代码从麦克风获取频率。

navigator.mediaDevices.getUserMedia(audio:true).then(function(localStream)
  var audioContext = new(window.AudioContext || window.webkitAudioContext)();
  var input = audioContext.createMediaStreamSource(localStream);
  var analyser = audioContext.createAnalyser();
  var scriptProcessor = audioContext.createScriptProcessor();
  // Some analyser setup
  analyser.smoothingTimeConstant = 0;
  analyser.fftSize = 64;

  input.connect(analyser);
  analyser.connect(scriptProcessor);
  scriptProcessor.connect(audioContext.destination);
  var getAverageVolume  =  function( array)
      var length = array.length;
      var values = 0;
      var i = 0;
     for (; i < length; i++) 
        values += array[i];
     
    return values / length;
  ;
  var onAudio = function()
    var tempArray = new window.Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(tempArray);
    var latestFrequency = (getAverageVolume(tempArray));
    //use latestFrequency
  ;
  scriptProcessor.onaudioprocess = onAudio;
)
.catch(function()
  //Handle error
);

【讨论】：

我正在尝试检测哔哔声并将其转换为 0 和 1。效果很好！但是，如果哔声很快，浏览器会不时冻结一秒钟。你知道怎么解决吗？