【音】analyserNode web上如何获取麦克风的频率数据

版权声明：ibeeger https://blog.csdn.net/uk_51/article/details/88862949

这样的效果其实早就可以实现，昨天有同事问道，抽空整理了下，大家要注意一下几点

• AudioContext
• createGain()方法
• createMediaStreamSource(stream)
• createAnalyser() 分析器

先看下demo 地址

全部的代码

 window.AudioContext = window.AudioContext || window.webkitAudioContext;
  var audioContext = new AudioContext();
  var inputPoint = null, zeroGain = null, analyserNode;
  var str =""
  function updateWave() {
    var freqByteData = new Uint8Array(analyserNode.frequencyBinCount);
        analyserNode.getByteFrequencyData(freqByteData);
    var multiplier = analyserNode.frequencyBinCount
    str= ""
    for(let i =0; i<500; i++) {
      str+= '<span>'+freqByteData[i]+'</span>'
    }
    document.getElementById('arrlist').innerHTML = str
    window.requestAnimationFrame(updateWave);
  }

  var handleSuccess = function(stream) {
    var audioContext = new AudioContext();
    inputPoint = audioContext.createGain();
    var realAudioInput = audioContext.createMediaStreamSource(stream);
    realAudioInput.connect(inputPoint);
    analyserNode = audioContext.createAnalyser();
    analyserNode.fftSize = 2048;
    inputPoint.connect( analyserNode );
    updateWave()
  };
  navigator.mediaDevices.getUserMedia({ audio: true, video: false })
      .then(handleSuccess)

有疑问的欢迎一块讨论