一個頁面多個audio播放時控制之播放一個
阿新 • • 發佈：2021-06-25
audio 是H5的新標籤
常用的屬性有
- src 資源
- autoplay 自動播放
- controls 顯示預設控制元件
- loop 迴圈播放
- muted 靜音
- preload 規定當網頁載入時，音訊是否預設被載入以及如何被載入。
- auto
metadata
none
controls控制元件中每個小控制元件的顯示
可以設定顯示控制元件
controlslist="nodownload nofullscreen noremoteplayback"
下面是完整程式碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> .record-audio { display: block; } </style> <body> <audio class="record-audio" controls controlslist="nodownload nofullscreen noremoteplayback"> <source src="./audio.mp3" type="audio/mpeg" /> </audio> <audio class="record-audio" controls controlslist="nodownload nofullscreen noremoteplayback"> <source src="./audio.mp3" type="audio/mpeg" /> </audio> <audio class="record-audio" controls controlslist="nodownload nofullscreen noremoteplayback"> <source src="./audio.mp3" type="audio/mpeg" /> </audio> <audio class="record-audio" controls controlslist="nodownload nofullscreen noremoteplayback"> <source src="./audio.mp3" type="audio/mpeg" /> </audio> <audio class="record-audio" controls controlslist="nodownload nofullscreen noremoteplayback"> <source src="./audio.mp3" type="audio/mpeg" /> </audio> <audio class="record-audio" controls controlslist="nodownload nofullscreen noremoteplayback"> <source src="./audio.mp3" type="audio/mpeg" /> </audio> <script type="text/javascript"> // 多個音訊時播放一個 const audios = document.getElementsByTagName("audio"); // 暫停函式 function pauseAll() { var self = this; [].forEach.call(audios, function(i) { // 將audios中其他的audio全部暫停 i !== self && i.pause() }) } // 給play事件繫結暫停函式 ; [].forEach.call(audios, function(i) { i.addEventListener('play', pauseAll.bind(i)) }) </script> </body> </html>