jquery - 在浏览器中播放音频的正确方法？

Question

我在浏览器中创建了简单的音频播放器，但遇到了一些麻烦。
例如，我的 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 个项目的列表。一个项目一个轨道。我在点击事件上播放它。麻烦的是，当页面加载缓存中的所有 20 个轨道时，对吗？并且某些轨道可能根本无法加载或部分加载。因此，尝试播放此类轨道将失败。 (例如 track17 没有加载，如果我点击 item17 歌曲将不会播放)。另外，我像这样停止上一首歌

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

因此，如果上一首轨道未完全加载或部分加载，则此字符串

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

将返回错误 Uncaught Error: INVALID_STATE_ERR: DOM Exception 11。
所以我必须多次重新加载页面 - 然后所有 20 首歌曲将加载到我的缓存中，并且播放将不会出现错误。但这是错误的方式。请告诉我正确的。
谢谢!

你可以在这里看到我的播放器(不是广告): http://www.pompeya-for.me

我刚开始学习 jQuery 并创建这个播放器进行练习 - 请不要对“印度代码”感到震惊。

Answer 1

我以前从未构建过音乐播放器，但我会这样做:

像您一样开始，但只有第一首具有所有音频格式的歌曲:

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

您有播放列表导航，每个链接都指向歌曲的网址。使用 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();
});

未经测试，但你明白了。您还应该将 codecs 属性添加到我们的新源中。