关于音频
HTML5中并没有很多关于音频的新内容。好消息是，视频与音频共用HTMLMediaElement接口，这意味着之前了解到的所有关于脚本及视频的知识都可以应用于音频元素，但视频中多出来的width、height、audio、postframe这些视频元素则被被略去了。音频元素可以轻易通过构造器创建，并同时被赋予一个src属性：varaudio=newAudio(src);参照之前制作的视频播放器，让我们来为BigBuckBunny的音轨做一个音频播放器。滑块、时间显示、开始及停止的运行机制与视频的例子一样，只是增添了一个选择曲目的菜单，通过上一曲、下一曲两个按钮来选择不同曲目。同时，我们还在所有曲目结束处插人了一个循环(looping)功能，用以随机选择曲目播放。
这里所有的音乐都通过免费的跨平台音频编辑器Audacity(http://audacity.WAsourceforge.net)从视频音轨中抓取。若为私人用途.你还可以通过作曲人JanMorgenstem的主页免费下载无嘈杂背景音的原声音乐：
fhttp://www.wavemage.com/category/music
音频播放器的截图看上去似曾相识，因为所有新按钮同样使用Unicode符号标签。你可以在表中看到这些符号的详细列表。
下拉菜单同样似曾相识，但这次不是跳到指定位置播放，
宁波网站建设认为而是直接切换音轨。菜单、上一曲、下一曲、循环及拖曳按钮都可以实现音轨切换的效果，当然脚本逻辑相比之下也更为复杂。
让我们从audio元素开始：
〈audiosrc=Hmusic/bbb01_intro.ogg"oncanplay="canPlay()"ontimeupdate="updateProgress()"onended="continueOrStop()"〉
〈/audio〉
载入页面时，我们将src属性指向第一曲，并定义三个回调函数。此前介绍过的updateProgressO函数在这里同样用于移动滑块及更新时间显示(见代码清单)。两个新的回调函数，一个是canPlayO，在曲目可以播放时调用，另一^^continueOrStop(),用于决定在曲目播放完毕后该干什么。oncanplay的回调函数canPlay()十分简短：
canPlay=function(){
curPos.max=audio.duration;if(^bStatus.keepPlaying==true){}；}
类似于之前的视频播放器，curP〇S.max模拟了滑块的max属性。但后面的if判断是做什么用的呢？很简单：当音频处于播放状态下，拖动滑块后仍然保持播放状态。
因此，Play按钮的状态决定了当音频播放器在跳至另一曲目时是否应继续播放。若其状态为播放，每次曲目改变时都应保持播放状态《值若其状态为暂停，播放器只改变曲目，但仍保持在暂停状态。这看上去好像很复杂，但通过播放按钮的回调实现起来其实相当简单，我们只需要加人如下代码：
pbStatus.keepPlaying=
(pbStatus.keepPlaying==true)false:true;在每次单击按钮后，这段代码都会交替切换状态变量pbStatus.keepPlaying为true或false,以便canPlayO正确判断当前的播放状态。
回到正题，依靠canPlayO及pbStatus.keepPlaying，我们现在能够控制曲目的播放状态。那么又如何切换曲目呢？如前所述，切换曲目的做法有许多种，我们可以从菜单中选择，单击上一曲或下一曲按钮，又或是设置循环或单击随机(Shuffle)按钮，让音频播放器在每播完一曲后自动完成转换。上述选择拥有一个共同点：需要加载一个新的曲目，而这将通过[a-z]o[a-z]dTrack()方法实现：
varloadTrack=function(idx){
audio.src='music/'+tracks.options[idx].value;audio.load();}；需要解释两个细节：
1.idx代表什么？idx代表变量tracks中下拉菜单中的曲目索引，我们可以根据索引得到相应曲目的文件名。
2.audio.load()函数是做什么用的？你可能已经猜到了，它用来载人新曲目，并在当状态变为canplay时播放。
本文由乐华网络编辑，转载请注明出处
宁波网站建设www.leseo.net
