javascript - 音乐播放器这里的循环播放怎么写

 lingling2502852417 发布于 2022-11-08 16:04

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循环?

因为我获取不到最后一首歌的时间。。。。

2 个回答
  • 首先,我没看代码。针对我发现的问题说一下。
    为什么说获取不到最后一首歌的时间呢?如果最后一首没放完的时候点下一首怎么处理。第一首是怎么到第二首的,最后一首为什么不能到第一首?

    2022-11-12 01:41 回答
  • 监听audio实例的ended事件,发生ended时,检测单曲循环标志位是否置1:是则调用play()方法重新播放;否则先判断下是顺序播放还是随机播放:顺序播放的话判断下+1后是否大于总曲目数:如果大于则判断列表循环位是否置1:是则重新加载播放第一首;否则停住。如果不大于总曲目数的话就按照当前曲目的排位+1找到下一曲。如果是随机播放,嘿嘿嘿……那就随机呗。

    2022-11-12 01:41 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有