有没有办法在HTML 5 Web音频API中检测音频?

时间:2015-02-04 19:06:31

标签: html5 html5-audio

我想知道有没有办法可以在html 5网络音频中检测来自麦克风的音频。我想制作一个在线吉他调音器,我需要从声音输入获得赫兹的音频。我已经看到了一些EQ和滤镜效果,但我没有看到频率识别的任何内容。

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

3 个答案:

答案 0 :(得分:4)

我写了一个网络音频库,其中包括可以从麦克风输入中检测频率。请查看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.

答案 1 :(得分:1)

您应该可以使用BiquadFilterNode

链接中的示例代码:

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

答案 2 :(得分:0)

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

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
});