用 html5 播放 m3u 播放列表

Question

我已经创建了一个非常简单基本的html5音频播放器，其实不外乎：

<audio src="[url-to-m3u]" controls>

但我面临两个问题，这个简单的音频标签在 Chrome 上工作，但在 Safari 7 上不工作 第二个是它不适用于我的 iPhone iOS7，也不适用于 HTC Android 2.3

---

播放列表元素是 mp3，内容类型：audio/mpeg

Answer 1

我猜对 m3u 文件格式的支持将分散在 HTML5 媒体兼容浏览器中。

它应该在iOS 上播放：尝试将 mime-type audio/mpegURL 或 application/x-mpegURL 添加到您的服务器（如果尚未完成）和我们的源标签。

<audio controls>
    <source src="[url-to-m3u]" type="audio/mpegURL" />
</audio>

您需要使用canPlayType 方法检查浏览器是否支持 mp3 和 m3u - 示例：

var supportsMp3 = false;
var myAudio = document.createElement('audio');
if (myAudio.canPlayType('audio/mpeg') !== ""){supportsMp3 = true;}

在继续交付 m3u 文件之前，您需要检查 audio/mpegURL 和 application/x-mpegURL 和 audio/mpeg。我建议您为您的案例场景使用后备，因为并非所有浏览器都将支持 m3u 文件。

例如 m3u 文件没有出现在 supported media matrix for Android 中。

编辑：您可以使用支持 m3u 文件的 JW player 来扩大浏览器覆盖范围。否则尝试找到一个开放的source/free flash player 作为后备。

您的 m3u 文件也可以使用 JS 解析以提取 mp3 URL（m3u 文件通常仅引用项目的播放列表）。之后，它只是使用正确的 mp3 URL 动态更改音频标签的 src。