Question

这是我第一次在Stack Overflow上提问。请原谅我有任何错误。

我想知道如何根据随机ul更改播放的第一首歌曲。目前，每次加载页面时列表都是随机的，但第一首歌曲始终是music / 1.mp3。以下是我的HTML和JS代码：

HTML：

    <audio id="audio" preload="auto" tabindex="0" controls="" >

      <source src="music/1.mp3">

    </audio>


    <ul id="playlist">
        <li>
            <a href="music/1.mp3">
                1
            </a>
        </li>
        <li>
            <a href="music/2.mp3">
                2
            </a>
        </li>
        <li>
            <a href="music/3.mp3">
                3
            </a>
        </li>
    </ul>

JS：

    var audio;
    var playlist;
    var tracks;
    var current;
    var ul = document.querySelector('ul');
    for (var i = ul.children.length; i >= 0; i--) {
        ul.appendChild(ul.children[Math.random() * i | 0]);
    }


    init();
    function init(){
        current = 0;
        audio = $('#audio');
        playlist = $('#playlist');
        tracks = playlist.find('li a');
        len = tracks.length;
        audio[0].volume = 1;
        audio[0].play();
        playlist.find('a').click(function(e){
            e.preventDefault();
            link = $(this);
            current = link.parent().index();
            run(link, audio[0]);
        });
        audio[0].addEventListener('ended',function(e){
            current++;
            if(current == len){
                current = 0;
                link = playlist.find('a')[0];
            }else{
                link = playlist.find('a')[current];
            }
            run($(link),audio[0]);
        });
    }

    function run(link, player){
            player.src = link.attr('href');
            par = link.parent();
            par.addClass('active').siblings().removeClass('active');
            audio[0].load();
            audio[0].play();
    }

Answer 1

添加以下行：

$("#audio").find("source").attr("src", $("ul li:first-child a").attr("href"));

在以下行的正下方：

for (var i = ul.children.length; i >= 0; i--) {
    ul.appendChild(ul.children[Math.random() * i | 0]);
}

Here is the JSFiddle demo

问题是你的html加载了<source src="music/1.mp3">的默认源，但在随机化之后从未改变它，直到点击链接。

因此它总是扮演第一个角色。添加上述代码会在随机化之后将源更改为第一个链接。

根据随机ul改变音乐

1 个答案: