如何使用 JavaScript 在 HTML5 网站上选择随机播放的歌曲（从列表中）？答案

【问题标题】：How to select random song to play (from the list) on a HTML5 site using JavaScript?如何使用 JavaScript 在 HTML5 网站上选择随机播放的歌曲（从列表中）？
【发布时间】：2015-02-13 18:48:24
【问题描述】：

我的问题很简单，我只是 JavaScript 的新手，我需要你的帮助。我想创建一个站点，该站点将从源列表中选择随机歌曲、标题以及专辑。我希望它看起来像这样：

标题：（此处为歌曲 1 的标题）
专辑：（此处为歌曲 1 的专辑）
（这里使用歌曲1来源的mp3播放器）

我的播放器在这里有 HTML 代码：

<audio class="audio-element" controls="true" preload="none">

<!-- Adding audio sources -->

            <source src="mp3file.mp3" type="audio/mpeg" />
<br>
<b>Your outdated browser does not support HTML5. <br>
Get Mozilla Firefox <a href="https://www.mozilla.org/pl/firefox/new/"> >HERE< </a></b>

</audio>

不知道下一步该做什么......你们能帮忙吗？我真的很感激向我解释你所做的一切:) （对不起我的英语不好）

【问题讨论】：

您希望随机选择在浏览器中通过 Javascript 完成，还是在生成页面时在服务器上完成？
接下来，您去查找 Javascript 教程，然后当您对 Javascript 有特定问题时来这里。
好吧，该死的，我没想到会被如此低估 :D 我希望它在浏览器中通过 Javascript 完成 :)
你的歌曲列表是什么形式的？
我没有任何列表，只有歌曲（数量不多，可能有 40 首），所以我可以制作任何需要的列表。我认为可以在 Javascript 中创建列表（滚动一个随机数，然后从变量列表中进行选择，例如 mp3[0]=...\music\song1.mp3, title[0]="song 1" ，专辑 [0]="album of song 1" 等，然后使用 document.write 将它们放在一起，但我的 mp3 播放器似乎在 document.write 中不起作用）:)

标签： javascript html

【解决方案1】：

这有很多内容，但这里有一个关于如何开始的建议：

<b>Title</b>: <span id='songTitle'></span><br>
<b>Album</b>: <span id='songAlbum'></span><br>

<script>
var songs =
[
    { filename: "abc.mp3", title: "ABC", album: "Album1" },
    { filename: "def.mp3", title: "DEF", album: "Album2" },
    // and so on...
];

var randomIndex = Math.floor(Math.random() * songs.length);
var song = songs[randomIndex];
document.querySelector("source").src = song.filename;
document.getElementById("songTitle").textContent = song.title;
document.getElementById("songAlbum").textContent = song.album;
</script>

【讨论】：

这正是我想要的 :) 我在哪里放置 mp3 播放器的代码呢？如果我把它放在下面，它会起作用吗？我的页面上还需要 JQuery 吗？无论如何，谢谢你的时间:)
是的，将代码放在页面底部会起作用（这实际上不是好的编程实践，但您以后有时间学习好的实践）。你不需要 jQuery，尽管学习 jQuery 会在很多方面让你的生活更轻松。
嗯，有些东西似乎不起作用，我在标题和专辑中有空格:(
学习调试的好机会：添加语句console.log(song.title, song.album);紧随 var song = song[randomIndex];在浏览器中打开 Web 控制台，重新加载页面，然后查看打印的内容。