如何使用Jquery制作简单的HTML播放列表

我需要一些帮助，使一个非常简单的Jquery播放列表使用音频html标记。到目前为止，我得到了他的：

<audio id="myAudio" preload="auto">
  Your user agent does not support the HTML5 Audio element.
</audio>

您的用户代理不支持HTML5音频元素。

以及jquery部分：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>

$(document).ready(function() {
  bgAudio = document.getElementById("myAudio");
  bgAudio.volume = 0.3;

  bgAudio.controls = true;
  bgAudio.loop = true;
  bgAudio.autoplay = true;

  bgAudio.src = "bg1.mp3";
  bgAudio.src = "bg2.mp3";
  bgAudio.play();

});
</script>

$（文档）.ready（函数（）{
bgaudo=document.getElementById（“myAudio”）；
bgAudio.volume=0.3；
bgAudio.controls=true；
bgAudio.loop=true；
bgAudio.autoplay=true；
bgAudio.src=“bg1.mp3”；
bgAudio.src=“bg2.mp3”；
bgAudio.play（）；
});

---

我怎样才能让那两个mp3一个接一个地播放？感谢您的帮助。

一种方法是使用将

oneded

事件绑定到

bgAudio

并在那里切换源代码

JS:

小提琴：

注意：这是未经测试的，只是为了了解事件

没有元素可以使用

动画

，因此我制作了一个

div#bg

并将其环绕在音频元素上。请记住，如果要使元素以不透明度淡入，请确保该元素以

opacity:0开始

表达式应该是：

$（'div#bg'）.animate（{opacity:1}，1000）

我看了你的问题。。。它不再有

animate（）

播放列表在一个数组中

函数

player（）

被调用

documentready

（因此您不需要移动设备忽略的

autoplay

）

播放器将连续播放每个音频片段，并在完成播放列表后重新开始播放（

loop

仅适用于一个文件，而不适用于一个播放列表。因此，如果

loop=true

，则永远不会进入下一个文件）

片段

MNG-https://vocaroo.com/media_command.php?media=s0Ai9tr7779v&command=download_mp3
正义-https://vocaroo.com/media_command.php?media=s1dKHkbev0dJ&command=download_mp3

35478017
//这是一个简单的字符串数组
var播放列表=[
"https://vocaroo.com/media_command.php?media=s1H9fX5GI9Fa&command=download_mp3",
"https://vocaroo.com/media_command.php?media=s0Ai9tr7779v&command=download_mp3",
"https://vocaroo.com/media_command.php?media=s1dKHkbev0dJ&command=download_mp3"
];
//请记住，元素必须以不透明度0开始
//持续时间应仅为花括号外的数字
$（'div#bg'）。设置动画({
不透明度：1
}, 1000);
$（文档）.ready（函数（）{
var xA=document.getElementById（“xAudio”）；
xA.体积=0.3；
xA.controls=true；
函数播放器（x）{
var i=0；
xA.src=playlist[x]；//x是播放列表数组的索引号
xA.load（）；//更改src时使用load方法
xA.play（）；
xA.onended=function（）{//播放初始文件后，将播放其余文件
/*作为“for”循环，这会更好*/
i++；
如果（i>2）{//…重复
i=0；//^
}                       //         ^
xA.src=播放列表[i]；//清洗^
xA.load（）；//泡沫^
xA.play（）；//和^
}
}
player（0）；//调用playlist数组0索引处的player（）函数
});

我确实对答案做了一点改进，因此首歌将随机开始，其余的按时间顺序排列

<script>

    var playlist = [
        "music/bg1.mp3",
        "music/bg2.mp3",
        "music/bg3.mp3",
        "music/bg4.mp3"
    ];

    var n = playlist.length-1;
    var r = 1 + Math.floor(Math.random() * n);

    $(document).ready(function() {
        var xA = document.getElementById("myAudio");
        xA.volume = 0.3;
        xA.controls = true;

        function player(x) {
            var i = 0;

            xA.src = playlist[r];
            xA.load();
            xA.play();
            xA.onended = function() {
                i++;
                if (i > n) {
                    i = 0;
                }

                xA.src = playlist[i];
                xA.load();
                xA.play();
            }
        }
        player(0);
    });
    </script>

var播放列表=[
“音乐/bg1.mp3”，
“音乐/bg2.mp3”，
“音乐/bg3.mp3”，
“音乐/bg4.mp3”
];
var n=playlist.length-1；
var r=1+Math.floor（Math.random（）*n）；
$（文档）.ready（函数（）{
var xA=document.getElementById（“myAudio”）；
xA.体积=0.3；
xA.controls=true；
函数播放器（x）{
var i=0；
xA.src=播放列表[r]；
xA.load（）；
xA.play（）；
xA.onended=函数（）{
i++；
如果（i>n）{
i=0；
}
xA.src=播放列表[i]；
xA.load（）；
xA.play（）；
}
}
运动员（0）；
});

---

我想让所有的歌曲都以随机播放的方式重复，但我相信我需要做一系列的数字来倒数。还是。这只是可选的

动画用于另一个组件，而不是播放器。当我看到我错误地添加了它时，我把它删除了。在我看来，它实际上增加了一个很好的触感。你的代码非常棒。非常感谢！这是最终结果：很好，随时可以，先生。：-）那很优雅。

<script>

    var playlist = [
        "music/bg1.mp3",
        "music/bg2.mp3",
        "music/bg3.mp3",
        "music/bg4.mp3"
    ];

    var n = playlist.length-1;
    var r = 1 + Math.floor(Math.random() * n);

    $(document).ready(function() {
        var xA = document.getElementById("myAudio");
        xA.volume = 0.3;
        xA.controls = true;

        function player(x) {
            var i = 0;

            xA.src = playlist[r];
            xA.load();
            xA.play();
            xA.onended = function() {
                i++;
                if (i > n) {
                    i = 0;
                }

                xA.src = playlist[i];
                xA.load();
                xA.play();
            }
        }
        player(0);
    });
    </script>