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

我被要求为客户制作一个微型网站，他们希望它成为一个包含音频叙述的演示风格网站。如何将音频合并到使用HTML5的网站中？

他们要求它在HTML5中完成，但我还没有在HTML5中产生任何东西。他们也希望它能够吸引更多的观众，所以HTML5将会适用，最低浏览器要求是什么？

除了Flash，是否有一种方法可以为页面制作配音... jQuery可能还是其他什么？

请问选项是

HTML5有限的浏览器支持
基于Flash的网站无法在iPad /电话
没有旁白查看！

来源

2011-09-06 RedLizard

可能重复：http://stackoverflow.com/questions/6426368/best-way-to-embed-背景音乐在网页 –

任何时候你用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音频。
如果两者都不显示，则显示包含叙述内容的文本块。

本质上，始终服务于最新和最好的，但支持的技术，让你在那里摆在首位。

来源

2011-09-06 22:37:43 stslavik

如果我没有记错，甚至不需要使用Javascript进行功能检测 - 至少对于服务于Flash而言 - 您是不是只需在HTML5内容后添加该播放器的标签标签？ – Nightfirecat

我相信这会导致双重打法，但可能有办法做到这一点，我不知道。你也许可以（因为HTML5的大部分支持都以各种方式严重依赖于javascript），在javascript运行的情况下，将包含Flash脚本的块的内部html替换为HTML5内容。 – stslavik

无论如何你都应该使叙述的文本可用。有些人的声音已关闭或听力受损，或者无论如何将使用屏幕阅读器。当音频不加载时，让文本更加明显。 – robertc

此代码应该能够很好地兼容（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

来源

2013-01-22 23:17:54 Pere

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

回答

相关问题