qq音乐mp3带歌词播放器源码

maolai web前端评论307阅读模式

一款使用jQuery和layUI框架制作的手机端mp3音乐播放器,带实时歌词同步和背景大图切换,支持多首歌曲播放,上一首,下一首,暂停,音量调节,歌词关闭显示等功能。类似qq音乐播放器界面特效。

---在线演示

$(function () {
        songmsg.setMsg(0);
        songmsg.loadRotationChart();
        $("#volume").change(function () {
            if($(this).val() == 0){
                songmsg.songMuted(true);
            }else{
                songmsg.songMuted(false);
            }
            songmsg.setVolume($(this).val());
            volume = $(this).val();
        });
        $("#cover").click(function (){
            if($(this).hasClass('btn_pause')){
                songmsg.songPause();
            }else{
                var data_num = song.getAttribute("data-num");
                if(data_num == 0 && song.currentTime == 0){
                    song.src = song_list[data_num].song_url;
                    song.volume = 0.5;
                }
                songmsg.songPlay();
            }
        });
        $("#play_right").click(function () {
            songmsg.nextSong();
        });
        $("#play_left").click(function () {
            songmsg.prveSong();
        });
        $(".vlue-icon").click(function () {
            var isMuted,ele = $(this).children("i");
            if(ele.hasClass("v_o")){
                isMuted = true;
                $("#volume").val(0);
            }else {
                isMuted = false;
                $("#volume").val(volume);
            }
            songmsg.songMuted(isMuted);
        });
        $("#cmn-toggle-1").click(function () {
            if($(this).is(':checked')){
                open_lrc = true;
                $(".cover_container").fadeIn();
            }else{
                open_lrc = false;
                $(".cover_container").fadeOut();
            }
        });
        $("#progress  ").mousedown(function (e) {
            if(isNaN(song.duration)){
                return;
            }
            var  x = e.clientX-50;
            var total_width = $(this).width();
            var bar = (x/total_width)*100;
            bar = bar.toFixed(2);
            $("#play_on").css({"transform":"translateX("+bar+"%)"});
            time = parseInt(song.duration * bar/100);
            song.currentTime = time;
        });

    });

 
maolai
  • 本文由 maolai 发表于 2024年5月21日 06:28:55
  • 转载请务必保留本文链接:http://www.bokequ.com/551.html

发表评论