2017-06-19 44 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);