咆哮+ ctx分析器问题

时间:2017-06-19 12:44:11

标签: javascript audiocontext howler.js

我正在尝试将音频分析器节点连接到我的咆哮设置。

问题是我得到一个填充“128”的数组,这意味着没有声音,但声音正在播放。

这是我的代码:

  var Sound = new Howl({
              src: 'https://ia802508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3',
              html5: true,
              format: ['mp3']
          });

  Sound.play();

  // Create analyzer
  var analyser = Howler.ctx.createAnalyser();

  // Connect master gain to analyzer
  Howler.masterGain.connect(analyser);

  // Connect analyzer to destination
  analyser.connect(Howler.ctx.destination);

  // Creating output array (according to documentation https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API)
  analyser.fftSize = 2048;
  var bufferLength = analyser.frequencyBinCount;
  var dataArray = new Uint8Array(bufferLength);

  // Get the Data array
  analyser.getByteTimeDomainData(dataArray);

  // Display array on time each 3 sec (just to debug)
  setInterval(function(){ 
    analyser.getByteTimeDomainData(dataArray);
    console.dir(dataArray);
  }, 3000);

这是我的项目的一个减少到最小的:

Plunker

我的实施基于以下来源:

这篇文章

avanwink answer

The documentation of sound visualization

1 个答案:

答案 0 :(得分:2)

已修复!

因为以前使用无线电流来测试我的播放器,所以我在Howl对象中将html5选项设置为true。

删除此选项,允许咆哮者使用网络音频API,从而修复了我的问题:

工作版:

var Sound = new Howl({
              src: 'https://ia802508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3',
              format: ['mp3']
          });

  Sound.play();

  // Create analyzer
  var analyser = Howler.ctx.createAnalyser();

  // Connect master gain to analyzer
  Howler.masterGain.connect(analyser);

  // Connect analyzer to destination
  analyser.connect(Howler.ctx.destination);

  // Creating output array (according to documentation https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API)
  analyser.fftSize = 2048;
  var bufferLength = analyser.frequencyBinCount;
  var dataArray = new Uint8Array(bufferLength);

  // Get the Data array
  analyser.getByteTimeDomainData(dataArray);

  // Display array on time each 3 sec (just to debug)
  setInterval(function(){ 
    analyser.getByteTimeDomainData(dataArray);
    console.dir(dataArray);
  }, 3000);