1

ブラウザで簡単なオーディオプレーヤーを作成しましたが、問題があります。たとえば、HTMLコードに20個のオーディオタグがあります。

            <audio class="tr_audio">
               <source src="track1.mp3" type="audio/mpeg">
               <source src="ogg/track1.ogg" type="audio/ogg">
            </audio>
         <audio class="tr_audio">
               <source src="track2.mp3" type="audio/mpeg">
               <source src="ogg/track2.ogg" type="audio/ogg">
            </audio>
         <audio class="tr_audio">
               <source src="track3.mp3" type="audio/mpeg">
               <source src="ogg/track3.ogg" type="audio/ogg">
            </audio>
           ...
         <audio class="tr_audio">
               <source src="track20.mp3" type="audio/mpeg">
               <source src="ogg/track20.ogg" type="audio/ogg">
            </audio>

20項目のリストがあります。1トラックにつき1アイテム。そして、クリックイベントで再生します。ページがキャッシュにロードされている20トラックすべてをロードしているときに、問題が発生しますか？また、一部のトラックは、まったくロードできないか、部分的にロードできない場合があります。したがって、そのようなトラックを再生しようとすると失敗します。（たとえば、track17がロードされておらず、item17をクリックすると曲が再生されません）。また、このように前の曲を止めます

$('.'+part+'_audio')[song_number].currentTime = 0;
    $('.' part '_audio')[song_number].pause();

したがって、前のトラックが完全にロードされていないか、部分的にロードされている場合、この文字列

`$('.'+part+'_audio')[song_number].currentTime = 0;`

エラーUncaughtError：INVALID_STATE_ERR：DOM Exception 11.を返します。そのため、ページを数回リロードする必要があります。そうすると、20曲すべてがキャッシュに読み込まれ、エラーなしで再生されます。しかし、それは間違った方法です。右を教えてください。ありがとうございました！

あなたはここで私のプレーヤーを見ることができます（広告ではありません）：http ：//www.pompeya-for.me

私はjQueryを学び始め、練習用にこのプレーヤーを作成し始めました。「インドのコード」に驚かないでください。

4

1 に答える 1

0

私はこれまで音楽プレーヤーを作成したことがありませんが、次のように作成します。

あなたがやったように始めますが、すべてのオーディオ形式の最初の曲だけです：

<audio class="tr_audio">
    <source src="track1.mp3" type="audio/mpeg">
    <source src="ogg/track1.ogg" type="audio/ogg">
    .....
</audio>

プレイリストナビゲーションがあり、各リンクから曲のURLにアクセスできます。jQueryを使用すると、クリックした曲のオーディオsrcを変更できるようになりました。「canPlayType」を使用して、使用するファイル形式を確認できます。

<ul>
    <li><a href="track2.mp3">Track 2</a></li>

jQueryは次のようになります。

$('ul > li > a').on('click', function (e) {
    e.preventDefault();
    var src = $(this).attr('href'),
        filetype = src.split('.').pop(),
        player   = $('audio'),
        newSrc   = $("<source>").attr("src", src); //Need to modify src with help off canPlayType

     player.empty();
     player.append(newSrc);

     player[0].load();
     player[0].play();
});

テストされていませんが、アイデアは得られます。また、コーデック属性を新しいソースに追加する必要があります。

于 2012-11-27T14:59:58.290 に答える