9

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

但这没有用。

那里有什么资料吗？

4

2 回答 2

14

为了回答真正的问题，而不是“不要使用音频元素”，我想提供另一种解决方案。我想向用户展示音频控件，因此我需要一个解决问题的方法。

实际上，您只需要将 转换ArrayBuffer为 a Blob，获取它的 URL 并将其映射到<audio>元素的src属性：

const blob = new Blob([arrayBuffer], { type: "audio/wav" });
const url = window.URL.createObjectURL(blob);
audioElement.src = url;

请不要忘记相应地更改 mime 类型并且不要忘记调用

window.URL.revokeObjectURL(url);

卸载页面/组件以进行垃圾收集时。

于 2019-11-13T07:35:20.290 回答
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。

于 2013-02-24T19:00:30.753 回答