<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>audio監(jiān)聽播放完畢</title>
</head>
<body>
<!--src:音頻播放路徑-->
<audio src="../../audio/eyJuYW1lIjoibnVtYmVyX2h1bWVuIn0.YiMBkg.Sc4UTg6jfaqRhGBxW0AnYOuiAGQ/play.mp3" id="audio"
controls="true" autoplay="true">
Your browser does not support the audio element.
</audio>
<script>
let audio = document.getElementById("audio");
// 音頻不循環(huán)播放
audio.loop = false;
// addEventListener:
// true - 事件句柄在捕獲階段執(zhí)行
// false - 默認(rèn)。事件句柄在冒泡階段執(zhí)行
audio.addEventListener('loadstart', function () {
console.log("客戶端開始請求數(shù)據(jù)");
}, false);
audio.addEventListener('progress', function () {
console.log("客戶端正在請求數(shù)據(jù)");
}, false);
audio.addEventListener('error', function () {
console.log("請求數(shù)據(jù)時遇到錯誤 ");
}, false);
audio.addEventListener('stalled', function () {
console.log("網(wǎng)速失速 ");
}, false);
audio.addEventListener('play', function () {
console.log("play()和autoplay開始播放時觸發(fā) ");
}, false);
audio.addEventListener('pause', function () {
console.log("暫停觸發(fā)");
}, false);
audio.addEventListener('loadedmetadata', function () {
console.log("當(dāng)指定的音頻/視頻的元數(shù)據(jù)已加載時");
}, false);
audio.addEventListener('loadeddata', function () {
console.log("當(dāng)當(dāng)前幀的數(shù)據(jù)已加載，但沒有足夠的數(shù)據(jù)來播放指定音頻/視頻的下一幀時，會發(fā)生 loadeddata 事件。");
}, false);
audio.addEventListener('waiting', function () {
console.log("等待數(shù)據(jù)，并非錯誤");
}, false);
audio.addEventListener('playing', function () {
console.log("正在播放時觸發(fā)。");
}, false);
audio.addEventListener('canplay', function () {
console.log("可以播放，但中途可能因?yàn)榧虞d而暫停");
}, false);
audio.addEventListener('canplaythrough', function () {
console.log("可以播放，歌曲全部加載完畢");
}, false);
audio.addEventListener('seeking', function () {
console.log("當(dāng)用戶開始移動/跳躍到音頻/視頻中的新位置時");
}, false);
audio.addEventListener('seeked', function () {
console.log("當(dāng)用戶已移動/跳躍到音頻/視頻中的新位置時");
}, false);
audio.addEventListener('timeupdate', function () {
console.log("播放時間改變");
}, false);
audio.addEventListener('ended', function () {
console.log("播放結(jié)束");
}, false);
audio.addEventListener('ratechange', function () {
console.log("播放速率改變");
}, false);
audio.addEventListener('durationchange', function () {
console.log("資源長度改變");
}, false);
audio.addEventListener('volumechange', function () {
console.log("音量改變");
}, false);
</script>
</body>
</html>
?文章來源地址http://www.zghlxwxcb.cn/news/detail-609501.html文章來源：http://www.zghlxwxcb.cn/news/detail-609501.html
?
到了這里，關(guān)于html5 video/audio 監(jiān)聽事件屬性及方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
