如何使用 HTML5 将音频合并到网站中？

Question

我被要求为客户制作一个微型网站，他们希望它成为一个包含音频旁白的演示风格网站。

他们要求用 HTML5 来完成，但我还没有用 HTML5 制作任何东西。他们还希望它能够覆盖更广泛的受众，那么 HTML5 是否适用，最低的浏览器要求是什么？

除了 Flash 之外，还有一种方法可以为页面生成配音...也许是 jQuery 或者其他什么？

选项是否是

• HTML5，浏览器支持有限
• 基于 Flash 的网站，无法在 iPad/手机上查看 无
• 旁白！

Answer 1

每当您使用 HTML5 进行开发时，您都应该考虑提供向后兼容性的方法。

要确定最低浏览器要求，请访问此处：http://en.wikipedia.org/wiki/Comparison_of_layout_engines_ (HTML5)

使用 HTML5 音频：
http://www.w3schools.com/html5/html5_audio.asp

对于 HTML5 音频，您将需要至少两个声音文件副本才能访问每个浏览器：我会说一个是 mp3 格式，另一个是 Ogg Vorbis 格式。

您可以使用简单的浏览器检测 JavaScript 来确定浏览器并相应地提供内容： http://javascript.about .com/library/blbrsdet.htm

一般来说，最佳实践是确定支持，然后按顺序回退：

1. 如果支持 HTML5，请使用
2. 如果不支持支持HTML5，测试flash支持。如果可以，则提供 Flash 音频。
3. 如果两者都没有，则显示一段包含旁白内容的文本。

从本质上讲，始终提供最新、最好的服务，但首先要支持那些帮助您实现这一目标的技术。

Answer 2

此代码应该高度兼容（IE6+），使用 WAVE：

<![if (!IE)|(gte IE 9)]>
<audio id="speak" src="speak_a.wav" type="audio/wav"></audio>
<a href="#" onclick="document.getElementById('speak').play()">Speak</a>
<![endif]>
<!--[if lt IE 9]>
<bgsound id="speak" name="speak" autostart="false" loop="1">
<a href="#" onclick="document.all['speak'].src='speak_a.wav'">Speak</a>
<![endif]-->

另一种选择，同时使用 mp3/ogg 并且仍然非常兼容：

<![if (!IE)|(gte IE 9)]>
<audio id="speak">
  <source src="speak_a.ogg" type="audio/ogg" />
  <source src="speak_a.mp3" type="audio/mpeg" />
  <a href="speak_a.mp3">Download speak_a.mp3 if you cannot play it</a>
</audio>
<a href="#" onclick="document.getElementById('speak').play()">Speak</a>
<![endif]>
<!--[if lt IE 9]>
<bgsound id="speak" name="speak" autostart="false" loop="1">
<a href="#" onclick="document.all['speak'].src='speak_a.mp3'">Speak</a>
<![endif]-->

如果您不需要支持 IE9 及更早版本，则 标签应该足够了：

<audio id="speak">
  <source src="speak_a.ogg" type="audio/ogg" />
  <source src="speak_a.mp3" type="audio/mpeg" />
</audio>
<a href="#" onclick="document.getElementById('speak').play()">Speak</a>

另一种播放音频的旧方式：

<object data="speak_a.wav" type="audio/wav">
  <embed src="speak_a.wav"></embed>
</object>

您还可以使用第三方库，例如 audio.js