在網頁開發中,經常需要設置音樂播放器來增強用戶的體驗。而如果要讓多首音樂輪流播放,可以使用以下的HTML代碼:
<audio id="music" loop> <source src="music1.mp3"> </audio> <script> var musicList = ['music2.mp3', 'music3.mp3', 'music4.mp3']; // 音樂列表 var musicIndex = 0; // 當前播放的音樂在列表中的索引 document.getElementById('music').src = musicList[0]; // 設置初始音樂 // 自動切換下一首音樂 document.getElementById('music').addEventListener('ended', function() { musicIndex = (musicIndex + 1) % musicList.length; // 取余實現循環播放 this.src = musicList[musicIndex]; this.play(); }); </script>
以上代碼中,用到了HTML5的<audio>標簽來實現音樂的播放功能。其中,id為“music”的音樂標簽需要設置loop屬性以實現循環播放。而JavaScript部分則使用了事件監聽器來實現音樂的自動切換。在musicList數組中存儲了需要播放的多首音樂的路徑,并使用變量musicIndex記錄當前正在播放的音樂在數組中的索引。當一首音樂播放結束時,通過添加ended事件監聽器,自動從數組中獲取下一首音樂的路徑,實現輪流播放多首音樂的效果。
上一篇mysql讀已提交解決
下一篇vue $d