06-示例_使用所有3种音频格式
7.2.3 示例:使用所有3种音频格式
在例7-2中,在HTML5页面中嵌入并播放一个40s长的的歌曲song1。为了确保song1可以在尽可能多的浏览器中播放,为它设置3个不同的source标签。在本例中,还设置了autoplay、loop和controls属性,使歌曲可以自动播放并循环播放,同时显示浏览器默认的音频控制界面。以下是嵌入song1的代码。
<audio controls autoplay loop>
<source src="song1.mp3" type="audio/mp3">
<source src="song1.wav" type="audio/wav">
<source src="song1.ogg" type="audio/ogg">
</audio>
提示
正如对video处理的方式,已在列表第一行放置为广大iOS设备所支持的音频类型。这是因为手持设备不能很好地支持多个source标签。
使用Audacity制作.ogg、.wav和.mp3格式的歌曲。例7-2给出了完整代码。
例7-2 基础HTML5音频回顾
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH7EX2: Basic HTML5 Audio Revisited</title>
</head>
<body>
<div>
<audio controls autoplay loop>
<source src="song1.mp3" type="audio/mp3">
<source src="song1.ogg" type="audio/ogg">
<source src="song1.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
</div>
</body>
</html>
提示
song1是十年前使用Sonic Foundry的Acid musiclooping软件创作的。Acid是一款神奇的音轨制作工具,它甚至能帮助毫无乐感的人(例如作者)创作游戏和应用程序的背景音乐和音效。Acid被Sony出售,成为Windows中的独占产品。在Mac上,则可以使用GarageBand软件采用类似方式创作音乐。