本地有多個音樂文件，想用 html 逐個播放，或循環播放，并設置初始音量。
audio
在 html 中播放音樂文件用 audio 標簽：
controls啟用控制按鈕，如進度條、播放、音量、速度等。不加不顯示任何 widget。autoplay理應啟用自動播放，但瀏覽器似乎禁止自動播放，故目前沒什么用。muted靜音。
<!DOCTYPE html>
<html>
<body><audio controls autoplay><source src="C:/Users/tom/Music/Wonderful U - 張含韻.mp3" type="audio/mpeg">Failed.
</audio><br/><audio controls muted><source src="C:/Users/tom/Music/Sacred Play Secret Place - Matryoshka.m4a" type="audio/x-m4a">Failed.
</audio></body>
</html>
Set Volume Automatically
想在打開 html 文件時，自動設置某個音量，如 20%，而不是默認的最大聲、或 muted 靜音。用到 javascript：
class標記需要調音量的 audio；- 在
script內用 javascript 選中這些 audio，并設置其音量。
<!DOCTYPE html>
<body>
<!-- 用 `a` 標記需要自動校音量的 audio -->
<audio class="a" controls><source src="C:/Users/tom/Music/Wonderful U - 張含韻.mp3" type="audio/mpeg">Failed.
</audio>
<br/>
<audio class="a" controls><source src="C:/Users/tom/Music/Sacred Play Secret Place - Matryoshka.m4a" type="audio/x-m4a">Failed.
</audio><script>// 添加事件：加載時自動執行document.addEventListener("DOMContentLoaded", function() {var audioPlayers = document.querySelectorAll('.a'); // 根據 `a` 選 audio 元素audioPlayers.forEach(function(player) {player.volume = 0.2; // set initial volume});});
</script>
</body>
</html>
Play a List
有多個音樂文件，想順序或循環播放它們，同樣用 javascript 函數控制。
- 瀏覽器可能禁止未有交互就自動播放，故一開頭要手動點播放，但后面可連播。
<!DOCTYPE html>
<body>
<!-- 放一個空 audio 元素 -->
<audio id="auto-audio" controls autoplay></audio><script>const path = 'C:/Users/tom/Music/'; // 音樂文件都在這個目錄下const playlist = ['嗵嗵 - DOUDOU.mp3','我拿什么留住你 - FloruitShow 福祿壽.mp3','琢磨 - 許靖韻.mp3'];let currentTrack = 0; // 目前播放的文件下標const audioPlayer = document.getElementById('auto-audio');// 播放函數function playTrack(index) {audioPlayer.src = path + playlist[index]; // 完整路徑audioPlayer.volume = 0.2; // 校音量audioPlayer.play().catch(error => {console.log("%cAutoplay prevented:", "color: red;", error);});}// 加載時執行document.addEventListener("DOMContentLoaded", function() {// 播放第一首（可能被瀏覽器阻止自動播放而失敗）playTrack(currentTrack);// 添加事件：播放結束后自動放下一首audioPlayer.addEventListener('ended', function () {// 順序播放if (currentTrack < playlist.length) {playTrack(currentTrack);}// 循環播放// currentTrack = (currentTrack + 1) % playlist.length;// playTrack(currentTrack);});});
</script>
</body>
</html>
References
- html用css grid實現自適應四宮格放視頻
