9

URLからオーディオバッファをロードして再生しようとしています。このHTML5Rocksチュートリアルからほとんどのコードを入手しました。

var request = new XMLHttpRequest();
request.open('GET', $(this).attr('data-url'), true);
request.responseType = 'arraybuffer';

request.onload = function() {
    console.log(request);
    context.decodeAudioData(request.response, function(buffer) {
        console.log(buffer);
        $('#play').click(function() {
              var source = context.createBufferSource();
              source.connect(context.destination);
              source.noteOn(0);
        }).removeAttr('disabled');
    }, function(err) { console.log(err); });
};
request.send();

しかし、#playボタンを押すと何も起こりません。source.noteOn(0)と呼ばれ、デバッガを使って確認しました。そして、すべてのオブジェクトが適切にロードおよび作成されていますが、音が聞こえません。

また、このアプローチを使用している場合は、すべてのコントロールを備えた完全なプレーヤーを再構築する必要があるようです。作業を節約し、これがより適切に機能するようにするために、私がやりたいのは、をに入れてbuffer、<audio/>そこで再生できるようにすることです。

audio.srcそこにファイル名を入れるためのものがあることは知っていますが、オーディオバッファを使用する必要があります。私はもう試した

audio.src = buffer;
audio.load()

しかし、それはうまくいきませんでした。

そこに何か情報はありますか？

4

2 に答える 2

14

「オーディオ要素を使わない」ということではなく、本当の質問に答えるために、別の解決策を提供したいと思います。ユーザーにオーディオコントロールを表示したかったので、尋ねられた質問に対する解決策が必要でした。

実際には、をに変換し、そのURLを取得して、これを要素の属性にマップする必要ArrayBufferがBlobあり<audio>ますsrc。

const blob = new Blob([arrayBuffer], { type: "audio/wav" });
const url = window.URL.createObjectURL(blob);
audioElement.src = url;

それに応じてmimeタイプを変更することを忘れないでください、そして電話することを忘れないでください

window.URL.revokeObjectURL(url);

ガベージコレクションのためにページ/コンポーネントをアンロードするとき。

于 2019-11-13T07:35:20.290 に答える
1

オーディオファイルを再生したいだけの場合は<audio>、簡単にするためにタグを使用することをお勧めします。（そして、Webkitブラウザに限定されないため）。

この例では、buffer-sourceノード
のバッファーを設定していません 。全体的な構造を維持したい場合は、次のように行を追加するだけですsource.buffer = buffer。

context.decodeAudioData(request.response, function(buffer) {
    $('#play').click(function() {
          var source = context.createBufferSource();
          source.buffer = buffer;
          source.connect(context.destination);
          source.noteOn(0);
    }).removeAttr('disabled');
}, function(err) { console.log(err); })

（オーディオのデコードをイベント処理から分離することで、コードの可読性が向上します）。

他の質問audio.src：オーディオファイルのURL
に 設定audio.srcする必要があります。

于 2013-02-24T19:00:30.753 に答える