本地有多个音乐文件，想用 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>