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;`

将返回错误未捕获错误：INVALID_STATE_ERR：DOM异常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属性添加到我们的新源。

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

1 个答案: