加載音頻緩衝區並使用音頻標籤播放

Question

我正嘗試從URL加載音頻緩衝區，然後播放它。我從HTML5 Rocks Tutorial獲得了大部分代碼。

var request = new XMLHttpRequest(); 
request.open('GET', $(this).attr('data-url'), true); 
request.responseType = 'arraybuffer'; 

request.onload = function() { 
    console.log(request); 
    context.decodeAudioData(request.response, function(buffer) { 
     console.log(buffer); 
     $('#play').click(function() { 
       var source = context.createBufferSource(); 
       source.connect(context.destination); 
       source.noteOn(0); 
     }).removeAttr('disabled'); 
    }, function(err) { console.log(err); }); 
}; 
request.send(); 

但是，然後我按了#play按鈕，沒有任何反應。我調用了source.noteOn(0)，我使用調試器對其進行了檢查。所有對象都被正確加載和創建，但我聽不到任何聲音。

另外，看起來，當我使用這種方法時，我需要重新構建具有所有控件的完整播放器。爲了節省工作並確保工作效果更好，我想要做的是將buffer放入<audio/>，這樣就可以在那裏玩了。

我知道有audio.src用於放置文件名，但我需要使用音頻緩衝區。我已經嘗試過

audio.src = buffer; 
audio.load() 

但是沒有奏效。

這裏的任何信息？

Answer 1

如果您只是想播放音頻文件，爲了簡單起見，您可能想要使用<audio>標記。 （並且不限於webkit瀏覽器）。

在你的榜樣，你沒有設置你的緩衝源節點的緩衝區：
如果你想保持整體結構，你可以簡單地添加行source.buffer = buffer，如：

context.decodeAudioData(request.response, function(buffer) { 
    $('#play').click(function() { 
      var source = context.createBufferSource(); 
      source.buffer = buffer; 
      source.connect(context.destination); 
      source.noteOn(0); 
    }).removeAttr('disabled'); 
}, function(err) { console.log(err); }) 

（通過將音頻解碼與事件處理分開，可以提高您的代碼的可讀性）。

你對audio.src其他問題：
你應該設置audio.src音頻文件的URL 。