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

Posted 2023-02-25

【中文标题】如何在 HTML 中播放多首随机歌曲

【英文标题】：How to play multiple random songs in HTML

【发布时间】：2018-04-04 00:52:51

【问题描述】：

所以我想在我的页面中心有一个按钮来启动随机选择的歌曲的播放列表。单击按钮后，它应该会消失，并且会在屏幕底部弹出一个横跨整个屏幕宽度的音频控制窗口。我有五个我正在玩的 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>

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

【参考方案1】：

这样的事情怎么样： html：

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

javascript：

const audiosources = ["blue.mp3", "cigar.mp3", "immigrant.mp3", "monkey.mp3", "money.mp3"];
const player = document.getElementById("player");
function playAudio() 
    let audioSource = audioSources[Math.floor(Math.random() * audioSources.length)];
    player.src = audioSource;
;
player.addEventListener('ended', playAudio);
playAudio(); // start audio playing immediately

告诉我这是否有效。

【讨论】：

你知道它为什么不工作吗？也许您应该将我的audioSources 更改为具有绝对路径而不仅仅是相对路径。

@RobertMoore let audioSource = audioSources[Math.floor(Math.random() * audioSources.length); 缺失 ]

@TfarcrawIIV 尝试再次复制粘贴它，它缺少一个结束括号。

@TfarcrawIIV embed.plnkr.co/KkyrQaaWedN6m8lNvWXl 在演示中查看 cmets。

@TfarcrawIIV 当您用自己的文件替换时，您是否将base 的值替换为您自己的路径？然后只使用playlist 数组中的文件名？所有文件都在一个目录中吗？你能给我至少 2 个文件的网址吗？