HTML5 Create cool audio player plug-in graphics and text tutorial

The image above is the UI diagram of the audio player, which also hides a playlist of songs. The entire player's UI in addition to the big background portrait and the song Star score uses the picture other all by the CSS and the font-face to draw, the only thing that seems to be difficult is the production of CDs and Saucers, which are animated interactively when the song is played. This will be explained in the following section. Click on the Player CD to open the playlist Oh ~

Because this tutorial is mainly to show the use of HTML5 new <audio> tags and the DOM API for audio elements, the player UI is drawn here without a detailed explanation, with questions that can be viewed in the comments of the CSS file of the case or in the comments below.

Main function:

First, play, pause, Previous, next, volume increase or decrease

Second, click on the CD to open and close the playlist

Third, you can drag local music files to the player to play

HTML structure

The
code is as follows:


&lt;div id= "Myaudio" style= "margin:0 auto;" &gt;


&lt;audio&gt;


&lt;source title= "Joanna Wang-Wild world.mp3" src= "&lt;a href=" http://music.huoxing.com/upload/20121215/1355575227640_ 8200.mp3 "&gt; http://music.huoxing.com/upload/20121215/1355575227640_8200.mp3&lt;/a&gt;"/&gt;


&lt;source title= "Verian-or will." MP3 "src=" &lt;a href= "Http://stream18.qqmusic.qq.com/31005070.mp3" &gt;http:// Stream18.qqmusic.qq.com/31005070.mp3&lt;/a&gt; "/&gt;


&lt;source title= "Joanna Wang-Lost in Paradise.mp3" src= "&lt;a href=" Http://stream12.qqmusic.qq.com/30416842.mp3 "&gt; Http://stream12.qqmusic.qq.com/30416842.mp3&lt;/a&gt; "/&gt;


&lt;/audio&gt;


&lt;div class= "Music_info clearfix" &gt;


&lt;div class= "Cd_holder" &gt;&lt;span class= "stick" &gt;&lt;/span&gt;&lt;div class= "CD" &gt;&lt;/div&gt;&lt;/ Div&gt;


&lt;div class= "Meta_data" &gt;


&lt;span class= "title" &gt;&lt;/span&gt;


&lt;div class= "rating" &gt;


&lt;div class= "Starbar" &gt;


&lt;ul class= "current-rating" data-score= "&gt;
"

&lt;li class= "STAR5" &gt;&lt;/li&gt;


&lt;li class= "STAR4" &gt;&lt;/li&gt;


&lt;li class= "Star3" &gt;&lt;/li&gt;


&lt;li class= "Star2" &gt;&lt;/li&gt;


&lt;li class= "star1" &gt;&lt;/li&gt;


&lt;/ul&gt;


&lt;/div&gt;


&lt;/div&gt;


&lt;div class= "Volume_control" &gt;


&lt;a class= "Decrease" &gt;a&lt;/a&gt;


&lt;span class= "Base_bar" &gt;


&lt;span class= "Progress_bar" &gt;&lt;/span&gt;


&lt;a class= "Slider" &gt;&lt;/a&gt;


&lt;/span&gt;


&lt;a class= "Increase" &gt;b&lt;/a&gt;


&lt;/div&gt;


&lt;/div&gt;


&lt;/div&gt;


&lt;ul class= "music_list" &gt;&lt;/ul&gt;


&lt;div class= "Controls" &gt;


&lt;div class= "Play_controls" &gt;


&lt;a class= "btn_previous" &gt;e&lt;/a&gt;


&lt;a class= "Btn_play" &gt;c&lt;/a&gt;


&lt;a class= "Btn_next" &gt;d&lt;/a&gt;


&lt;/div&gt;


&lt;div class= "Time_line" &gt;


&lt;span class= "Passed_time" &gt;0:00&lt;/span&gt;


&lt;span class= "Base_bar" &gt;


&lt;span class= "Progress_bar" &gt;&lt;/span&gt;


&lt;/span&gt;


&lt;span class= "Total_time" &gt;0:00&lt;/span&gt;


&lt;/div&gt;


&lt;/div&gt;


&lt;/div&gt;

Audio label

In the above structure we can find the new audio tag of this HTML5, which has a controls property, as the name implies that it is the controller of the player, controls properties require the browser to provide playback controls for audio, For example, if you set this property in the Audio tab of the Chrome browser, the player will appear as follows, and if you do not set this property, it will be blank

code is as follows: &lt;audio controls src= "Xxx.mp3" &gt;&lt;/audio&gt;

However, because of the different rendering effects on the audio label in various browsers, this simple method is not suitable for use across browsers, and the browser default player control provides too little functionality. So we typically hide the browser's default playback controls by not setting this property, and manually add additional tags and styles to customize the player's UI interface.

Playback control

After the player UI is drawn, the first thing we need to do is to add the corresponding event listener for the playback, the previous one, and the next three major control buttons.

copy code code as follows:


var Myaudio = $ ("#myAudio audio") [0];


var $sourceList = $ ("#myAudio source");


var currentsrcindex = 0;


var currentsr = "";

copy code code as follows:


$ (". Btn_play"). Click (function () {


if (myaudio.paused) {


Myaudio.play ();


} else {


Myaudio.pause ();


}


});


$ (". Btn_next"). Click (function () {


++currentsrcindex &gt; $sourceList. length-1 &amp;&amp; (currentsrcindex = 0);


CURRENTSRC = $ ("#myAudio source"). EQ (currentsrcindex). Prop ("src");


myaudio.src = currentsrc;


Myaudio.play ();


});


$ (". Btn_previous"). Click (function () {


--currentsrcindex &lt; 0 &amp;&amp; (currentsrcindex = 0);


CURRENTSRC = $ ("#myAudio source"). EQ (currentsrcindex). Prop ("src");


myaudio.src = currentsrc;


Myaudio.play ();


});

In the above button-click event Listener, we control audio playback and pauses by invoking the play () and Pause () methods of the original audio element. In addition, the audio element provides a Currentsrc property that represents the file source for the currently playing file, and we set this property to control the current playlist of songs.

Volume control

Next, we'll add event monitoring to the two small speakers on both sides of the volume bar, making it possible to reduce and increase the current playback volume by clicking around two small speakers. To set the volume of the player, we can invoke the volume property provided in the audio element. The maximum value of volume is 1, the smallest is 0, where we can achieve volume control by increasing the volume of 0.1 per click. Of course you can also use other values. Note, however, that the JavaScript language does not provide precise control over decimals, So every time you reduce the volume by 0.1, the volume is actually slightly larger than 0.1, which causes the volume to be 0.09xxxx when you click on the 9 Volume reduction button, and then you'll see how the player can't mute it ... Of course the problem is easy to solve (see below), just a little reminder.

The

code is as follows:


$ (". Volume_control. Decrease"). Click (function () {


var volume = myaudio.volume-0.1;


Volume &lt; 0 &amp;&amp; (volume = 0);


Myaudio.changevolumeto (volume);


});


$ (". Volume_control. Increase"). Click (function () {


var volume = Myaudio.volume + 0.1;


Volume &gt; 1 &amp;&amp; (volume = 1);


Myaudio.changevolumeto (volume);


});

In addition, we also need to implement the use of a slider or click the volume of a position to adjust the volume of the function, with the above foundation, this is easy to complete. First, let's look at the ability to control the volume by clicking a position on the volume bar: Click a position in the volume bar, calculates the length from the start of the volume bar to the position, and then divides the value by dividing the total volume bar length (here is 100) to get the percent value, multiplied by the maximum volume value 1 to get the volume value to jump to , and then assign the value to volume. The way in which the volume is regulated by a slider is also similar to the idea of how to calculate the position of the slider in the volume bar. There is no detailed explanation, there are questions can be a message below.

The

code is as follows:


$ (". Volume_control. Base_bar"). MouseDown (function (EV) {


var posx = Ev.clientx;


var targetleft = $ (this). Offset (). Left;


var volume = (posx-targetleft)/100;


Volume &gt; 1 &amp;&amp; (volume = 1);


Volume &lt; 0 &amp;&amp; (volume = 0);


Myaudio.changevolumeto (volume);


});


$ (". Volume_control. Slider"). MouseDown (Stardrag = function (ev) {


Ev.preventdefault ();


var Origleft = $ (this). Position (). Left; /* The initial position of the slider * *


var origx = Ev.clientx; /* Mouse Initial position * *


var target = this;


var Progress_bar = $ (". Volume_control. Progress_bar") [0];


$ (document). MouseMove (Dodrag = function (ev) {


Ev.preventdefault ();


var moveX = EV.CLIENTX-ORIGX; /* Calculate the distance of mouse movement * *


var curleft = origleft + MoveX; /* Use the mouse to move the distance to indicate the moving distance of the slider * *


(Curleft &lt; -7) &amp;&amp; (curleft =-7);


(Curleft &gt;) &amp;&amp; (curleft = 93);


target.style.left = curleft + "px";


progress_bar.style.width = curleft + 7 + "%";


Myaudio.changevolumeto (curleft + 7)/100);


});


$ (document). MouseUp (Stopdrag = function () {


$ (document). Unbind ("MouseMove", Dodrag);


$ (document). Unbind ("MouseUp", Stopdrag);


});


});

Time Control

OK, now the player is basically available, but we also want to be able to skip a portion of the audio directly to a specific point in time. So how to achieve it??! Standard-setting members are not fools, this commonly used function is not to be overlooked pull ~ so quickly turn over the API bar, you will find that the audio element provides a property named CurrentTime, very concise and understandable name (in fact, most of the attributes are very well understood), Set this property to set the time point for the current playback.

Here, we also need to use another property of audio duration, which refers to the total length of time the current playback file. So according to the volume control implementation, we can do this:

One, click a position of the progress bar, calculates the percentage of the total progress bar length from the start of the progress bar to the length of the position (for example, by clicking in the middle of the progress bar, the length of the progress bar is 50% of the length of the total progress bar), recorded as percentage.

Second, then use percentage times the total length of the file duration get the value of the point you want to jump to, and then assign the value to currenttime that completes the function to implement.

The
code is as follows:


$ (". Time_line. Base_bar"). MouseDown (function (EV) {


var posx = Ev.clientx;


var targetleft = $ (this). Offset (). Left;


var percentage = (posx-targetleft)/140 * 100;


myaudio.currenttime = myaudio.duration * PERCENTAGE/100;


});

Here, the player has been basically formed. Left some insignificant (in fact, for me is the most important Haha) UI Interactive implementation, if you are interested in the source code to view it, there are questions can be commented on the bottom of the comments, I hope that a lot of communication and learning.