HTML5中使用audio元素播放音訊
1. 首先介紹的是JS程式碼如何檢測當前瀏覽器是否支援某種音訊格式。主要使用audio的canPlayType()方法:
function checkAudio(){
var myAudio = document.createElement('audio');
if(myAudio.canPlayType){
if(""!=myAudio.canPlayType('audio/mpeg')){
document.write("您的瀏覽器支援mp3編碼。<br>");
}
if(""!=myAudio.canPlayType('audio/mp4;codecs="mp4a.40.5")){
document.write("您的瀏覽器支援acc編碼。<br>");
}
if(""!=myAudio.canPlayType('audio/ogg;codecs="vorbis")){
document.write("您的瀏覽器支援acc編碼。<br>");
}
}
}
2. audio元素的幾個重要屬性
a. autobuffer: 即自動緩衝,但不播放,預設為false.如果使用autoplay則會被忽略。
b. autoplay: 音訊載入足夠時即開始播放
c. controls: 用於指定瀏覽器內建播放控制元件。如果不指定,那麼頁面上不會顯示播放器。
d. loop:指定是否迴圈播放。
e. muted: ture開啟靜音,false未開啟靜音。
f. src:指定媒體資源的url地址。
g. volume:獲取或設定媒體資源的播放音量,範圍為0.0-1.0.0.0為靜音。
3.audio元素的幾個重要方法:
a. canPlayType方法 - 用於檢測瀏覽器是否支援某種媒體型別。
b. load方法 - 可用於重新載入媒體。
c. pause方法 - 暫停媒體播放
d. play方法- 播放媒體。
4. 播放音訊例子
<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
<source src="XXXX.ogg" type="audio/ogg">
<source src="XXX.mp3" type="audio/mpeg">
您的瀏覽器不支援audio標籤
</audio>
</body>
</html>
如果ogg支援則播放ogg檔案,否則繼續檢視mp3檔案是否支援,如果都不支援則顯示文字。
5. 背景音樂
<!DOCTYPE html>
<html>
<audio autoplay loop>
<source src = "XXX.mp3">
</audio>
</html>