HTML5 <audio> 随机音频

Posted 2023-02-25

【中文标题】HTML5 <audio> 随机音频

【英文标题】：HTML5 <audio> Random Audio

【发布时间】：2016-09-05 20:47:57

【问题描述】：

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

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

这是我的代码：

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

所以我的问题是，如何自动播放此列表？ 抱歉，我没有提供完整的音乐列表。

【问题讨论】：

查看此链接：***.com/questions/13402336/…

仅供参考 这对于 html5 音频属性是不可能的。您需要在 javascript 中实现此功能（查找 onended 事件）。

***.com/questions/35174154/…

【参考方案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>

希望对你有帮助！！！

【讨论】：

嘿，谢谢。这在某种程度上有所帮助。我有一个问题。我在哪里放置javascript代码？我在 中有我的 CSS 和页面详细信息。那也是我放置javascript的地方吗？谢谢！

我试着在头脑中做，它没有用。它只是将整个 javascript 视为文本。我需要为此下载某种奇怪的插件吗？

尝试在文档末尾的

好吧，我终于有时间去做了。这行不通。我把它放在我的脚本中的任何地方（为它制作了一个特殊的空html），不起作用..

在button 标签之后添加您的Script 标签。我在平面html 文件中尝试过。效果很好。