純js實現音樂播放的功能


// JavaScript Document
var music=document.getElementById("mymusic");
    var prograss=document.getElementById("prograss");
    var curtxt=document.getElementById("currenttime");
    var duration=document.getElementById("duration");
    var music_pic=document.getElementById("music_pic");
    var deg=0;//旋轉角度
    var disctimer,prograsstimer;//碟片計時器,進度條計時器
    var musicindex=0;//音樂索引
    var musics=new Array("nicengshishaonian.mp3","huanian.mp3","chunfengshili.mp3");//音樂數組
    var music_pics=new Array("000002","000001","000001");
    
    
    //旋轉碟片
    var disc=document.getElementsByClassName('disc');
        
        //音樂時間顯示
        function curtime(txt,misic)
        {
            if(music.currentTime<10)
                {
                    txt.innerHTML="0:0"+Math.floor(music.currentTime);
                }else
            if(music.currentTime<60)
                {
                    txt.innerHTML="0:"+Math.floor(music.currentTime);
                }
            else
                {
                    var minet=parseInt(music.currentTime/60);
                    var sec=music.currentTime-minet*60;
                    if(sec<10)
                        {
                            txt.innerHTML="0"+minet+":"+"0"+parseInt(sec);
                        }
                    else
                        {
                            txt.innerHTML="0"+minet+":"+parseInt(sec);
                        }
                }
        }
        
        //播放暫停
        function playPause()
        {
            var btn=document.getElementById("playbtn");
            if(music.paused)
                {
                    music.play();
                    clearInterval(disctimer);//清除碟片的定時器
                    btn.style.background="url(images/music/pictures/pause.png) no-repeat 10px";//改變播放暫停鍵的圖標
                    disctimer=setInterval(function(){
                    disc[0].style.transform="rotate("+deg+"deg)";
                    deg+=5;
                        
                    //每秒設置進度條長度
                    },100);
                    prograsstimer=setInterval(function(){
                    prograss.style.width=(music.currentTime)*100 / (music.duration)+"%";
                    curtime(curtxt,music);
                    if(music.currentTime>=music.duration-1)//片尾跳轉下一曲
                    {
                        musicindex++;//音樂索引加一
                        if(musicindex>=musics.length)//如果音樂索引超過長度,將音樂索引清零
                        {
                            musicindex=0;
                        }
                        getMusic();
                        music.play();//重載音樂后進行播放
                    }
                    },1000);
                }
            else
                {
                    music.pause();//停止音樂
                    btn.style.background="url(images/music/pictures/play.png) no-repeat 10px";
                    clearInterval(disctimer);//清除碟片滾動的定時器
                    clearInterval(prograsstimer);//清除進度條的定時器
                }
        }
    
    //下一曲
    function nextMusic()
    {
        musicindex++;//音樂索引加一
        if(musicindex>=musics.length)//如果音樂索引超過長度,將音樂索引清零
            {
                musicindex=0;
            }
        getMusic();
        music.play();
    }
    
    //上一曲
    function backMusic()
    {
        musicindex--;
        if(musicindex<0)//如果索引小於0,將索引變為最大值
            {
                musicindex=musics.length-1;
            }
        getMusic();
        music.play();
    }
        
    //讀取音樂
        function getMusic()
        {
            music.src="images/music/"+musics[musicindex];//改變音樂的SRC
            music_pic.src="images/music/pictures/"+music_pics[musicindex]+".jpg";
            if(music.readyState="complete")
                {
                    setTimeout(function(){
                        duration.innerHTML=parseInt(music.duration/60)+":"+parseInt(music.duration%60);
                    },1000);//一秒后讀取音樂的總時長
                    
                }
        }
        
    
        window.onload=function(){
            getMusic();
            
        }
View Code

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM