2017-06-19 67 views
0

我试图将音频分析器节点连接到我的howler设置。咆哮+ ctx分析器问题

问题是我得到一个由“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

Plunker

我的实现是基于这些来源此文章

The documentation of sound visualization

回答

1

固定!

由于之前使用无线电流测试我的播放器,因此我在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);