使用 Web Audio API 将两个声音分配给两个 Div，并通过带有 javascript 的 click 事件独立播放

Question

我一直在挑选下面链接中的代码，但我无法到达任何地方。 我只设法将事件处理程序重新分配给一个小 div 而不是整个页面。我不知道如何调整它以加载多个声音。

http://www.f1lt3r.com/w3caudio/web-audio-api/basic-examples/low-latency-playback-user-input.html

使用下面的代码示例，我根本无法通过单击 div 来触发声音。不过这段代码看起来更好看，所以我真的很想修改它以供学习。

   var context = new webkitAudioContext(),
        buffer;

    var playAudioFile = function (buffer) {
        var source = context.createBufferSource();
        source.buffer = buffer;
        source.connect(context.destination);
        source.noteOn(0); // Play sound immediately
    };

    var loadAudioFile = (function (url) {
        var request = new XMLHttpRequest();

        request.open('get', 'A.mp3', true);
        request.responseType = 'arraybuffer';

        request.onload = function () {
                context.decodeAudioData(request.response,
                     function(incomingBuffer) {
                         playAudioFile(incomingBuffer);
                     }
                );
        };

        request.send();
    }());





// I added this & it doesn't work



var divElement = document.getElementById("divElement");

divElement.addEventListener("click", playAudioFile , false);


// END of code I added

我了解如何创建振荡器以及连接滤波器/增益和其他节点。到目前为止，这是我使用 API 时的参考点。 XMLHttpRequest 进程与缓冲区创建相结合是令人困惑的。我了解缓冲区是什么，我了解 XMLHttprequest 是什么，但由于某种原因，加载音频文件以进行播放的过程对我来说似乎并不清晰，更不用说加载多个我最终想要做的事情了。我也尝试阅读 HTML-5 Rocks 教程，但如果没有可以调整的 C&P 代码，我永远无法判断我是否走在正确的轨道上。顺便说一句，我不想​​使用抽象库。我想从头开始学习 API。谢谢

Answer 1

首先，当您单击 div 时，您正在执行 playAudioFile。 playAudioFile 需要一个缓冲区作为参数，否则它将无法做它应该做的事情。但是，当您单击 div 时没有传递缓冲区，playAudioFile 函数在没有缓冲区的情况下执行（并且被赋予事件对象作为参数，但这并不重要），因此没有声音。

您可能想要做的是在单击 div 时分配 loadAudioFile 。目前 loadAudioFile 被写入在页面加载时执行（当您将函数包装在括号中时会发生这种情况）。所以我将 loadAudioFile 函数更新为如下所示：

var loadAudioFile = function () {
    var request = new XMLHttpRequest();

    request.open('get', 'A.mp3', true);
    request.responseType = 'arraybuffer';

    request.onload = function () {
            context.decodeAudioData(request.response,
                 function(incomingBuffer) {
                     //HERE is where the playAudioFile function is called, with a buffer to play
                     playAudioFile(incomingBuffer);
                 }
            );
    };

    request.send();
};

然后

divElement.addEventListener("click", loadAudioFile , false);

现在，这会使应用程序在您每次单击 div 时加载 mp3。只需加载一次并保存缓冲区供以后使用，就可以对其进行很多优化。

var context = new webkitAudioContext(),
    savedBuffer;

var playAudioFile = function () {
    var source = context.createBufferSource();
    source.buffer = savedBuffer;
    source.connect(context.destination);
    source.noteOn(0); // Play sound immediately
};

var request = new XMLHttpRequest();

request.open('get', 'A.mp3', true);
request.responseType = 'arraybuffer';

request.onload = function () {
        context.decodeAudioData(request.response,
             function(incomingBuffer) {
                 //save the buffer, we'll reuse it
                 savedBuffer = incomingBuffer;
                 //once the file has been loaded, we can start listening for click on the div, and use playAudioFile since it no longer requires a buffer to be passed to it
                 var divElement = document.getElementById("divElement");
                 divElement.addEventListener("click", playAudioFile , false);
             }
        );
};

request.send();