通过 HTML5,音乐在网络上东山再起。添加音频文件就像插入图像那样简单,并且用户能在浏览器外播放音乐,从而实现惊人的音乐体验。
音频格式 | Chrome | Firefox | IE9 | Opera | Safari |
OGG | 支持 | 支持 | 支持 | 不支持 | 不支持 |
MP3 | 支持 | 不支持 | 支持 | 不支持 | 支持 |
WAV | 不支持 | 支持 | 不支持 | 支持 | 不支持 |
没有一种通用的文件格式让每个浏览器都使用单个文件格式意味着至少有 2/5 的浏览器无法播放某些声音。这不是无法在单一音频标准中达成一致的浏览器制造商不妥协的问题,而是涉及专利权和特许权使用费的法律和财务问题。不受软件专利限制的 OGG 格式旨在一劳永逸地解决这个问题。然而,在撰写本文时,Opera 和 Safari 都不支持 OGG。与 OGG 格式的文件相比,可用的 WAV 和 MP3 文件数量要更多,因此毫无疑问,浏览器制造商考虑到了这一点。MP3 作为事实的标准是个很好的解决方案。
解决方案:使用三种文件类型和
Ride of the Valkyries(《女武神》)。首先,您需要获得三种文件类型的音乐,即 OGG、MP3 和 WAV。将这些音乐文件与 HTML5 文件放在同一个文件夹内。然后,将每个文件名放在单独的
浏览器音频控件:没有两个是完全相同的 一旦您决定要在网站上提供音频,将面临一个有趣的设计选择。每个浏览器都有与众不同的外观,看起来像是有意识地故意使其与众不同。下面的图 1 展示了这些浏览器控件的外观。
图1:不同浏览器上的音频控件 除了 Chrome 浏览器外,所有浏览器都有开始/暂停控件、进度条、滑块、播放秒数、音量/静音控件,还显示声音文件的总秒数。使用HTML5 标准和浏览器支持,开发人员可以相信用户将拥有与 HTML5 音频类似的体验,因为浏览器控件是类似的。您还可以使用 Flash 和 Silverlight 等插件创建控件,但是对于不同的用户,体验可能会有所不同。 某些浏览器(如 IE9)甚至有自己的声音控制条,在浏览器本身之外运行。用户打开有声音的任何网站时,他们可以从 Windows 任务栏控制声音,并能够预览当前正在播放的声音。 检查 Pandora和 Slacker 个人电台网站,目前允许 IE9/Windows 7 用户将其网站固定到任务栏。此外,概念网站 Pin Site Radio 向您展示了如何将已定义的图像(在本示例中为无线电图像)固定到任务栏,让用户体验 HTML5 音乐。
音频文件源 如果您想抓住您喜欢的所有 iTunes 文件并将它们放在网页上,可能要重新考虑这个想法。首先,您必须将它们转换成浏览器可以读取的格式,虽然该工作可以完成,但可能非常棘手。其次,您不想与很多希望因您在网站上使用音乐而收取版权费的版权律师打交道。 在 web 上您可以找到很多免费的音乐(这些音乐还免除专利和版权费)、声音效果、声音循环和历史录音。Flashkit SFX 是大量免费音乐和声音的良好起点。您可以下载各种免费的声音文件,使您的万圣节网页在加载时听起来像门上的铰链摇摇欲坠!有趣的免费数字化圆筒录音收集(有的已超过 100 年)位于加州大学,Santa Barbara 保留蜡筒录音的项目中。此外,美国国会图书馆收集了大量的免费录音,您可以下载这些录音并在网页上使用。 最后,如果想为网页制作一个录音,PC 和 Mac 都提供了录音软件。Windows 7 录音机非常适用于录制语音和声音效果。您可以直接从录音机以 WAV 格式保存您的录音并对其进行转换。Mac 用户会发现 OS X 随附的 Sound Studio 可以使用Mac 上的内置麦克风将录制的材料保存为 MP3 文件。
结束语 HTML5 让开发人员可以更轻松地提供大量 web 体验。
查看这些资源,了解关于如何使用 HTML5
via:Ed Tittel
标签:HTML5浏览器相关audio音频