html5中audio標籤
html5的audio功能上已經非常強大，回放，跳轉，緩衝等以前只能用flash才能實現的功能，html5的audio都能輕鬆搞定
最近的一個專案使用到了這個功能，把我使用的情況寫下來，供大家參考, 因為我需要的功能很簡單，所以做的不復雜，如果要使用更多的功能，可以參考下面的api，能實現很多高大上的功能
audio 相關的 api
備用（當瀏覽器不支援audio時顯示的內容）
控制函式功能說明
修改source的值後需要audio.load();重新載入音訊才會播放
load() 載入音訊、視訊軟體，通常不必呼叫，除非是動態生成的元素，用來在播放前預載入
play() 載入並播放音訊、視訊檔案，除非檔案已經暫停在其他位置，否則預設重頭開始播放
pause() 暫停處於播放狀態的音訊、視訊檔案
audio 的只讀媒體特性有：
只讀屬性屬性說明
duration 獲取媒體檔案的播放時長，以s為單位，如果無法獲取，則為NaN
paused 如果媒體檔案被暫停，則返回true，否則返回false
ended 如果媒體檔案播放完畢，則返回true
startTime 返回起始播放時間，一般是0.0，除非是緩衝過的媒體檔案，並一部分內容已經不在緩衝區
error 在發生了錯誤後返回的錯誤程式碼
currentSrc 以字串形式返回正在播放或已載入的檔案，對應於瀏覽器在source元素中選擇的檔案
audio 可指令碼控制的特性值：
autoplay 自動播放已經載入的的媒體檔案，或查詢是否已設定為autoplay
loop 將媒體檔案設定為迴圈播放，或查詢是否已設定為loop
currentTime 以s為單位返回從開始播放到目前所花的時間，也可設定currentTime的值來跳轉到特定位置
controls 顯示或者隱藏使用者控制介面
volume 在0.0到1.0間設定音量值,或查詢當前音量值
muted 設定是否靜音
autobuffer 媒體檔案播放前是否進行緩衝載入，如果設定了autoplay，則忽略此特性
對於這些屬性，主流的瀏覽器都支援。可是別以為就沒有了相容性，在音訊播放流中，有兩個陣營。firefox 和 opera 支援 ogg 音訊，safari 和 ie 支援 mp3.幸好Google的chrome都支援。
audio的事件：
oncanplay 當媒介能夠開始播放但可能因緩衝而需要停止時執行指令碼
onerror 當在元素載入期間發生錯誤時執行指令碼
ontimeupdate 當播放位置改變時（比如當用戶快進到媒介中一個不同的位置時）執行的指令碼。
還有其他方法看w3c
關於ios不支援預載入的問題
ios不支援預載入真的很操蛋，當點選播放的時候音訊沒載入完成，但是我通過監聽音訊的play事件或者onplaying(當媒介資料已開始播放時執行指令碼)發現在ios上音訊沒有播放，但是這事件已經執行了，所以又重新監聽了canplaythrough事件（當視訊可以正常播放且無需停頓時執行 JavaScript）來給音訊播放之前加loading效果
this.$refs.audio.addEventListener('loadstart', () => {
console.log('onloadstart')
this.$refs.playImg.classList.add('disabled')
})
this.$refs.audio.addEventListener('canplaythrough', () => {
console.log('canplaythrough')
this.$refs.playImg.classList.remove('disabled')
})
<audio controls="controls" preload="auto">
// preload="auto"設定為預載入的 audio 元素
<div id="audioControl">
<div class="play">
<span id="play">Play</span>
</div>
</div>
<audio id='media'>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
</audio>
var media = $('#media')[0];
var audioTimer = null;
//繫結播放暫停控制
$('.play').bind('click', function() {
playAudio();
});
//播放暫停切換
function playAudio() {
if(media.paused) {
play();
// 當前的播放，其他的音樂都暫停
for(var i= 0;i<$('audio').length;i++){
if(i!==index){ //index表示當前播放的audio的索引值
$('audio').eq(i)[0].pause();
$('audio').eq(i)[0].currentTime = 0;
$('.item .list').eq(i).find('.play').removeClass('on');
}
}
} else {
pause();
}
}
//播放
function play() {
media.play();
$('#play').html('Pause');
}
//暫停
function pause() {
media.pause();
$('#play').html('Play');
}
音訊的倍速播放 playbackRate
myVid=document.getElementById(“video1”);
myVid.playbackRate=0.5;
---------------------
原文：https://blog.csdn.net/zhangyabo_code/article/details/78320320
也介紹的詳細https://www.cnblogs.com/reaf/p/6009712.html