7

HTML5 オーディオ コンテンツをプリロードしてから、再生しようとするたびにオーディオを再ダウンロードしようとするのではなく、キャッシュにあるものを使用するのに問題があります。

http://cs.sandbox.millennialmedia.com/~tkirchner/rich/K/kungFuPanda2_tj/

エクスペリエンスは、誰かがバナーをクリックすると、読み込みバー付きの広告がポップアップ表示されると想定されています。ローディング バーは、アニメーションに必要なすべての画像をロードしています。それまでの間、オーディオは DOM に既に存在するオーディオ タグを介してロードされます (これは問題ありません)。すべての画像が読み込まれると、読み込みバーが消え、ユーザーは続行できます。画面の下部には、クリックできる 4 つのボタンがあります。それらの 1 つをクリックするとオーディオ ファイルが再生され、画像はオーディオに同期するフリップブック スタイルのアニメーションを実行します。

音声タグ:

<audio id="mmviperTrack" src='tigress.mp3'></audio>
<audio id="mmmantisTrack" src='viper.mp3'></audio>
<audio id="mmtigressTrack" src='kungfu3.mp3'></audio>
<audio id="mmcraneTrack" src='crane.wav'></audio>

再生ボタン イベント リスナー:

button.addEventListener('click',function(){
    if ( f.playing ) return false;
    f.playing = true;
    button.audio.play();
},false);

button.audio.addEventListener('playing', function(){
    animate();
}, false);

問題は、javascript では、play() をクリックするたびに、オーディオ ファイルをリロードしてから再生することです。ボタンをクリックするたびにオーディオをリロードしようとするのではなく、最初に一度オーディオをロードして、メモリに保存されているものをオフにすることができないようです。

preload と autobuffer のプロパティを試してみましたが、モバイル サファリはこれらのプロパティを無視しているようです。それらを何に設定しても、動作は常に同じだからです。ソースタグとさまざまなファイル形式を試してみました...何もありません。

何か案は？

4

1 に答える 1

3

さて、解決策はちょっとしたハック、チート、回避策でした。呼び方は何でも構いません。

私が気付いたのは、再生したばかりのオーディオ ファイルで再生ボタンを押しても、ファイル自体がリロードされないことです。オーディオの再生が終わった後にオーディオを一時停止したことが原因である可能性がありますが、100% 確実ではありません。いずれにせよ、私がやったことは、4 つのオーディオ ファイルすべてを 1 つの大きなオーディオ ファイルに結合したことです (やった、Audacity~!)。次に、再生ボタンの 1 つを押すたびに、オーディオ オブジェクトの currentTime プロパティをそのトラックの開始点に設定し、終了点に達するまでトラックを再生し、再び一時停止します。任務完了！最初に 1 回読み込まれ、再生ごとに読み込まれることはありません。

さまざまなオーディオ トラックをすべて組み合わせる必要があるという考えに夢中ではありませんが、うまくいきます。

あ、それも。オーディオ トラックを読み込んで「canplaythrough」イベントを発生させるために、この関数をユーザー クリック イベントに追加しました。

var track;
function addHTMLAudio() {
    track = document.createElement('audio');
    track.id = 'mm_audio'
    track.autoplay = false;
    track.preload = false;
    track.addEventListener('canplaythrough',function(){
        track.removeEventListener('canplaythrough');
        audioLoaded = true;
    },false);       
    document.getElementById('body').appendChild(track);
    track.src = f.trackURL;
    track.play();
    setTimeout(function(){ track.pause();  },1);
}

playButton.addEventListener('click',function(e){
    if ( playStatus > 0 ) return;
    playStatus = 1;

    var myId = e.target.parentNode.id;
    var myClip = findClip( myId );

    myClip.state = 'active';        
    track.currentTime = myClip.tIndex.start;

    track.play();
    runAnimation(myClip);       
},false);
于 2011-05-03T21:42:46.350 に答える