使用 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 类型的音频/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 文件不会出现在Android 支持的媒体矩阵中。

编辑：您可以使用支持 m3u 文件的JW 播放器以获得更广泛的浏览器覆盖范围。否则尝试找到一个开源/免费的 Flash 播放器作为后备。

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