JS Implementation Music Player

JS Implementation Music Player

Objective

Recently in Review JS, think music player is a very interesting thing, today to use our most native JS write a small music player ~

Main functions:

1, support cycle, random play

2, while playing to support the rotation of the picture

3, support click the progress bar to adjust the playback position, and adjust the volume

4. Show the playback time of music

5, support cut song: Previous, Next, click on the song name Cut song; pause play etc ~

There are two ways to add music:

① can use a audo tag, so the address of the music should be stored in an array;

② the second way is to have a few songs to add a few Audo tags, and then get all the background music (in the example we first add three music, put in an array, of course, you can choose any song you like).

        <audio id= "Play1" >            <source src= "auto/travel. mp3" ></source>        </audio>        <audio id= "Play2" >            <source src= "auto/Silming, Zhu He-non-Emirates MP3" ></source>        </audio>        <audio id= " Play3 ">            <source src=" auto/Aska-Over the hills. mp3 "></source>        </audio>

        Play1=document.getelementbyid ("Play1");        Play2=document.getelementbyid ("Play2");        Play3=document.getelementbyid ("Play3");        PLAY=[PLAY1,PLAY2,PLAY3];

1 Click Play, Pause

First of all we should be clear that when the click button playback should be implemented by:

① music starts to play;

② progress bar starts to go forward with the song's play;

③ the picture starts to rotate with the song play;

④ playback time starts to be timed;

Then, when you click the Play button again, we can make it pause:

① song pause;

② the progress bar to pause at the same time;

③ the playback time to pause simultaneously;

④ picture stop rotation;

Note: Start the pause operation above must be synchronized!

After figuring out our ideas, we can come to one by one to realize the ~

Click play/Pause

                Click Play, Pause                function Start () {                    minute=0;                    if (flag) {                        imagepause ();                        Play[index].pause ();                    } else{                        rotate ();                        Play[index].play ();                        Reducejindutiao ();                        Addtime ();                        Jindutiao ();                        for (Var i=0;i<play.length;i++) {                            audioall[i].style.color= ' white ';                        }                        Audioall[index].style.color= "Red";                    }                }

Because the play and pause are on the same button, the above method is called, so let's take a look at what functions each function implements:

Picture Rotation

                The picture rotates, rotates 5 degrees per 30 mm                function rotate () {                    var deg=0;                    flag=1;                    Timer=setinterval (function () {                        image.style.transform= "rotate (" +deg+ "deg)";                        deg+=5;                        if (deg>360) {                            deg=0;                        }                    },30);                }

The above is the function of the picture rotation, when the music played when the call rotate () function, you can achieve the rotation of the picture!

Also clears the timer function, when the music pauses the call Imagepause (), the picture rotation timer is cleared off:

function Imagepause () {                    clearinterval (timer);                    flag=0;                }

So the image rotation function we have realized ~

progress bar

First define two width length size of the same color two Div, take advantage of the CurrentTime property to past the current playing time, set a div to start with a length of zero, and then adjust the length of the div by the currently played event to achieve the effect of the scroll bar.

                function Jindutiao () {                    //Get the song of the current song Long                    var lenth=play[index].duration;                    Timer1=setinterval (function () {                        cur=play[index].currenttime;//gets the current playback time                        fillbar.style.width= "" + Parsefloat (cur/lenth) *300+ "px";                    },50)                }

So, the progress bar is complete ~

Play Time

Music playback time is also the use of currenttime to change at any time, but should pay attention to currenttime of the chronograph unit for seconds.

                Play Time                function Addtime () {                    timer2=setinterval (function () {                        cur=parseint (play[index].currenttime);// Number of seconds                        var temp=cur;                        Minute=parseint (TEMP/60);                        if (cur%60<10) {                            time.innerhtml= "" "+minute+": 0 "+cur%60+" ";                        } else{                            time.innerhtml= "" +minute+ ":" +cur%60+ "";                        }                    },1000);                }

2 cut songs

I did two ways to achieve the cut song:

① Click on the previous song, the next song button to achieve the cut song;

                Previous                function reduce () {                    qingkong ();                    Reducejindutiao ();                    Pauseall ();                    index--;                    if (index==-1) {                        index=play.length-1;                    }                    Start ();                }                Next                function Add () {                    qingkong ();                    Reducejindutiao ();                    Pauseall ();                    index++;                    if (index>play.length-1) {                        index=0;                    }                    Start ();                }

② Click on the song name, to achieve the song switch;

                Click the word cut                function change (e) {                    var musicname=e.target;                    First empty all for                    (Var i=0;i<audioall.length;i++) {                        audioall[i].style.color= ' white ';                        if (audioall[i]==musicname) {                            musicname.style.color= "red";                            Qingkong ();                            Reducejindutiao ();                            Pauseall ();                            index=i;                            Start ();}}                }

Note: Don't forget our progress bar when cutting songs!

The timer to scroll the progress bar is cleared, and then the length of the div is restored to 0;

                Place the progress bar 0                function Reducejindutiao () {                    clearinterval (timer1);                    Fillbar.style.width= "0";                }

At the same time the music stops:

                Music Stop                function Pauseall () {for                    (var i=0;i<play.length;i++) {                        if (Play[i]) {                            play[i].pause ();                        }                    }                }

Clear All Timers:

                function Qingkong () {//Empty all Timers                    imagepause ();                    Clearinterval (Timer2);                }                

3 Click on the progress bar to adjust the playback progress and volume

First, you should clear the logic: When you click on the progress bar, the width of the scroll bar should be as long as the mouse offsetx, and then adjust the length of the progress bar to listen to the time of the display.

(1) Add an event to the ScrollBar Div, and when the scrollbar length changes, the current playback time of the song is adjusted, and 300 is the total length of the scroll bar;

                Adjust Playback progress                function adjust (e) {                    var bar=e.target;                    var x=e.offsetx;                    var lenth=play[index].duration;                    fillbar.style.width=x+ "px";                    Play[index].currenttime= "" +parseint (x*lenth/300) + "";                    Play[index].play ();                }

(2) Change the volume of the scroll bar, similar to changing the playback time, the use of the volume property (the value is zero to one);

                Adjust the volume size                function Changevolume (e) {                    var x=e.offsetx+20;                    Play[index].volume=parsefloat (x/200) * *;                    Change the position of the button                    volume3.style.left= "" +x+ "px";                }

4 random, cyclic playback

When playing the music, the direct index++ when the index range exceeds the length of the song, Index=0 begins again. Random play function is similar, when the song is finished, randomly produce a number of 0 to Play.length can be.

                Random Play song                function Suiji (e) {                    var img=e.target;                    Img2.style.border= "";                    Img.style.border= "1px solid red";                }                Sequential play                function Shunxu (e) {                    var img=e.target;                    Img1.style.border= "";                    Img.style.border= "1px solid red";                    Clearinterval (suijiplay);                    Shunxuplay=setinterval (function () {                        if (play[index].ended) {                            add ();                        }                    },1000);                }    

So our entire music player is finished, we can write a good-looking interface, it is more perfect ~

JS Implementation Music Player