音乐播放器的实现+显示当前时间的歌词（只显示当前时间的文本）

纯代码干货

第一步：效果截图

2.简单排版和主要的Dom结构

第三步：控制区域代码

<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- 基本控制 -->
<script type="text/javascript">
    // 播放器代码
        var $audio=$('#audio');   //audio的jq元素
        var audio= $audio.get(0);  //audio的Dom元素，audio的方法操作的是dom元素，而不是jq元素
        var btn_zt=$('#zt');  //暂替
        var btn_bf=$('#bf');  //播放
        var btn_prev=$('#prev');  //上一曲
        var btn_next=$('#next');  //下一曲
        var btn_xh=$('#xh');  //顺序播放
        var btn_all=$('#xh_all');  //循环播放
        var btn_random=$('#xh_random');  //随机播放
        var btn_one=$('#xh_one');  //单曲播放
        var btn_one2=$('#xh_one2');  //单曲循环
        var btn_vol1=$('#add_vol');  //增大音量
        var btn_vol2=$('#reduce_vol');  //减小音量
        var btn_jy=$('#jy');  //减小音量
        var cur_time=$('#cur_time input');  //当前时长
        var all_time=$('#all_time input');  //总时长

        var curid='';  //当前播放的歌曲id
        var xhtype=1; //播放循序，默认为循环播放，0为顺序播放，1位循环播放，2为随机播放，3为单曲播放，4为单曲循环
        var liststr='';

        var audio_arr={            //歌曲列表
            0:{
                src:'media/The Dawn.mp3',
                id:0,
                name:'The Dawn'
            },
            1:{
                src:'media/deguo.mp3',
                id:1,
                name:'deguo'
            },
            2:{
                src:'media/yryjz.mp3',
                id:2,
                name:'yryjz'
            },
        };
        var num=0;
        var firstvalue='';  //第一个歌曲的src
        var firstid='';   //第一个歌曲的id
        for(var i in audio_arr){
            // num==0?firstvalue=audio_arr[i].src:'';
            if(num==0){
                firstvalue=audio_arr[i].src;
                curid=firstid=audio_arr[i].id;
            }
            liststr+=audio_arr[i].name+';   '
            ++num;
            
        };
        console.log(liststr);
        audio_arr.length=num;
        // console.log(audio_arr.length);
        // console.log(firstvalue);

        // init初始化
        srcChange(firstvalue,firstid);

        // $(function(){
        //     var time=setInterval(time_fnc,200);
        //     function time_fnc(){
        //      if($('#aa').get(0).readyState>0){video_time('#aa','#aaa'); }
        //      clearInterval(time);
        //     }
        // })


        function timefn(){
            var time=setInterval(time_fnc,200);
            function time_fnc(){
                if(audio.readyState>0){all_time.val(Math.floor(audio.duration)); }
                clearInterval(time);
                var time2=setInterval(function(){
                    cur_time.val(Math.floor(audio.currentTime));
                },1000);
            }
        }
        timefn();

        // 暂停事件
        btn_zt.on('click',function(){
            audio.pause();
        });
        // 播放事件
        btn_bf.on('click',function(){
            audio.play();
        });
        // 静音事件
        btn_jy.on('click',function(){
            audio.muted=!audio.muted;
        });
        // 增大音量事件
        btn_vol1.on('click',function(){
            // alert(audio.volume);
            if(audio.volume<0.8){
                audio.volume+=0.2;
            }else{
                audio.volume=1;
            }
        });
        // 增大音量事件
        btn_vol2.on('click',function(){
            if(audio.volume>0.2){
                audio.volume-=0.2;
            }else{
                audio.volume=0;
            }
        });
        // 下一曲事件
        btn_next.on('click',function(){
            if(curid<audio_arr.length-1){
                curid++;
            }else{
                curid=0;
            }
            srcChange(audio_arr[curid].src,curid);
        })
        // 上一曲事件
        btn_prev.on('click',function(){
            if(curid>0){
                curid--;
            }else{
                curid=audio_arr.length-1;
            }
            srcChange(audio_arr[curid].src,curid);
        })

        //更改播放循序，默认为循环播放，0为顺序播放，1位循环播放，2为随机播放，3为单曲播放，4为单曲循环
        // 顺序播放
        btn_xh.on('click',function(){
            xhtype=0;
            console.log(xhtype);
        });
        // 循环播放
        btn_all.on('click',function(){
            xhtype=1;
            console.log(xhtype);
        });
        // 随机播放
        btn_random.on('click',function(){
            xhtype=2;
            console.log(xhtype);
        });
        // 单曲播放
        btn_one.on('click',function(){
            xhtype=3;
            console.log(xhtype);
        });
        // 单曲循环
        btn_one2.on('click',function(){
            xhtype=4;
            console.log(xhtype);
        });

        
        
        // 切换音频路径
        function srcChange(src,listid){
            // audio.src=src;
            $audio.attr({
                'src':src,
                'data-list':listid
            });
            curid=listid;
            audio.load();
            audio.play();
            timefn();
            console.log('Cur_audio is: '+src);
        }

        //随机数事件 min ≤ r ≤ max
        function RandomNumBoth(Min,Max){
              var Range = Max - Min;
              var Rand = Math.random();
              var num = Min + Math.round(Rand * Range); //四舍五入
              return num;
        }
        var randomnum=0;

        // end事件
        function Endfn(){
            console.log('end');
            //判断播放循序，默认为循环播放，0为顺序播放，1为循环播放，2为随机播放，3为单曲播放，4为单曲循环
            if(xhtype!==3){
                if(xhtype==0){
                    if(curid<audio_arr.length-1){
                        curid++;
                    }else{
                        console.log('type='+xhtype);
                        return false;
                    }
                }else{
                    if(xhtype==1){
                        if(curid<audio_arr.length-1){
                            curid++;
                        }else{
                            curid=0;
                        }
                    }else{
                        if(xhtype==2){
                            randomnum=RandomNumBoth(0,audio_arr.length-1);
                            while(curid==randomnum){
                                randomnum=RandomNumBoth(0,audio_arr.length-1);
                            }
                            curid=randomnum;
                            console.log(curid);
                        }else{
                            if(xhtype==4){
                                curid=curid;
                            }
                        }
                    }
                }
                
                srcChange(audio_arr[curid].src,curid);
            }else{
                console.log('type='+xhtype);
                return false;
            }    
        }
</script>

第四步：歌词控制

1. lrc.js里面存储LRC歌词的格式的数组，获取里面的时间轴，转为秒数。

2. 通过audio.currentTime属性，setinterval每秒获取歌曲播放的秒数。

3. 将两个时间比大小，如果“歌曲播放时间”>“歌词时间”，就输出这句歌词。

<!-- 加载歌词js -->
    <script type="text/javascript" src="media/lrc.js"></script>

<!-- 歌词显示 -->
<!-- 不同的歌曲；建议动态加载歌词js -->
<script type="text/javascript">
    var textbox=$('.textbox');
    var audio = document.getElementById("audio");

    var getTime = function(){
        // 不需要这个函数了，直接输出audio.currentTime这个时间进行比大小就可以
        // 获取03:14:33这种格式的当前播放时间
        var timeNow = audio.currentTime
        // console.log(timeNow);
        // 获取分钟数
        var timeMin = String(Math.floor(timeNow/60));
        // 如果分钟数是1位，前面加个0
        timeMin = timeMin.length<2 ? "0"+timeMin : timeMin;
        // console.log(timeMin);
        var timeSec = String(Math.floor(timeNow%60));
        timeSec = timeSec.length<2 ? "0"+timeSec : timeSec;
        // console.log(timeSec);
        var timeMil = String(timeNow);
        timeMil = timeMil.substr(timeMil.indexOf('.')+1,2);//取小数点后面的两位
        // console.log(timeMil);
        var timeLrc = timeMin + ":" + timeSec + "." + timeMil;

        return timeLrc;
    };

     var getLrcTime = function(i){
        // 获取歌词里的每句的时间
        var lrcTime = loveStory[i].substr(1,8);//"01:15.80"
        // 分钟转数字可以去掉前面的0
        lrcTimeMin = parseInt(lrcTime.split(":")[0]);//1
        // 虽然末尾有0，不过要转成数字比大小
        lrcTimeSec = parseFloat(lrcTime.split(":")[1]);//15.8
        lrcTime = lrcTimeMin*60+lrcTimeSec;
        // console.log(lrcTimeMin);
        // console.log(lrcTimeSec);
        // console.log(lrcTime);
        return lrcTime;
    };

    setInterval(function(){
        // 获取lrc.js文件中的歌词，每秒刷新一下，获取播放时间，然后跟歌词里的时间比对，如果播放时间大于歌词时间，就显示歌词。
        var timeNow = audio.currentTime

        for(var i = 0; i < loveStory.length; i++){
            var lrcTime = getLrcTime(i);
            // console.log(lrcTime);
            var lrcWord = loveStory[i].substr(10,loveStory[i].length);
            if(timeNow > lrcTime){
                console.log(lrcTime);
                console.log(lrcWord);
                loveStory.splice(i,1);//删除显示过的文本，
                textbox.html(lrcWord);//歌词显示到文本框内
            }else{
                
            }
        }
        // if (!audio.paused) {
        //     console.log(playTime.substr(0,5));
        //     // console.log(playTime);
        // }
    },1000);
</script>

歌词js的内容：

var loveStory = [
    "[00:15.80]We were both young when I first saw you",

    "[00:19.74]I closed my eyes and the flashback starts",

    "[00:23.26]I'm standing there",

    "[00:26.95]On a balcony in summer air",

    "[00:32.14]See the lights see the party the ball gowns",

    "[00:35.87]I see you make your way through the crowd",

    "[00:39.29]And say hello",

    "[00:43.38]Little did I know",

    "[00:48.07]That you were Romeo you were throwing pebbles",

    "[00:51.72]And my daddy said stay away from Juliet",

    "[00:55.38]And I was crying on the staircase",

    "[00:58.28]Begging you please don't go",

    "[01:02.74]And I said",

    "[01:04.25]Romeo take me somewhere we can be alone",

    "[01:08.38]I'll be waiting all there's left to do is run"
];