HTML5 mp3 + ogg播放动态播放列表

时间:2012-11-12 03:00:34

标签: html5 audio playlist

我无法弄清楚如何将ogg文件合并到HTML5标记的播放列表中。现在我从目录JSON对象中读取文件,格式如下:

 var playlist = [{"url":"mp3\/122911.mp3","title":"122911"},    
 {"url":"mp3\/100909.mp3","title":"100909"},{"url":"mp3\/011110.mp3","title":"011110"},
 {"url":"mp3\/061207C.mp3","title":"061207C"},{"url":"mp3\/110309.mp3","title":"110309"},    
 {"url":"mp3\/120409.mp3","title":"120409"},{"url":"mp3\/031608.mp3","title":"031608"},     
 {"url":"mp3\/100609C.mp3","title":"100609C"},{"url":"mp3\/120408.mp3","title":"120408"},
  {"url":"mp3\/012908.mp3","title":"012908"},{"url":"mp3\/032107.mp3","title":"032107"}]

创造奇迹并将ogg文件加载到该对象中不是问题。我只需要知道如何告诉firefox ogg文件在那里。为了与JSON中的'url'和'title'一起使用,我是否缺少一个参数?我知道如果我只是静态地创建一切,它可以在音频标签中正确,但我不是。音频标签只是:

 <audio class="aud" autoplay>
    <p>Your browser doesn't support HTML 5 audio.</p>
</audio>

到目前为止它在chrome和safari中的mp3工作得很好。我知道我错过了一些简单的事情。我有ogg文件,只是混淆了我想的播放列表中的参数。谢谢!

1 个答案:

答案 0 :(得分:1)

这是如何运作的?

<audio class="aud" autoplay>
    <p>Your browser doesn't support HTML 5 audio.</p>
</audio>

没有来源。您是否将<source>动态添加到<audio>

让我告诉它是如何运作的:

您可以为<source指定多个<audio>。浏览器将在<source>中从上到下看,并尝试播放它支持的第一个。所以,如果你这样写:

<audio class="aud" autoplay>
    <source src="music.mp3" type="audio/mpeg">
    <source src="horse.ogg" type="audio/ogg">   
    <p>Your browser doesn't support HTML 5 audio.</p>
</audio>

这就足够了。支持mp3的浏览器将使用第一个源。如果浏览器,如firefox,不支持mp3将丢弃此并查看下一步。它会在下一个找到.ogg并将播放那个。

你可以在这里看到更多: http://www.w3schools.com/html/html5_audio.asp