AnalyserNode.getFloatFrequencyData总是返回-Infinity

Question

好了，所以我试图确定的强度（单位为dB）上这是由用户的浏览器记录的音频文件的样本。

我已经能够记录下来，并通过HTML元素播放。但是，当我尝试使用这个元素作为源，并将其连接到一个AnalyserNode，AnalyserNode.getFloatFrequencyData总是返回全负无穷大的阵列，getByteFrequencyData总是返回0，getByteTimeDomainData充满了128。

这里是我的代码：

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var source;

var analyser = audioCtx.createAnalyser();

var bufferLength = analyser.frequencyBinCount;
var data = new Float32Array(bufferLength);

mediaRecorder.onstop = function(e) {
  var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });

  chunks = [];
  var audioURL = window.URL.createObjectURL(blob);
  // audio is an HTML audio element
  audio.src = audioURL;

  audio.addEventListener("canplaythrough", function() {
      source = audioCtx.createMediaElementSource(audio);

      source.connect(analyser);
      analyser.connect(audioCtx.destination);

      analyser.getFloatFrequencyData(data);
      console.log(data);
  });
}

任何想法，为什么AnalyserNode行为像源是空的/静音？我也试图把流源同时录制，具有相同的结果。

Answer 1

如果从不同的域源文件？这将无法在createMediaElementSource。

Answer 2

你需要获取的音频文件和解码音频缓冲。的URL音源也必须在同一个域或有正确的CORS头以及（由安东尼提到的）。

注：在下面的例子中，路径到您的文件替换<FILE-URI>。

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var source;
var analyser = audioCtx.createAnalyser();
var button = document.querySelector('button');
var freqs;
var times;


button.addEventListener('click', (e) => {
  fetch("<FILE-URI>", {
    headers: new Headers({
      "Content-Type" : "audio/mpeg"
    })
  }).then(function(response){
    return response.arrayBuffer()
  }).then((ab) => {
    audioCtx.decodeAudioData(ab, (buffer) => {
      source = audioCtx.createBufferSource();
      source.connect(audioCtx.destination)
      source.connect(analyser);
      source.buffer = buffer;
      source.start(0);
      viewBufferData();
    });
  });
});

// Watch the changes in the audio buffer
function viewBufferData() {
  setInterval(function(){
    freqs = new Uint8Array(analyser.frequencyBinCount);
    times = new Uint8Array(analyser.frequencyBinCount);
    analyser.smoothingTimeConstant = 0.8;
    analyser.fftSize = 2048;
    analyser.getByteFrequencyData(freqs);
    analyser.getByteTimeDomainData(times);
    console.log(freqs)
    console.log(times)
  }, 1000)
}