Question

所以我想在页面中央放一个按钮来启动随机选择歌曲的播放列表。单击按钮后，它将消失，并且屏幕底部会弹出跨越屏幕整个宽度的音频控制窗口。我有五个我正在玩的mp3文件。我目前有一个开始，暂停和恢复按钮，但它们是独立的丑陋按钮。这是我的一些代码：

<audio id="blue">
    <source src="blue.mp3" type="audio/mpeg">
</audio>

<audio id="cigar">
    <source src="cigar.mp3" type="audio/mpeg">
</audio>

<audio id="immigrant">
    <source src="immigrant.mp3" type="audio/mpeg">
</audio>

<audio id="monkey">
    <source src="monkey.mp3" type="audio/mpeg">
</audio>

<audio id="money">
    <source src="money.mp3" type="audio/mpeg">
</audio>

<script>
    var a1 = document.getElementById("blue"); 
    var a2 = document.getElementById("cigar"); 
    var a3 = document.getElementById("immigrant"); 
    var a4 = document.getElementById("monkey"); 
    var a5 = document.getElementById("money"); 
    var x;

    function playAudio() { 
        var num = Math.floor(Math.random() * 5) + 1;
        if(num == 1){
            x = a1;
            x.play();
        }else if(num == 2){
            x = a2;
            x.play();
        }else if(num == 3){
            x = a3;
            x.play();
        }else if(num == 4){
            x = a4;
            x.play();
        }else if(num == 5){
            x = a5;
            x.play();
        }
} 

function pauseAudio() { 
    x.pause(); 
} 


function resumeAudio() {
    x.play();
}


</script>

我完全迷失了如何将所有这些融入到这样的事情中：

<audio controls>
    <source src="fileName.mp3" type="audio/mpeg">
</audio>

其中一个主要问题是我不知道如何排队一首歌（随机），并在前一首歌结束后播放。我做了一些谷歌搜索，但我要么不能理解我所看到的，要么它不是我所需要的。

Answer 1

这样的事情怎么样：

HTML：

foo = SlidingPuzzle()

JavaScript的：

<audio id="player" controls></audio>

告诉我这是否有效。

如何在HTML中播放多首随机歌曲

1 个答案: