带有动态播放列表的 HTML5 mp3 + ogg 播放答案

【问题标题】：HTML5 mp3 + ogg playback with dynamic playlist带有动态播放列表的 HTML5 mp3 + ogg 播放
【发布时间】：2012-10-31 12:42:16
【问题描述】：

我不知道如何将 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 文件，只是对播放列表中的参数感到困惑。谢谢！

【问题讨论】：

标签： html audio playlist

【解决方案1】：

这是如何工作的？

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

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

让我告诉它是如何工作的：

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

<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 的 Browses 将使用第一个源。如果不支持 mp3 的浏览器（如 firefox）将丢弃它并查看下一个。接下来它会找到 .ogg 并播放那个。

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

【讨论】：