页面刷新时从jquery html5音频播放列表中随机选择曲目

Question

我正在构建一个用于网络体验的音频播放器，它有一个曲目列表。这是控制音频播放器的代码。

$( document ).ready(function() {
jQuery(function($) {
            var supportsAudio = !!document.createElement('audio').canPlayType;
            if(supportsAudio) {
                var index = 0,
                playing = false;
                mediaPath = 'audio/',
                extension = '',
                tracks = [
                    {"track":1,"name":"track1","length":"00:55","file":"track1"},
                    {"track":2,"name":"track2","length":"00:55","file":"track2"},
                    {"track":3,"name":"track3","length":"00:55","file":"track3"},
                    {"track":4,"name":"track4","length":"00:55","file":"track4"},
                    {"track":5,"name":"track5","length":"00:55","file":"track5"}
                ],
                trackCount = tracks.length,
                npAction = $('#npAction'),
                npTitle = $('#npTitle'),
                audio = $('#audio1').bind('play', function() {
                    playing = true;
                    npAction.text('Now Playing:');
                }).bind('pause', function() {
                    playing = false;
                    npAction.text('Paused:');
                }).bind('ended', function() {
                    npAction.text('Paused:');
                    if((index + 1) < trackCount) {
                        index++;
                        loadTrack(index);
                        audio.play();
                    } else {
                        audio.pause();
                        index = 0;
                        loadTrack(index);
                    }
                }).get(0),
                li = $('#plUL li').click(function() {
                    var id = parseInt($(this).index());
                    if(id !== index) {
                        playTrack(id);
                    }
                }),
                loadTrack = function(id) {
                    $('.plSel').removeClass('plSel');
                    $('#plUL li:eq(' + id + ')').addClass('plSel');
                    npTitle.text(tracks[id].name);
                    index = id;
                    audio.src = mediaPath + tracks[id].file + extension;
                },
                playTrack = function(id) {
                    loadTrack(id);
                    audio.play();
                };

                extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : '';
                loadTrack(index);
            }


});
});

有没有一种方法可以重新排序名为 track 的变量内的列表？在随机拉取中生成 1 到 5 的列表？例如，名为 track2 track3 track4 等的项目。有可能先玩吗？我正在寻找在页面刷新时是随机的。

感谢您的帮助！

Answer 1

您可以向轨道变量添加一个 playOrder 字段，并让一个函数在加载时遍历每个字段并为其分配一个随机未使用的 playOrder 编号。