javascript - 根据随机 ul 改变音乐

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">但在随机化之后从未更改它，直到单击链接为止。

因此它总是播放第一个。添加上面的代码会将源更改为第一个链接 after 随机化。