HTML5 web music player sample code

This article introduces the sample code of HTML5 web music player and shares it with everyone. The details are as follows:

The audio and video tags were introduced in HTML5, which allows us to play audio and video directly without using other plug-ins. Next we will use H5's audio tag and its related attributes and methods to create a simple music player. It mainly includes the following functions:

1. Play pause, previous song and next song

2. Adjust the volume and playback progress bar

3. Switch the current song according to the list

Let’s take a look at the final result first:

The structure of this music player is mainly divided into three parts: song information, player and playlist. Let's focus on the player part. First put three audio tags in the player for playback:

 <audio id=music1>The browser does not support the audio tag<source src=media/Beyond - The Glorious Years.mp3></source></audio><audio id=music2>The browser does not support the audio tag<source src=media /Daniel Powter - Free Loop.mp3></source></audio><audio id=music3>The browser does not support the audio tag<source src=media/Jay Chou, Fei Yuqing-Thousands of Miles Away.mp3></source></audio>

The playlist below also corresponds to three audio tags:

 <div id=playList> <ul> <li id=m0>Beyond-Glory Years</li> <li id=m1>Daniel Powter-Free Loop</li> <li id=m2>Jay Chou, Fei Yuqing-Thousand Miles outside</li> </ul></div>

Next, we will start to gradually implement the functions mentioned above. First, complete the play and pause functions. When pressing the play button, we need to make the progress bar advance with the progress of the song, the play time also gradually increases, and the play button becomes Pause button, the style of the playlist also changes accordingly.

Before doing the function, we must first obtain the IDs of the three audio tags and store them in an array for subsequent use.

 var music1= document.getElementById(music1);var music2= document.getElementById(music2);var music3= document.getElementById(music3);var mList = [music1,music2,music3];

We can now complete the function of the play button. First, set a flag to mark the playback status of the music, and then set a default value for the index of the array:

Then judge the playback status, call the corresponding function, and modify the flag value and the corresponding item style of the list:

 function playMusic(){if(flag&&mList[index].paused){ ​​mList[index].play(); document.getElementById(m+index).style.backgroundColor = #A71307;document.getElementById(m+index).style .color = white;progressBar(); playTimes(); play.style.backgroundImage = url(media/pause.png); flag = false;}else{ mList[index].pause(); flag = true; play.style.backgroundImage = url(media/play.png);}}

The above code calls multiple functions, among which play and pause are the methods that come with the audio tag, while other functions are defined by ourselves. Let's take a look at how these functions are implemented and what functions they correspond to.

The first is the progress bar function, which obtains the entire duration of the song, and then calculates the position of the progress bar based on the current playback progress multiplied by the total length of the progress bar.

 function progressBar(){var lenth=mList[index].duration;timer1=setInterval(function(){ cur=mList[index].currentTime;//Get the current playback time progress.style.width=+parseFloat(cur/ lenth)*300+px; progressBtn.style.left= 60+parseFloat(cur/lenth)*300+px;},10)}

The following is the function of changing the playback time. Here we set up a timing function and execute it every once in a while to change the playback time. Because the song duration we obtained is calculated in seconds, we need to use the if statement to convert the duration judgment and change the playback time to display in minutes and seconds.

 function playTimes(){timer2=setInterval(function(){ cur=parseInt(mList[index].currentTime);//Seconds var minute=parseInt(cur/60); if (minute<10) { if(cur% 60<10){ playTime.innerHTML=0+minute+:0+cur%60+; }else{ playTime.innerHTML=0+minute+:+cur%60+; } } else{ if(cur%60<10){ playTime.innerText= minute+:0+cur%60+; }else{ playTime.innerText= minute+:+ cur%60+; } } },1000);}

Next, let’s complete the functions of adjusting playback progress and adjusting volume through the progress bar.

The function of adjusting the playback progress is implemented by using the event object. Because the offsetX attribute is only available in IE events, it is recommended to use IE browser to view the effect. First add an event listener to the progress bar. When the mouse is clicked on the progress bar, the mouse position is obtained, and the current playback progress is calculated based on the position divided by the total length of the progress bar, and then the song is set.

 //Adjust playback progress total.addEventListener(click,function(event){var e = event || window.event;document.onmousedown = function(event){ var e = event || window.event; var mousePos1 = e. offsetX; var maxValue1 = total.scrollWidth; mList[index].currentTime = (mousePos1/300)*mList[index].duration; progress.style.width = mousePos1+px; progressBtn.style.left = 60+ mousePos1 +px;}})

The following is the volume adjustment function. We use dragging to adjust the volume. The idea is to add event monitoring to the button ball of the volume bar, and then calculate the position of the button ball relative to the overall volume bar based on the dragged position. Finally, according to the calculation The result is multiplied by the volume to get the current volume:

 volBtn.addEventListener(mousedown,function(event){var e = event || window.event;var that =this;//Prevent the ball’s default drag event e.preventDefault();document.onmousemove = function(event){ var e = event || window.event;var mousePos2 = e.offsetY;var maxValue2 = vol.scrollHeight;if(mousePos2<0){ mousePos2 = 0;}if(mousePos2>maxValue2){ mousePos2=maxValue2;}mList[index].volume = (1-mousePos2/maxValue2);console.log(mList[index ].volume);volBtn.style.top = (mousePos2)+px;volBar.style.height = 60-(mousePos2)+px;document.onmouseup = function(event){ document.onmousemove = null; document.onmouseup = null;}}})

Finally, we will implement the more complex song switching function.

Let’s first look at using the previous and next buttons to switch. There are several issues we should pay attention to when switching music: first, we need to stop the currently playing music and switch to the next music; second , the progress bar and playback time must be cleared, and recalculated; thirdly, the song information must change accordingly, and the playlist style under the player must also change. After figuring out the above three points, we can start to implement the function.

 //Previous song function prevM(){clearInterval(timer1);clearInterval(timer2);stopM();qingkong();cleanProgress();--index;if(index==-1){ index=mList.length -1;}clearListBgc();document.getElementById(m+index).style.backgroundColor = #A71307;document.getElementById(m+index).style.color = white;changeInfo(index);mList[index].play();progressBar();playTimes();if (mList[index].paused) { play.style.backgroundImage = url(media/play.png);}else{ play.style.backgroundImage = url(media/pause.png);}} //Next song function nextM(){clearInterval(timer1);clearInterval(timer2);stopM();qingkong();cleanProgress();++index;if(index ==mList.length){ index=0;}clearListBgc();document.getElementById(m+index).style.backgroundColor = #A71307;document.getElementById(m+index).style.color = white;changeInfo(index);mList[index].play();progressBar();playTimes();if (mList[index].paused) { play.style.backgroundImage = url(media/play.png);}else{ play.style.backgroundImage = url(media/pause.png);}}

The code below switches songs by clicking on the list.

 m0.onclick = function (){clearInterval(timer1);clearInterval(timer2);qingkong();flag = false;stopM();index = 0;pauseall();play.style.backgroundImage = url(media/pause. png);clearListBgc();document.getElementById(m0).style.backgroundColor = #A71307;document.getElementById(m+index).style.color = white;mList[index].play();cleanProgress();progressBar();changeInfo(index);playTimes();}m1.onclick = function (){clearInterval(timer1);clearInterval(timer2);flag = false;qingkong();stopM();index = 1;pauseall();clearListBgc();play.style.backgroundImage = url(media/pause.png);document.getElementById(m1).style.backgroundColor = #A71307;document.getElementById(m+index).style. color= white;mList[index].play();cleanProgress();changeInfo(index);progressBar();playTimes();}m2.onclick = function (){clearInterval(timer1);clearInterval(timer2);flag = false ;qingkong();stopM();index = 2;pauseall();play.style.backgroundImage = url(media/pause.png);clearListBgc();document.getElementById(m2).style.backgroundColor = #A71307;document.getElementById(m+index).style.color = white;mList[index].play() ;cleanProgress();changeInfo(index);progressBar();playTimes();}

The idea of ​​switching songs through a playlist is similar to that of switching through a button. It just sets which song should be played currently according to the corresponding list item.

Several methods are called in the function of switching songs above. Let's take a look at the uses of these methods.

The first is to switch song information:

 function changeInfo(index){if (index==0) { musicName.innerHTML = Glory Days; singer.innerHTML = Beyond;}if (index==1) { musicName.innerHTML = Free Loop; singer.innerHTML = Daniel Powter; }if (index==2) { musicName.innerHTML = Thousands of Miles Away; singer.innerHTML = Jay Chou, Fei Yuqing;}}

Then clear both timers:

 //Set the progress bar to 0 function cleanProgress(timer1){if(timer1!=undefined){ clearInterval(timer1);}progress.style.width=0;progressBtn.style.left=60px;} function qingkong(timer2){ if (timer2!=undefined){ clearInterval(timer2);}}

Stop the music playing and resume the playing time.

 function stopM(){if(mList[index].played){ mList[index].pause(); mList[index].currentTime=0; flag=false;}}

Finally, change the style of the playlist below:

 function clearListBgc(){document.getElementById(m0).style.backgroundColor = #E5E5E5;document.getElementById(m1).style.backgroundColor = #E5E5E5;document.getElementById(m2).style.backgroundColor = #E5E5E5;document.getElementById (m0).style.color = black;document.getElementById(m1).style.color = black;document.getElementById(m2).style.color = black;}

At this point, we have basically completed the music player. Let’s take a look at the effect of the animation:

Author: Jerry Education

Source: http://www.cnblogs.com/jerehedu/

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.