向后兼容且跨浏览器的音频播放

Question

向后兼容且跨浏览器的音频播放

htmlaudiocross-browserbackwards-compatibility

6

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

1）最佳音频文件格式是什么，涉及兼容性，大小和质量？

2）使用HTML5的最佳方式是什么，同时保持向后兼容性？

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

更新：最终已经在IE 6-9，Firefox和Chrome上运行成功；尚未测试Safari。我了解到Safari for Windows需要Quicktime，而IE需要Windows Media Player。

- David

2个回答

5

使用 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>

- Vektor

1

URL链接还建议添加基于Flash的备选方案，这可能是个好主意。 - Tim Tisdall

@TimTisdall：有些人没有安装Flash插件。 - David

@Vektor 第三个源标签应该是 type="audio/wav"，我认为是这样的？即使我修复了它，在IE9中仍然无法播放。 - David

@David：这就是为什么它是备选项...可能是最后的选择？ - Tim Tisdall

@David，你知道“fallback”是什么吗？Flash播放器几乎是本地浏览器播放后备选择。只有无知的人才会认为所有人都只支持你挑选的技术的浏览器。 - user151496

1

@user151496 我明白你的意思。但最终我并不需要将Flash添加到被接受的答案中以获得一个可行的解决方案。你能提供一个必须使用Flash的示例吗？ - David

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tim Tisdall · Accepted Answer

这是我在使用的:

<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 标签的系统上有效。

我从几个网站上收集了一些信息并将其组合在一起，但不幸的是我忘记了 URL。

更新

我后来改用howler.js处理这些问题。它自动处理与声音相关的所有跨浏览器问题。不幸的是，它不支持 IE 6-8，但我已经放弃支持那些浏览器了。