HTML5 <audio> 随机音频

Question

我不知从何而来。 我有一些学校需要做网站的东西。 我班上的每个人都使用那些简单的拖放构建器。 我当然是用 Notepad++ 做的。

所以，一个 1990 年的页面当然还不够有趣的音乐。 我找到了大约 3 到 4 个马里奥兄弟在线音乐可供使用。 但它只启动第一个源链接，而不是其他链接。 我想知道怎么做，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>

希望对你有帮助！！！