使用Web Audio API将两个声音分配给两个Div，并使用javascript的click事件分别独立播放 [英] Using Web Audio API to assign two sounds to two Divs and play each independently via a click event with javascript

问题描述

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

I have been picking away at the code linked in the url below and I haven't been able to get anywhere. I have only managed to reassign the event handler to a small div instead of the whole page. I can't figure out how to tweak this to load more than one sound.

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

在下面的代码示例中，我完全无法通过单击div来触发声音.但是，这段代码看起来更好看，因此我真的想出于学习目的对其进行修改.

With the code example below I haven't been able to trigger a sound via a click of a div at all. However this code seems nicer to look at so I would really like to modify this for learning purposes.

   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& P代码，就永远无法判断自己是否走上了正确的道路.顺便说一句，我不想​​使用抽象库.我想从头开始学习API.谢谢

I understand how to create oscillators and connect filter/gain and other nodes. Thus far that is my point of reference when using the API. The XMLHttpRequest processess coupled withe the buffer creation is confusing. I understand what a buffer is and I understand what XMLHttprequest is, but for some reason the process around loading an audio file for playback doesn't seem clear to me, let alone loading more than one which is what I ultimately want to do. I've tried to read the HTML-5 rocks tutorials as well but without working C&P code that I can tweak I can never tell if I'm on the right track. BTW I don't want to use abstracted libraries. I want to learn the API from the ground up. Thanks

推荐答案

首先，您在单击div时正在执行playAudioFile. playAudioFile需要一个缓冲区作为参数，否则它将无法执行预期的操作.但是，当您单击div时，没有传递任何缓冲区，执行playAudioFile函数时没有缓冲区(并且给了事件对象作为参数，但这并不重要)，因此没有声音.

First off, you're executing playAudioFile when you click the div. playAudioFile needs a buffer as an argument, or else it won't be able to do what it's supposed to. However, there is no buffer passed when you click the div, the playAudioFile function is executed without a buffer (and is given an event object as an argument instead, but that's not important), and thus no sound.

您可能想要做的是，当您单击div时分配loadAudioFile.此刻，loadAudioFile被编写为在页面加载时执行(这是将函数包装在括号中时会发生的情况).因此，我将更新loadAudioFile函数，使其看起来像这样:

What you probably want to do is to assign loadAudioFile instead when you click the div. At the moment loadAudioFile is written to execute as the page loads (which is what happens when you wrap your function in parantheses). So I'd update the loadAudioFile function to look like this:

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.只需加载一次并保存缓冲区以备后用，就可以进行很多优化.

Now, this makes the app load the mp3 each time you click the div. It could be optimised a lot by just loading it once and saving the buffer for later.

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的click事件分别独立播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！