我正在构建用于网络体验的音频播放器,其中包含曲目列表。这是控制音频播放器的代码。
$( 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);
}
});
});
有没有一种方法可以在名为tracks的变量中对列表重新排序?随机生成1到5的列表?例如,名为track2 track3 track4的项目。可能会先播放?我正在寻找随机刷新页面的方法。
谢谢您的帮助!
最佳答案
您可以在tracks变量中添加一个playOrder字段,并让一个函数在加载时进行遍历,并为其分配一个随机的未使用playOrder号。