一直在纠结360浏览器极速模式下不支持music标签，在自己网页里放歌曲，在极速模式下不能播放跟360投诉过也没有解决。今天发现了HTML5的Audio标签，解决了我一直以来纠结的问题。看来确实该用点新技术了。下面我把使用HTML5播放音乐的方法分享给大家。
HTML5 audio
在HTML5标准网页里面，我们可以运用audio标签来完成我们对声音的调用及播放。以下是最经常见到的运用HTML5三种基本格式：
1.最少的代码
<audio src="song.ogg" controls="controls"></audio>
2.带有不兼容提醒的代码
<audio src="song.ogg" controls="controls"> Your browser does not support the audio tag. </audio>
3.尽量兼容浏览器的写法
<audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio>
HTML5音频格式
当前，HTML5 Audio标签支持三种格式的音频，分别是wav mp3和ogg格式。而目前主流浏览器对他们的支持如下：
| IE 9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 | |
|---|---|---|---|---|---|
| Ogg Vorbis | √ | √ | √ | ||
| MP3 | √ | √ | √ | ||
| Wav | √ | √ | √ |
IE8以及IE8以下不支持HTML5的audio标签
HTML 5 Audio属性
- autoplay:唯一可选值为autoplay，出现autoplay属性并准确赋值时，音频将会自动播放
- controls：唯一可选值为controls，出现controls属性并准确赋值时，音频播放控件将会显示，控件包括：播放、暂停、定位、音量、全屏切换、字幕（如果可用）、音轨（如果可用）。
- loop：唯一可选值为loop，出现loop属性并准确赋值时，音频将会循环播放。
- preload：可选值有auto(当页面加载后载入整个音频)、meta(当页面加载后只载入元数据)和none(当页面加载后不载入音频) 如果设置了前面的autoplay属性，那么preload将会被忽略。
- src：指定音频URL地址，可以是相对的URL也可以是绝对的URL 当然还可以像第2和第3个例子一样，用source标签来指定源。
版权共享，随意转载：云破天开 » HTML5的Audio标签使用详解