如何使用JavaScript在HTML5网站上选择要播放的随机歌曲(从列表中)?

时间:2015-02-13 18:48:24

标签: javascript html5

我的问题很简单,我只是一个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>

不知道接下来要做什么......你们可以帮忙吗?我真的很感谢向你解释你所做的一切:) (抱歉我的英语不好)

1 个答案:

答案 0 :(得分:0)

这里有很多内容,但这里有关于如何开始的建议:

<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>