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摇滚教程，但没有工作的C＆amp; P代码，我可以调整，我永远无法判断我是否在正确的轨道上。顺便说一下，我不想使用抽象库。我想从头开始学习API。感谢

Answer 1

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

您可能想要做的是在单击div时分配loadAudioFile。目前，loadAudioFile被编写为在页面加载时执行（这是当你将函数包装在parantheses中时会发生的事情）。所以我将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();

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

1 个答案: