視頻解碼器 H.264 Throra VP8
音頻解碼器 AAC MP3 Ogg
1.音頻標准
audio 元素支持三種音頻格式：ogg、mp3、wav
| - | IE9 | -Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 |
|---|---|---|---|---|---|
| Ogg Vorbis | - | √ | √ | √ | - |
| MP3 | √ | - | - | √ | √ |
| Wav | - | √ | √ | - | √ |
2.創建audio
<audio id="audio" src="music/Serenade.mp3" preload>
對不起，您的瀏覽器不支持HTML5音頻播放。
</audio>
由上述表格可見，至少要兩種音頻格式才能覆蓋所有瀏覽器，所以一般在寫audio標簽時候，會使用提供多種資源，瀏覽器會根據它對媒體類型或者編碼器的支持進行選擇，如下：
<!--常用-->
<audio controls>
type:指定文件類型
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
3.操作audio
| 方法 | 描述 |
|---|---|
| load() | 重新加載音頻元素 |
| play() | 開始播放音頻 |
| pause() | 暫停當前播放的音頻 |
| volume | 設置或返回音頻的音量，取值范圍（0——1） |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>簡單音樂播放器</title>
<link rel="stylesheet" href="css/music.css">
</head>
<body>
<h3>簡單音樂播放器</h3>
<hr />
<!--音樂文件的載入-->
<!-- preload 屬性規定是否在頁面加載后載入視頻。 -->
<audio id="audio" src="music/Serenade.mp3" preload>
對不起，您的瀏覽器不支持HTML5音頻播放。
</audio>
<!--仿CD樣式圓形圖片-->
<div id="CDimage">
<img src="image/sky.jpg" />
</div>
<!--音量調節進度條-->
<!-- step:買不，間隔，每次加減的多少0,0.1,0.2 -->
<div>
<input id="volume" type="range" min="0" max="1" step="0.1" />
</div>
<!--顯示歌曲名稱-->
<div>
當前正在播放: <span id="title">小夜曲</span>
</div>
<!--音樂播放器按鈕-->
<div>
<button id="prevBtn"><img src="image/previous.png" width="50" height="50" /> </button>
<button id="toggleBtn"><img src="image/play.png" width="50" height="50" /></button>
<button id="nextBtn"><img src="image/next.png" width="50" height="50" /></button>
</div>
<script>
/* 獲取音樂audio，音量volume，暫停播放toggleBtn，歌曲名稱title */
var music = document.getElementById("audio");
var volume = document.getElementById("volume");
var toggleBtn = document.getElementById("toggleBtn");
var title = document.getElementById("title");
var prevBtn = document.getElementById("prevBtn");
var nextBtn = document.getElementById("nextBtn");
//音樂路徑列表
var list = new Array("music/Serenade.mp3", "music/EndlessHorizon.mp3", "music/月光下的雲海.mp3");
//音樂標題列表
var titleList = new Array("小夜曲", "無盡的地平線", "月光下的雲海");
//定義當前是第幾首曲目
var i = 0;
toggleBtn.onclick = function() {
if (music.paused) {
music.play();
//播放音樂
toggleBtn.innerHTML = '<img src="image/pause.png" width="50" height="50"/>';
} else {
music.pause();
//暫停音樂
toggleBtn.innerHTML = '<img src="image/play.png" width="50" height="50"/>';
}
}
//切換上一首歌曲
prevBtn.onclick = function() {
if (i == 0) {
i = list.length - 1;
} else {
i--;
music.pause();
music.src = list[i];
title.innerHTML = titleList[i];
music.play();
}
}
//切換下一首歌曲
nextBtn.onclick = function() {
if (i == list.length - 1)
i = 0;
else
i++;
music.pause();
music.src = list[i];
title.innerHTML = titleList[i];
music.play();
}
//設置音量大小
volume.onchange=function(){
music.volume = volume.value;
}
</script>
</body>
</html>