使用Web Audio API将两种声音分配给两个Divs，并通过JavaScript单击事件独立播放

Question

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

http://www.f1lt3r.com/w3caudio/web-audio-api/basic-examples/low-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 PROCGESESS与缓冲区的创建相关。我了解什么是缓冲区，我了解XMLHTTPRequest是什么，但是由于某种原因，围绕加载音频文件进行播放的过程似乎并不清楚，更不用说加载了多个以上的东西，这是我最终想做的。我也试图阅读HTML-5岩石教程，但没有工作C＆amp; P代码，我无法调整我永远无法确定我是否在正确的轨道上。顺便说一句，我不想使用抽象的库。我想从头开始学习API。谢谢

Answer 1

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

单击DIV时，您可能想做的是分配LoadAudiofile。目前，LoadAudiofile被写入页面加载时执行（这是当您将功能包裹在Paranthess中时会发生的情况）。因此，我将更新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();