HTML5 <audio> 隨機音頻

Question

我從無處回來。 我在學校需要建立網站的地方。 我班上的每個人都使用那些簡單的拖放式構建器。 我當然會用Notepad ++做到這一點。

因此，看起來只有1990年的頁面不足以包含一些有趣的音樂。 我發現大約有3到4個Mario Bros在線音樂可供使用。 但是，它僅啟動第一個源鏈接，而不啟動其他源鏈接。 我想知道該怎么做， Google並沒有真正的幫助。

這是我的代碼：

<audio autoplay="autoplay" controls="controls" title="Radio implented by Rootel"> 

所以我的問題是，如何自動播放此列表？ 抱歉，我沒有提供完整的音樂清單。

Answer 1

在這里，您可以使用javascript！

 //javascript var _player = document.getElementById("player"), _playlist = document.getElementById("playlist"), _stop = document.getElementById("stop"); // functions function playlistItemClick(clickedElement) { var selected = _playlist.querySelector(".selected"); if (selected) { selected.classList.remove("selected"); } clickedElement.classList.add("selected"); _player.src = clickedElement.getAttribute("data-ogg"); _player.play(); } function playNext() { var selected = _playlist.querySelector("li.selected"); if (selected && selected.nextSibling) { playlistItemClick(selected.nextSibling); } } // event listeners _stop.addEventListener("click", function () { _player.pause(); }); _player.addEventListener("ended", playNext); _playlist.addEventListener("click", function (e) { if (e.target && e.target.nodeName === "LI") { playlistItemClick(e.target); } }); 

 .selected { font-weight: bold; font-size:20px; } 

 <!--html--> <audio id="player"></audio> <ul id="playlist"><li data-ogg="http://www.lunerouge.org/sons/sf/LRWeird%201%20by%20Lionel%20Allorge.ogg">Space 1</li><li data-ogg="http://www.lunerouge.org/sons/sf/LRWeird%202%20by%20Lionel%20Allorge.ogg">Space 2</li><li data-ogg="http://www.lunerouge.org/sons/sf/LRWeird%203%20by%20Lionel%20Allorge.ogg">Space Lab</li></ul> <button id="stop">Stop</button> 

希望能幫助到你！！！