【IT168技术】人类的世界充满着声音，现在随着HTML5的越来越流行，web开发者开始发现，在HTML5的世界中，声音的使用变得更加简单和丰富，只需要使用标签，就可以在页面中嵌入音频了。当然，HTML5中的音频的使用可以很简单，也会有高级的用法，从普通的音频到跟用户交性很强的象游戏的音频都可以支持，在本文中，将带领读者一步步了解HTML5中audio标签的各种用法和使用技巧。
在页面中增加标签
首先，来学习标签的最基本用法，就是直接在页面中进行嵌套，如下：
</audio>
这里通过src制定了要播放的mp3文件，并且设置了autoplay为自动播放。
也可以使用如下的方法进行播放音频：
if (audio != null && audio.canPlayType && audio.canPlayType("audio/mpeg"))
{
audio.src = "audio/sample.mp3";
audio.play();
}
这里是通过javascript的方法去设置音频的播放，甚至可以象如下代码一样，以音频流的方式进行嵌套：
</audio>
对比下上面的三种关于audio标签的声明方式，第一种允许开发者在页面加载的时候就初始化audio控件，第二种方法使用javascript方法，能让开发者更好地通过各类参数去定制audio的属性行为，最后一种方法不大推荐，因为使用的是data-uri的方式将音频嵌套入页面中去，但这能减少对服务端的请求。
要注意的是，通过javascript来调用audio标签的话，甚至不需要将audio标签添加到DOM树中去，上面的代码会默认产生的播放控件效果如下图：
尽管在本文中，对HTML 5支持的音频格式不会详细的进行探讨，但读者可以参考以下这篇文章(http://msdn.microsoft.com/en-us/library/gg589524%28v=VS.85%29.aspx )，
这里有详细的介绍，另外一点需要提醒读者注意的是，如果把MP3等音频格式文件放在web 服务器上，一定要记得设置好web 服务器的MIME类型为(“audio/mpeg”),比如下图是在微软的IIS服务器上进行的设置：
预先加载音频
在实际的开发中，一种对音频很好的处理方法是对其进行预先加载，这样可以提高页面的加载速度，HTML5的标签提供了preload属性，并有三种值可供选择：
· "none": 这个值指的是用户不需要对音频进行预先加载，这样可以减少网络流量，一个典型的情景是如果是一个具备播客功能的语音播客中，每一篇文章其实都有音频，但只有当用户确认打开这些音频收听时，才通过网络进行加载。否则，试想一下，这么多数量的音频同时进行预加载，速度是相当慢的。
· "metadata": 这个选项的值将告诉服务端，用户依然不想马上加载音频，但需要预先获得音频的元数据信息(比如文件的大小，时长等)。如果开发者是在设计音频播放器或者需要获得音频的信息而不需要马上播放视频，则可以使用这个选项。
· "auto":这个选项告诉服务端，用户需要马上加载音频并进行流式播放，这在比如一些游戏场景等需要实时音频的场景中会用到。
要注意的是，如果在使用audio标签时中当设置音频的src值的时候，默认采用的设置值是将preload的加载属性设置为auto的，因此如果需要另外设置加载的属性值，需要在设置src前进行设置。
下面我们通过实验，来观察下三种不同的选项下网络的流量情况,注意的是,要禁止使用本地缓存.这通过IE菜单中使用F12弹出调试工具后,再选择”Always refresh from sever”选项即可。如下图：
下图是preload=none的情况：
下图是preload=metadata的情况
下图是preload=auto的情况
开发者可能会关心另外一个问题，就是想知道浏览器是什么时候实际去下载音频和开始播放的，这可以通过监听"canplaythrough"事件去获得，当浏览器下载完音频并具备播放条件时，使用如下代码监视：
audio.src = "audio/sample.mp3";
audio.addEventListener("canplaythrough", function () {
alert('The file is loaded and ready to play!');
}, false);
下面的地址是一个演示的实例：http://www.giorgiosardo.com/HTML5/audio/PreloadReady.htm
${PageNumber}Loops循环播放
下面我们来学习下loops循环播放，当要循环播放一段音频时，可以在audio标签中使用该属性，这将一直让音频播放，除非用户显式调用pause方法，如下代码：
</audio>
下面是一个例子：http://www.giorgiosardo.com/HTML5/audio/Loop.htm
也有另外一种方法，可以在程序中控制循环播放，就是在当某段音频播放结束时，然后等待一些时间，然后再重新播放，如下代码：
audio.src = "piano/3C.mp3";
audio.addEventListener('ended', function () {
//等待500毫秒
setTimeout(function () { audio.play(); }, 500);
}, false);
audio.play();
下面是上面代码运行的例子：http://www.giorgiosardo.com/HTML5/audio/Loop_Custom.htm
如果需要在播放时，控制用户停止播放，则可以通过如下代码实现，设置currentTime=0:
var audio = null;
audio = document.createElement("audio");
audio.src = "piano/3C.mp3";
audio.addEventListener('ended', function () {
audio.play();
}, false);
function play() {
audio.play();
}
function restart() {
audio.currentTime = 0;
audio.play();
}
下面的地址是上面代码运行的实际例子：http://www.giorgiosardo.com/HTML5/audio/Loop_Restart.htm
多Audio标签
<audio src="audio/Bass.mp3" autoplay loop>
</audio>
<audio src="audio/Drum.mp3" autoplay loop>
</audio>
<audio src="audio/Crunch.mp3" autoplay loop>
</audio>
<audio src="audio/Guitar.mp3" autoplay loop>
</audio>
<audio src="audio/Pizzicato.mp3" autoplay loop>
</audio>
</body>
如果用户的场景中，需要同时播放同一个音频文件，这可以通过创建多个audio标签，并且指向同一个文件即可，下面的代码片段讲解了如何使用多个audio标签，代码如下：
在上面的代码中,是使用了多个audio标签,每个标签都指向了不同的音频文件,这些音频文
件的长度是相同的,这样这个例子运行起来的效果就是同时播放这些音频,下面的地址是其实
际运行效果: http://www.giorgiosardo.com/HTML5/audio/Multiple_Markup.htm
当然,开发者也可以通过javascript的方法,动态增加多个音频文件,代码如下:
AddNote("3E");
AddNote("3G");
function AddNote(name) {
var audio = document.createElement("audio");
audio.src = "piano/" + name + ".mp3";
audio.autoplay = true;
}
要注意的是,随着应用的复杂,对于能预加载的音频的数量和能够同时播放的音频数量,
是有一定限制的 ,这其实取决于pc服务器和浏览器,在ie 9下表现还算良好,可以通过下面的
这个地址进行测试：http://www.beatkeep.net/Latest.htm
${PageNumber}音频播放的异步策略
由于网络一般来说都存在不稳定的因素，因此要考虑音频播放时的延时等很多因素，特别地，当处理多个文件时，有的文件可能先播放，有的后播放，比如，下图是有3个上文提及的音频在播放时的网络加载情况：
从上图可以看出，不同的文件的加载时间点是不同的，一个非常常见的策略，是先预先把所有的音频文件都先加载，然后一旦都加载准备完毕，则可以通过循环逐一对它们进行播放，下面是相关的代码：
var loading = 0;
AddNote("2C");
AddNote("2E");
AddNote("2G");
AddNote("3C");
AddNote("3E");
AddNote("3G");
AddNote("4C");
function AddNote(name) {
loading++;
var audio = document.createElement("audio");
audio.loop = true;
audio.addEventListener("canplaythrough", function () {
loading--;
if (loading == 0) // All files are preloaded
StartPlayingAll();
}, false);
audio.src = "piano/" + name + ".mp3";
audios.push(audio);
}
function StartPlayingAll() {
for (var i = 0; i < audios.length; i++)
audios[i].play();
}
下面这个地址是上面代码的演示：
http://www.giorgiosardo.com/HTML5/audio/Synch.htm
现在，我们将学到的知识都整合在一起，下面的这个例子，将演奏一段大家都很熟悉的乐曲《两只老虎》(Frère Jacques),它将先装载所有的音频文件，并且在浏览器端显示出来其加载进度。运行的地址在这里：
http://www.giorgiosardo.com/HTML5/audio/Piano.htm 。
${PageNumber}使用HTML 5音频优秀网站的例子
下面介绍几个目前使用html 5音频十分优秀的网站例子：
1) http://www.pirateslovedaisies.com/
这个是一个游戏网站，其中在首页就使用了HTML 5 AUDIO标签，并且预先加载需要用的音频素材，以进度条的形式显示。而且该网站的制作团队还在设计将更多的关于HTML5 Audio的操作封装成类库，以方便开发者调用，下面是其中一部分开源的代码，其中充分考虑到网络的加载音频时出现的异常等情况的处理。
var h=document.createElement("audio");
if(f!=true){
this.currAsset=h;
this.timeoutId=setTimeout($.proxy(this,"handleAudioTimeout"),e.AUDIO_TIMEOUT);
h.addEventListener("canplaythrough",$.proxy(this,"handleAudioComplete"),false);
h.addEventListener("error",$.proxy(this,"handleAudioError"),false)
}
h.setAttribute("id",a);
h.setAttribute("preload","auto");
$("<source>").attr("src",b).appendTo(h);
$("<source>").attr("src",b.split(".mp3")[0]+".ogg").appendTo(h);
document.body.appendChild(h)
}
,handleAudioComplete:function(b){
if(LoadedAssets.getAsset(b.target.id)!=true){
LoadedAssets.addAsset(b.target.id,true);
clearTimeout(this.timeoutId);
this.calculatePercentLoaded(true)
}
}
,handleAudioError:function(b){
trace("Error Loading Audio:",b.target.id);
LoadedAssets.addAsset(b.target.id,true);
clearTimeout(this.timeoutId);
this.calculatePercentLoaded(true)
}
,handleAudioTimeout:function(){
trace("Audio Timed Out:",this.currAsset.id);
LoadedAssets.addAsset(this.currAsset.id,true);
this.calculatePercentLoaded(true)
}
2 www.beautyoftheweb.com/firework
这个网站也是一个较好的示范了如何使用HTML 5音频的好网站，它允许开发者在这个页面中，自由选择不同的音轨进行合成演奏，还可以调整每个音轨的音量大小，下面是其部分代码：
for (var i = 0; i < 5; i++) {
var aud = document.getElementById("aud" + i);
targetVolumes.push(0);
aud.volume = 0;
audioTags.push({
"tag": aud,
"ready": false
});
aud.addEventListener('canplaythrough', onCanPlayAudio, false);
}
document.getElementById("tompkins").src = MediaHelper.GetVideoUrl("Firework_3");
for (var i = 0; i < audioTracks.length; i++) {
document.getElementById("aud" + i).src = MediaHelper.GetAudioUrl(audioTracks[i]);
}
3 复杂的音频创作器
最后介绍的是一款复杂的音频创作器，网站是：http://www.beatkeep.net/ ,用户可以在上面进行创作。如下图：
小结
在本文中，对HTML 5的AUDIO标签的基本用法作了介绍，并介绍了几个优秀的HTML5 使用音频的网站，希望读者在HTML 5的audio标签中，能起到一定的帮助。
