【问题标题】：Backwards and cross-browser compatible audio playing向后和跨浏览器兼容的音频播放
【发布时间】：2013-04-23 07:54:29
【问题描述】：

我需要在许多不同的网络浏览器和不同版本中播放音频文件。旧系统生成 4 位 WAV 文件，许多浏览器无法处理。所有文件都包含合成或录制的人声。反正我要换了。所以我的问题是：

1) 就兼容性、大小和质量而言，用于音频文件的最佳文件格式是什么？

2) 使用 HTML5 并保持向后兼容的最佳方式是什么？

我们需要支持 Internet Explorer 版本 6、7、8 和 9； Firefox、Chrome 和 Safari。

更新：终于可以在 IE 6-9、Firefox 和 Chrome 上运行了；还没有测试过 Safari。我了解到 Windows 版 Safari 需要 Quicktime，而 IE 需要 Windows 媒体播放器。

【问题讨论】：

标签： html audio cross-browser backwards-compatibility

【解决方案1】：

这是我正在使用的：

<audio autoplay>
    <source src="/static/sound/SOUND.mp3" type="audio/mpeg">
    <source src="/static/sound/SOUND.ogg" type="audio/ogg">
    <source src="/static/sound/SOUND.wav" type="audio/wav">
    <source src="/static/sound/SOUND.aiff" type="audio/x-aiff">
    <object>
        <param name="autostart" value="true">
        <param name="src" value="/static/sound/SOUND.mp3">
        <param name="autoplay" value="true">
        <param name="controller" value="false">
        <embed src="/static/sound/SOUND.mp3" controller="false" autoplay="true" autostart="true" type="audio/mpeg"></embed>
    </object>
</audio>

我在 MP3、OGG、WAV 和 AIFF 中提供相同的音频剪辑，然后让浏览器选择它想要播放的内容。 audio 标签适用于 HTML5，object 标签适用于旧系统，embed 适用于一些不支持 object 标签的系统。

我是根据一些网站上的一些信息整理出来的，但不幸的是我忘记了网址。

更新

我已经转而使用howler.js 来处理这些东西。它会自动处理与声音相关的所有跨浏览器问题。不幸的是，它不支持 IE 6-8，但我已经放弃了以任何方式支持这些。

【讨论】：

你在哪些浏览器上测试过这个？我用非最佳结果进行了尝试：Chrome 和 IE 6、7、8 播放 MP3 文件，没问题。 Firefox 和 Opera 成功回退到 OGG 文件。但是，Safari 失败并回退到 object 标签；再次失败并回退到嵌入标签；并显示“缺少插件”。 IE9 至少回退到 object 标签。
我得看看，但我想我把 aiff 文件放在那里专门用于 Mac 的。顺便说一句，浏览器不一定按照它发现它们列出的顺序尝试音频剪辑......通常浏览器对特定编码有偏好并首先寻找它。我很确定顺序无关紧要。
k.. 刚刚测试过。它在 Safari 中运行良好。你确定你包含了一个 aiff 文件吗？
我学到了一些东西。 Windows 版 Safari 需要 Quicktime，IE 需要 Windows 媒体播放器，才能使用
@stom - 我的答案中没有一个是 jquery ......但是由于 jquery 能够触发事件，那么也许你可以创建一个 10 秒的循环。但是，您可能需要查看 howler.js

【解决方案2】：

使用 HTML5 audio 标签，您可以指定不同的音频类型来尝试加载，因为每个浏览器都允许不同的类型。这个页面上有一个很好的兼容性图表：http://html5doctor.com/native-audio-in-the-browser/

以下代码适用于大多数浏览器。它首先尝试新的 HTML5 audio 方法，然后回退到 embed 方法。

<audio width="100" height="100" autoplay="" controls="" tabindex="0">
<source type="audio/mpeg" src="songs/All-My-Life.mp3"></source>
<source type="audio/ogg" src="songs/All-My-Life.ogg"></source>
<source type="audio/wav" src="songs/All-My-Life.wav"></source>
<embed width="100" height="50" src="songs/All-My-Life.mp3">
</audio>

【讨论】：

URL 链接还建议添加基于 Flash 的后备，这可能是个好主意。
@TimTisdall：有些人没有闪光灯。
@Vektor 第三个源标签应该有 type="audio/wav" 我相信？即使我修复了它无法在 IE9 中播放。
@David：因此为什么它是一个后备选项......可能是最后的手段？
@user151496 我明白你的意思了。但最终我不需要将 Flash 添加到已接受的答案中即可获得有效的解决方案。您能否提供一个需要 Flash 的示例？