jQuery(document).ready(function() {
// inner variables var song; var tracker = $('.tracker'); var volume = $('.volume'); function initAudio(elem) { var url = elem.attr('audiourl'); var title = elem.text(); var cover = elem.attr('cover'); var artist = elem.attr('artist'); $('.player .title').text(title); $('.player .artist').text(artist); $('.player .cover').css('background-image','url('+cover+')');; song = new Audio(url); // timeupdate event listener song.addEventListener('timeupdate',function (){ var curtime = parseInt(song.currentTime, 10); tracker.slider('value', curtime); }); $('.playlist li').removeClass('active'); elem.addClass('active'); } function playAudio() { song.play(); tracker.slider("option", "max", song.duration); $('.play').addClass('hidden'); $('.pause').addClass('visible'); } function stopAudio() { song.pause(); $('.play').removeClass('hidden'); $('.pause').removeClass('visible'); } // play click $('.play').click(function (e) { e.preventDefault(); playAudio(); }); // pause click $('.pause').click(function (e) { e.preventDefault(); stopAudio(); }); // forward click $('.fwd').click(function (e) { e.preventDefault(); stopAudio(); var next = $('.playlist li.active').next(); if (next.length == 0) { next = $('.playlist li:first-child'); } initAudio(next); playAudio(); }); // rewind click $('.rew').click(function (e) { e.preventDefault(); stopAudio(); var prev = $('.playlist li.active').prev(); if (prev.length == 0) { prev = $('.playlist li:last-child'); } initAudio(prev); playAudio(); }); // show playlist $('.pl').click(function (e) { e.preventDefault(); $('.playlist').fadeIn(300); }); // playlist elements - click $('.playlist li').click(function () { stopAudio(); initAudio($(this)); playAudio(); }); // initialization - first element in playlist initAudio($('.playlist li:first-child')); // set volume song.volume = 0.8; // initialize the volume slider volume.slider({ range: 'min', min: 1, max: 100, value: 80, start: function(event,ui) {}, slide: function(event, ui) { song.volume = ui.value / 100; }, stop: function(event,ui) {}, }); // empty tracker slider tracker.slider({ range: 'min', min: 0, max: 10, start: function(event,ui) {}, slide: function(event, ui) { song.currentTime = ui.value; }, stop: function(event,ui) {} }); playAudio();
});
html代码,是ul下面包30个li li是歌曲
然后我怎么在在最后最后一首歌放完以后 从1循环?
因为我获取不到最后一首歌的时间。。。。
首先,我没看代码。针对我发现的问题说一下。
为什么说获取不到最后一首歌的时间呢?如果最后一首没放完的时候点下一首怎么处理。第一首是怎么到第二首的,最后一首为什么不能到第一首?
监听audio实例的ended事件,发生ended时,检测单曲循环标志位是否置1:是则调用play()
方法重新播放;否则先判断下是顺序播放还是随机播放:顺序播放的话判断下+1后是否大于总曲目数:如果大于则判断列表循环位是否置1:是则重新加载播放第一首;否则停住。如果不大于总曲目数的话就按照当前曲目的排位+1找到下一曲。如果是随机播放,嘿嘿嘿……那就随机呗。