html - 使用 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 类型的 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中.

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

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