html - 带有动态播放列表的HTML5 mp3 + ogg播放

Question

我无法弄清楚如何将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文件，只是对播放列表中的参数感到困惑。谢谢!

Answer 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的浏览将使用第一个来源。如果不支持mp3的浏览器(如firefox)将放弃此设置并继续查看。接下来将找到.ogg并将播放该文件。

您可以在此处看到更多信息:
http://www.w3schools.com/html/html5_audio.asp