1

ボタンがあります。クリックするたびに音楽が再生されます。2 回目にクリックすると、音楽が再開します。音楽も視覚化したい。

だから私はhtml5オーディオから始めます（ http://jsfiddle.net/karenpeng/PAW7r/の完全なコード）：

  $("#1").click(function(){
    audio1.src = '1.mp3';
    audio1.controls = true;
    audio1.autoplay = true;
    audio1.loop = true;

    source = context.createMediaElementSource(audio1);

    source.connect(analyser);
    analyser.connect(context.destination);
    });

しかし、複数回クリックすると、console.log エラー:

    Uncaught Error: INVALID_STATE_ERR: DOM Exception 11

次に、 Web Audio APIを使用するように変更し、ソースを次のように変更します。

    source = context.createBufferSource();

エラーはなくなりました。

そして、それを視覚化する必要があります。しかし皮肉なことに、これはhtml5 audioでしか機能しません!

（ http://jsfiddle.net/karenpeng/FvgQF/の完全なコード、jsfiddle cuzでは機能しません。処理.jsスクリプトを適切に記述する方法がわかりませんが、私のPCでは実行されます）

     var audio = new Audio();
     audio.src = '2.mp3';
     audio.controls = true;
     audio.autoplay = true;
     audio.loop=true;
     var context = new webkitAudioContext();
     var analyser = context.createAnalyser();

     var source = context.createMediaElementSource(audio);
     source.connect(analyser);
     analyser.connect(context.destination);

     var freqData = new Uint8Array(analyser.frequencyBinCount);
     analyser.getByteFrequencyData(freqData);

         //visualization using freqData

ソースを次のように変更すると:

    source = context.createBufferSource();

何も表示されません。

それで、それを視覚化しながらエラーなしで、何度も再開できるようにする方法はありますか?

4

2 に答える 2

2

実際、問題は、同じメディア要素に対して 2 番目の Web オーディオ ノードを作成しようとしていることにあると思います。(コードをクリックすると、SRC やコントロールなどが再設定されますが、新しい Audio() は作成されません)。作成した MediaElementAudioSourceNode を保持するか、新しい Audio 要素を作成する必要があります。

例えば：

var context = new webkitAudioContext();
var analyser = context.createAnalyser();
var source = null;    
var audio0 = new Audio();

$("#0").click(function(){
    audio0.src = 'http://www.bornemark.se/bb/mp3_demos/PoA_Sorlin_-_Stay_Up.mp3';
    audio0.controls = true;
    audio0.autoplay = true;
    audio0.loop = true;

    if (source==null) {
        source = context.createMediaElementSource(audio0);
        source.connect(analyser);
        analyser.connect(context.destination);
    }
});​

それが役立つことを願っています!

-クリス・ウィルソン

于 2012-10-31T18:09:13.743 に答える
0

私が知る限り、これは がまだ再生MediaElementSourceNodeされていないものしか取り込めない可能性があるためです。オブジェクトはハンドラーの外部で宣言されてAudioいるため、2 回目のクリックで再生中のオーディオを分析しようとしています。Audioclick

API はこれを指定していないように見えるので、100% 確信はありませんが、これは直感的に理解できます。

于 2012-10-31T09:35:06.093 に答える