自己写的一套网页音乐播放器 支持歌词滚动 (移动端)
音乐播放器
开发时间:2015-12-26 16:50:59
闲来没事 做了一款 网页音乐播放器 主要针对于移动端功能:支持 歌词跟歌曲同步 上一首 下一首 快进 拖拽快进在微信端 和手机移动端 手机app端运行良好 (只做来玩 不够
参考手册
开始
文档
下载
/*music.js*/
function audioPlayer(json){
        var title=document.querySelector('#music-title');
        title.children[1].textContent=json.data[json.index].title;
        /*audio*/
        var audio=document.querySelector('audio');
        if(!audio){
                var audio = document.createElement("AUDIO");
                document.body.appendChild(audio);
        }
        setAttr(audio,{'src':json.data[json.index].src,'autoplay':'autoplay'});
        /*播放进度比例*/
        var proportion=0;
        /*播放暂停按钮*/
        var audioPlay=document.querySelector('#audio-play');
        /*上一首按钮*/
        var audioPre=document.querySelector('#audio-pre');
        /*下一首按钮*/
        var audioNext=document.querySelector('#audio-next');
        /*进度条BOX*/
        var xian=document.querySelector('#xian');
        /*可拖拽的进度条*/
        var xianBar=document.querySelector('#xian-bar');
        /*已经播放量*/
        var xianJin=document.querySelector('#xian-jin');
        /*进度条*/
        var xianBot=document.querySelector('#xian-bot');
        /*音频总长*/
        var totalTime=0;
        /*拖拽条的总长度*/
        var totalWidth=xian.offsetWidth;
        /*进度条左侧距离*/
        var offsetLeft=xian.offsetLeft;
        /*当前正在播放的时间*/
        var oNowTime=document.querySelector('#now-time');
        /*音频总时长*/
        var oTotalTime=document.querySelector('#total-time');
        /*歌词显示区域*/
        var contentText=document.querySelector('#content-text');
        var content=document.querySelector('#content');
        /*歌词对象*/
        var lrcObj=[];
        /*判断歌词是否改变*/
        var lrcTextChange=null;
        /*加载歌词*/
        AJAX({
                type:"get",
                url:json.data[json.index].lrc,
                success:function(data){
                        if(!data){
                            contentText.innerHTML='<p>抱歉,暂无歌词!</p>';
                            return false;   
                        }
                        lrcObj=handleLrcText(data);
                        var html='';
                        for(var i=0,len=lrcObj.length;i<len;i++){
                                if(i==0){
                                        html+='<p class="active">'+lrcObj[i].text+'</p>'
                                }else{
                                        html+='<p>'+lrcObj[i].text+'</p>'
                                }
                        }
                        contentText.innerHTML=html;
                }
        });
        /*等待音频文件加载*/
        audio.addEventListener("canplay", function(){
           totalTime=Math.floor(audio.duration);
           oTotalTime.textContent=formatSeconds(totalTime);
           /*监听播放时间的变化*/
                audio.addEventListener("timeupdate",changeTime,false);
        });
        /*点击播放或者暂停*/
        audioPlay.children[0].onclick=function(){
                isplay();
                isPausedStyle();
        };
        /*进度条点击播放进度*/
        xian.onmousedown=xian.ontouchstart=function(ev){
                var touchs = ev.changedTouches?ev.changedTouches[0]:ev;
                audio.pause();
                isPausedStyle();
                /*移动改变进度*/
                document.onmousemove=document.ontouchmove=function(ev){
                        var touchs = ev.changedTouches?ev.changedTouches[0]:ev;
                        var x=touchs.pageX-offsetLeft;
                        /*进度条或者拖拽按钮的位置*/
                        spaceJindu(x);
                }
                /*进度条点击抬起*/
                document.onmouseup=document.ontouchend=function(ev){
                        var touchs = ev.changedTouches?ev.changedTouches[0]:ev;
                        var x=touchs.pageX-offsetLeft;
                        /*进度条或者拖拽按钮的位置*/
                        spaceJindu(x);
                        /*播放进度比例*/
                        proportion=x/totalWidth;
                        audio.currentTime=proportion*totalTime;
                        /*切换为播放状态*/
                        if(audio.paused){audio.play();}
                        isPausedStyle();
                        document.onmouseup=null;
                        document.onmousemove=null;
                        document.ontouchend=null;
                        document.ontouchmove=null;
                };
        };
        
        /*播放时间改变时执行*/
        function changeTime(){
                /*改变进度条的位置*/
                spaceJindu(parseInt(audio.currentTime/totalTime*totalWidth));
                /*改变时间*/
                oNowTime.textContent=formatSeconds(audio.currentTime);
                /*音频播放完时执行*/
                if(audio.ended){
                        var index=json.index;
                        if(index>=audioLength-1){
                    window.location.replace('player.html?id=0');
                }else{
                    index++;
                    window.location.replace('player.html?id='+index);
                }
                }
                /*音频播放显示相应的歌词*/
                for(var i=0,len=lrcObj.length-1;i<len;i++){
                    if(audio.currentTime>=lrcObj[i].time && audio.currentTime<=lrcObj[i+1].time){
                        if(lrcTextChange!=i){
                            content.scrollTop=0;
                            contentText.style.marginTop=(-i*30-15)+'px';
                            for(var j=0,jLen=lrcObj.length;j<jLen;j++){
                                contentText.children[j].className='';
                                contentText.children[i].className='active';
                            }
                            lrcTextChange=i;
                        }               
                    }       
                }
        };
        /*根据当前值判断播放位置*/
        function spaceJindu(num){
                if(num>=-xianBar.offsetWidth/2 && num<=(totalWidth-xianBar.offsetWidth/2)){
                        xianJin.style.width=num+'px';
                        xianBar.style.left=num+'px';
                }       
        }
        /*判断音频是否播放*/
        function isplay(){
                if(audio.paused){
                        audio.play();
                }else{
                        audio.pause();
                }
        }
        /*检测是否播放状态*/
        function isPausedStyle(){
                if(audio.paused){
                        setAttr(audioPlay.children[0],{"class":"ion-ios-play"});
                }else{
                        setAttr(audioPlay.children[0],{"class":"ion-ios-pause"});
                }
        }
        //秒数换算成时间函数
        function formatSeconds(value) {
            var second = parseInt(value);// 秒
            var minute = 0;// 分
            var hour = 0;// 小时
            if(second > 60) {
                    minute = parseInt(second/60);
                    second = parseInt(second%60);
                if(minute > 60) {
                    hour = parseInt(minute/60);
                    minute = parseInt(minute%60);
                }
            }
            var result = getZero(minute)+':'+getZero(parseInt(second));
            if(minute > 0) {
                result =getZero(parseInt(minute))+":"+getZero(parseInt(second));
            }
            if(hour > 0) {
                result =getZero(parseInt(hour))+':'+getZero(parseInt(minute))+":"+getZero(parseInt(second));
            }
            return result;
        }
        /*判断时间前面是否加0*/
        function getZero(num){
                if(num<10){
                        return '0'+num;
                }else{
                        return num;
                }
        }
        /*设置attr属性*/
        function setAttr(parent,json){
                for(attr in json){
                        parent.setAttribute(attr,json[attr]);
                }
        }
        /*AJAX函数*/
        function AJAX(json){
                var xhr=new XMLHttpRequest();
                xhr.open(json.type,json.url,true);
                xhr.onreadystatechange=function(){
                        if(xhr.readyState==4){
                                if(xhr.status==200){
                                        json.success(xhr.responseText);
                                }else{
                                        json.success("");
                                }
                        }
                }
                xhr.send(null);
        }
        /*正则处理歌词文件*/
        function handleLrcText(lrc) {
            var lyrics = lrc.split("\n");
            var lrcObj = [];
            for(var i=0;i<lyrics.length;i++){
                var lyric = decodeURIComponent(lyrics[i]);
                var timeReg = /\[\d*:\d*((\.|\:)\d*)*\]/g;
                var timeRegExpArr = lyric.match(timeReg);
                if(!timeRegExpArr)continue;
                var clause = lyric.replace(timeReg,'');
                for(var k = 0,h = timeRegExpArr.length;k < h;k++) {
                    var t = timeRegExpArr[k];
                    var min = Number(String(t.match(/\[\d*/i)).slice(1)),
                        sec = Number(String(t.match(/\:\d*/i)).slice(1));
                    var time = min * 60 + sec;
                    lrcObj.push({time:time,text:clause});
                }
            }
            /*防止最后一行歌词不报错*/
            lrcObj.push({time:100000,text:''});
            return lrcObj;
        }
};


闲来没事 做了一款 网页音乐播放器 主要针对于移动端
k9Z 武汉seo web前端工程师 -微创意

功能:k9Z 武汉seo web前端工程师 -微创意

支持 歌词跟歌曲同步k9Z 武汉seo web前端工程师 -微创意

   上一首k9Z 武汉seo web前端工程师 -微创意

   下一首k9Z 武汉seo web前端工程师 -微创意

   快进 拖拽快进k9Z 武汉seo web前端工程师 -微创意

在微信端 和手机移动端 手机app端运行良好 k9Z 武汉seo web前端工程师 -微创意

(只做来玩 不够完善 不做它用)k9Z 武汉seo web前端工程师 -微创意


k9Z 武汉seo web前端工程师 -微创意

 k9Z 武汉seo web前端工程师 -微创意


k9Z 武汉seo web前端工程师 -微创意

网页音乐播放器 
k9Z 武汉seo web前端工程师 -微创意


k9Z 武汉seo web前端工程师 -微创意

链接:http://wangwei1314.duapp.com/music/k9Z 武汉seo web前端工程师 -微创意


k9Z 武汉seo web前端工程师 -微创意


k9Z 武汉seo web前端工程师 -微创意


k9Z 武汉seo web前端工程师 -微创意


k9Z 武汉seo web前端工程师 -微创意

音乐播放器版本:1.01
源码 demo演示