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

我在浏览器中创建了简单的音频播放器，但有一些麻烦。例如，我的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和实践创造这个播放器 - 请不要用“印度守则”休克。

来源

2012-11-27 Stas Ushakov

'$（'。'part'_audio'）'？我假设你的意思是'$（'。'+ part +'_ audio'）'。请注意'+号。 –

是的，当然！ '+'符号因某些原因而消失。 –

我以前从来没有内置的音乐播放器，但我会做这样的：

开始通过像你这样做，但只有第一个歌曲与所有的音频格式：

<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(); 
});

未经测试，但你的想法。您还应该将编解码器属性添加到我们的新源。

来源

2012-11-27 14:59:58 tbleckert

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

回答

相关问题