audio元素

使用HTML5 audio元素是新的在网页中嵌入音频文件的标准方法。在该元素出现之前,大部分播放音频的网页采用的都是嵌入式插件(如Flash)。

我们既可以在HTML中使用<audio>标签,也可以在Javascript中使用audio对象。

<audio controls="controls">
	<source src="music.mp3" type="audio/mp3"></source>
	你的浏览器不支持html5音频播放
</audio>

注意:不支持audio元素的浏览器会忽视<audio>标签,并将标签内的其他内容渲染出来。可以利用这一点向那些还在使用老式浏览器的用户显示默认消息或一个指向现代浏览器的链接。

上述代码中的controls属性会使浏览器显示一个简单的“浏览器指定”的音频文件播放页面(包括如播放/暂停按钮和音量控制条)。

audio元素还有如下的一些属性:

函数名 作用
preload 指定音频是否会被预加载
autoplay 指定音频被加载后是否自动播放
loop 指定音频播放结束后是否循环播放

目前有三种流行的音频文件格式被浏览器锁支持:MP3、WAV和OGG。需要注意的是,并非所有的浏览器都支持所有的音乐格式,如FireFox浏览器,因为一些授权上的原因,不能播放MP3格式的文件,但是可以播放OGG文件。另外Safair浏览器支持MP3格式文件,而不支持OGG。

为了避开这个限制,我们准备了多种不同格式的音频文件,以供浏览器选择并播放。<audio>标签中允许出现多个<source>标签,浏览器会自动使用第一个支持的格式。

代码如下:

<audio controls="controls">
	<source src="music.mp3" type="audio/mp3"></source>
        <source src="music.ogg" type="audio/mp3"></source>
	你的浏览器不支持html5音频播放
</audio>

audio对象与HTML中的<audio>标记一样,需要先探查到浏览器支持的音频播放格式。然后加载合适的文件。audio对象提供canPlayType()方法以探查浏览器是否支持某种音频格式,让返回“”、“maybe”或“probably”。利用该方法,可以先对浏览器做一个简单的检查,然后根据检测结果加载合适的文件。

代码如下:

<script>
    var audio = document.createElement('audio');
    var mp3Support,oggSupport;
    if(audio.canPlayType){
        //当前canPlayType()方法反回“”、“maybe”或“probably”;
        mp3Support = '' != myAudio.canPlayType('audio/mpeg');
        oggSupport= '' != myAudio.canPlayType('audio/ogg; codecs = "vorbis"');
    }else{
        //不支持audio标签
        mp3Support = false;
        oggSupport = false;
    }
    //检查是否支持OGG、MP3,如果都不支持,就将soundFileExtn设置为undefined
    var soundFileExtn = oggSupport?".ogg":mp3Support?".mp3":undefined;
    if(soundFileExtn ){
        var sound = new Audio();
        //加载具有探查到扩展名的声音文件
        sound.src = "bounce" + soundFileExtn ;
        sound.play();
    }
</script>

音频文件加载完成后,audio对象触发canplaythrough事件。我们可以利用该事件追踪音频文件何时加载完成,代码如下所示。

<script>
    if(soundFileExth){
        var sound = new Audio();
        sound.addEventListener('canplaythrough',function(){
            alert('loaded');
            sound.play();
        });
        //加载具有探查到扩展名的声音文件。
        sound.src = "bounce" + soundFileExth;
    }
</script>

通过这样的方式,我们可以设计一个预加载的对象,由他负责在游戏开始之前将游戏资源全部加载进来。详细方法我们将在以后进行讨论