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

通常，最佳做法是确定支持，然后按顺序退回：

如果他们支持HTML5，请使用<audio>
如果他们不支持HTML5，请测试Flash支持。如果没问题，请提供flash audio。
如果两者都没有，则显示带有旁白内容的文本块。

基本上，始终提供最新最好的服务，但首先支持那些让您获得技术的技术。

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>标记就足够了：

<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

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

2 个答案: