马黑黑 发表于 2022-2-6 14:16

再试数组音乐切换

<style>
.xuange { width: 260px; padding: 12px; background: olive; color: #fff; font-size: 10px; border-radius: 8px; }
.xuange span { display: block; padding: 4px; border-radius: 2px; cursor:pointer; }
</style>

<p><audio id="mPlay" controls="controls" loop="loop"></audio></p>
<div id="music_bar" class="xuange">请选歌：<br /><br /></div>

<script language="javascript">

var ar_m = [
        ["http://www.kumeiwp.com/sub/filestores/2022/02/06/717fb983dc22f7c6b5ec87a01f9ca0ff.mp3","May It Be"],
        ["http://www.kumeiwp.com/sub/filestores/2022/02/06/e1f8126310fc4e0014a7f5227a86f2fe.mp3","莎莉花园"],
        ["http://www.kumeiwp.com/sub/filestores/2022/02/03/e8f571d9f2ee61d70934c89452950be1.mp3","好运聚一糖"],
        ["http://www.kumeiwp.com/sub/filestores/2021/03/11/9ae80e78b6e5e313ddc3582952746d04.mp3","探清水河"]
];

var myaud = document.getElementById('mPlay');
var str = "";
for(i=0; i<ar_m.length; i++) {
        str += "<span onclick=\"myaud.src='" + ar_m + "'; myaud.play();\">" + (i+1) + ". " + ar_m + "</span>";
}
document.getElementById('music_bar').innerHTML += str;

</script>

马黑黑 发表于 2022-2-6 14:17

回复框正常木有？

红影 发表于 2022-2-6 14:24

马黑黑 发表于 2022-2-6 14:17
回复框正常木有？

正常了{:4_199:}

小辣椒 发表于 2022-2-6 15:28

黑黑这个纯css的专辑播放器出来了{:4_199:}

小辣椒 发表于 2022-2-6 15:28

可以制作专辑的播放器，黑黑你太厉害了{:4_187:}

加林森 发表于 2022-2-6 17:47

好制作，多看看有好处。{:4_190:}

马黑黑 发表于 2022-2-6 20:35

加林森 发表于 2022-2-6 17:47
好制作，多看看有好处。

{:4_180:}
页: [1]
查看完整版本: 再试数组音乐切换