加载音频缓冲区并使用音频标签播放

问题描述：

我正尝试从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()

但是没有奏效。

这里的任何信息？

答

如果您只是想播放音频文件，为了简单起见，您可能想要使用<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 。

加载音频缓冲区并使用音频标签播放

相关推荐