0

以下の URL にリンクされているコードを探していましたが、どこにもアクセスできませんでした。ページ全体ではなく、小さな 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&P コードがなければ、正しい軌道に乗っているかどうかはわかりません。ところで、抽象化されたライブラリを使用したくありません。APIを一から学びたい。ありがとう

4

1 に答える 1

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();
于 2012-10-29T10:47:06.600 に答える