当前位置:嗨网首页>书籍在线阅读

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软件采用类似方式创作音乐。