HTML5列表播放器是一種用于播放音頻或視頻的工具,它通過HTML5技術實現了在網頁上流暢播放媒體文件的功能。下面是一段HTML5列表播放器的示例代碼:
<audio id="myAudio" controls="controls"> <source src="/media/audio.mp3" type="audio/mpeg" /> <source src="/media/audio.ogg" type="audio/ogg" /> <p>您的瀏覽器不支持HTML5音頻標簽。</p> </audio> <script> var audioList = [ { name: '歌曲1', path: '/media/audio1.mp3' }, { name: '歌曲2', path: '/media/audio2.mp3' }, { name: '歌曲3', path: '/media/audio3.mp3' } ]; var player = document.getElementById('myAudio'); var currentTrack = 0; function loadTrack(index) { player.src = audioList[index].path; player.load(); player.play(); document.getElementById('trackName').innerHTML = audioList[index].name; } loadTrack(currentTrack); // 給下一首按鈕綁定點擊事件 document.getElementById('nextBtn').addEventListener('click', function() { currentTrack++; if (currentTrack >= audioList.length) { currentTrack = 0; } loadTrack(currentTrack); }); // 給上一首按鈕綁定點擊事件 document.getElementById('prevBtn').addEventListener('click', function() { currentTrack--; if (currentTrack < 0) { currentTrack = audioList.length - 1; } loadTrack(currentTrack); }); </script>以上代碼實現了一個基本的音頻播放器,它將音頻文件的路徑存儲在一個數組中,并通過loadTrack函數加載和播放歌曲。播放器還為用戶提供了下一首和上一首按鈕,用戶可以通過點擊這些按鈕來切換音樂。