HTML5 graphic tutorial for creating a cool Audio Player Plug-in,

HTML5 graphic tutorial for creating a cool Audio Player Plug-in,
This tutorial mainly aims to demonstrate the use of HTML 5's new tags and the Dom API of audio elements. It provides a detailed explanation and the sample code. If you need it, refer to it.

This is the UI of the audio player, which also hides the playing list of a song. The UI of the entire player, in addition to the portrait image of the big background and the star rating of the song, uses the image. All others are drawn by CSS and font-face, it seems that it is difficult to create only CD and dashboard. When playing a song, both CD and dashboard have an animation interaction effect. This will be explained in the following sections. Click the player CD to open the playlist ~

This phase of the tutorial mainly aims to demonstrate the use of the <audio> tag and the Dom API of the audio element added by html5. therefore, the rendering of the player UI will not be explained in detail here, if you have any questions, you can view the comments of the Case CSS file or leave a message below.

Main functions:

I. Playback, pause, last, next, volume increase/decrease

2. Click CD to open and close the playlist.

3. You can drag a local music file to the player for playback.

Html Structure


The Code is as follows:
<Div id = "myAudio" style = "margin: 0 auto;">
<Audio>
<Source title = "Wang ruolin-Wild worldbrain" src = "<a href =" http://music.huoxing.com/upload/20121215/1355575227640_8200.mp3 "> http://music.huoxing.com/upload/20121215/1355575227640_8200.mp3 </a>"/>
<Source title = "Wei Lian-there will also be" src = "<a href =" http://stream18.qqmusic.qq.com/31005070.mp3 "> http://stream18.qqmusic.qq.com/31005070.mp3 </a>"/>
<Source title = "Wang ruolin-Lost in paradise.mp3" src = "<a href =" http://stream12.qqmusic.qq.com/30416842.mp3 "> http://stream12.qqmusic.qq.com/30416842.mp3 </a>"/>
</Audio>
<Div class = "music_info clearfix">
<Div class = "cd_holder"> <span class = "stick"> </span> <div class = "cd"> </div>
<Div class = "meta_data">
<Span class = "title"> </span>
<Div class = "rating">
<Div class = "starbar">
<Ul class = "current-rating" data-score = "85">
<Li class = "star5"> </li>
<Li class = "star4"> </li>
<Li class = "star3"> </li>
<Li class = "star2"> </li>
<Li class = "star1"> </li>
</Ul>
</Div>
</Div>
<Div class = "volume_control">
<A class = "decrease"> a </a>
<Span class = "base_bar">
<Span class = "progress_bar"> </span>
<A class = "slider"> </a>
</Span>
<A class = "increase"> B </a>
</Div>
</Div>
</Div>
<Ul class = "music_list"> </ul>
<Div class = "controls">
<Div class = "play_controls">
<A class = "btn_previous"> e </a>
<A class = "btn_play"> c </a>
<A class = "btn_next"> d </a>
</Div>
<Div class = "time_line">
<Span class = "passed_time"> 0: 00 </span>
<Span class = "base_bar">
<Span class = "progress_bar"> </span>
</Span>
<Span class = "total_time"> 0: 00 </span>
</Div>
</Div>
</Div>

Audio tag

In the above structure, we can find that the newly added audio tag of html5 has a controls attribute. As the name suggests, it is the controller of the player. The controls attribute specifies that the browser provides a playback control for the audio, for example, if this attribute is set in the audio tag in chrome, the player will appear in the following format. If this attribute is not set, it will be blank.

The Code is as follows: <audio controls src = "xxx.mp3"> </audio>

However, due to the different effects of rendering the audio tag in different browsers, this simple method is not suitable for cross-browser use, in addition, the default player control of the browser provides too few functions .. Therefore, we usually hide the default playback control of the browser by not setting this attribute, and manually add additional labels and styles to customize the player UI.

Playback Control

After the player UI is drawn, we need to add corresponding event listening for the three main control buttons: playback, last and next.

The Code is as follows:
Var myAudio = $ ("# myAudio audio") [0];
Var $ sourceList = $ ("# myAudio source ");
Var currentSrcIndex = 0;
Var currentSr = "";

The Code is as follows:
$ (". Btn_play"). click (function (){
If (myAudio. paused ){
MyAudio. play ();
} Else {
MyAudio. pause ();
}
});
$ (". Btn_next"). click (function (){
++ CurrentSrcIndex> $ sourceList. length-1 & (currentSrcIndex = 0 );
CurrentSrc = $ ("# myAudio source"). eq (currentSrcIndex). prop ("src ");
MyAudio. src = currentSrc;
MyAudio. play ();
});
$ (". Btn_previous"). click (function (){
-- CurrentSrcIndex <0 & (currentSrcIndex = 0 );
CurrentSrc = $ ("# myAudio source"). eq (currentSrcIndex). prop ("src ");
MyAudio. src = currentSrc;
MyAudio. play ();
});

In the event listener of the preceding button, we call the play () and pause () Methods of the original audio element to control the playing and pause of the audio. In addition, the audio element provides the currentSrc attribute, which indicates the file source of the current playback file. We set this attribute to control the song tracks currently played.

Volume Control

Next, we will add event listening to the two speakers on both sides of the volume bar, so that by clicking the two speakers on the left and right, we can reduce and increase the current playback volume. To set the volume of the player, we can call the volume attribute provided in the audio element. The maximum volume value is 1 and the minimum volume value is 0. Here, we increase or decrease the volume by 0.1 each time we click the horn. You can also use other values. However, it should be noted that the javascript language cannot provide precise control over decimal places. Therefore, each time the volume is reduced by 0.1, the actually reduced volume is slightly larger than 0.1, this results in the 0.09xxxx volume remaining when you click the reduce button for nine consecutive times. Then, you will find that the player cannot be muted... Of course, this problem can be easily solved (as shown below), just as a reminder.

The Code is as follows:
$ (". Volume_control. decrease"). click (function (){
Var volume = myAudio. volume-0.1;
Volume <0 & (volume = 0 );
MyAudio. changeVolumeTo (volume );
});
$ (". Volume_control. increase"). click (function (){
Var volume = myAudio. volume + 0.1;
Volume> 1 & (volume = 1 );
MyAudio. changeVolumeTo (volume );
});

In addition, we also need to use the slider or click a certain position of the volume bar to adjust the volume. With the above foundation, this is easy to complete. First, let's take a look at the function of adjusting the volume by clicking a certain position in the volume bar: click a certain position in the volume bar and calculate the length value from the starting point of the volume bar to this position, divide the value by the total length of the volume bar (100 here) to get the percentage value, multiply the percentage value by the maximum volume value 1 to get the volume value to be jumped to, and then assign the value to volume. The method of adjusting the volume by using a slider is similar to that of calculating the position of the slider in the volume bar. I will not explain it in detail here. If you have any questions, please leave 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> 1 & (volume = 1 );
Volume <0 & (volume = 0 );
MyAudio. changeVolumeTo (volume );
});
$ (". Volume_control. slider"). mousedown (starDrag = function (ev ){
Ev. preventDefault ();
Var origLeft = $ (this). position (). left;/* Initial position of the slider */
Var origX = ev. clientX;/* Initial mouse 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 the mouse movement */
Var curLeft = origLeft + moveX;/* the distance between the mouse and the slider */
(CurLeft <-7) & (curLeft =-7 );
(CurLeft> 93) & (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

Now the player is basically usable, but we want to skip part of the audio directly to a specific time point. How can this problem be achieved ??! The standards-making committee members are not fools. Such common functions will not be omitted ~ So please refer to the API. You will find that the audio element provides a property named currentTime, which is very concise and easy to understand (in fact, most of the attributes are well understood ), set this attribute to set the current playback time point.

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

1. Click a position in the progress bar to calculate the percentage of the length from the start point of the progress bar to the total length of the progress bar (for example, click the center of the progress bar, the length from the start point to the position of the progress bar accounts for 50% of the total length of the progress bar.

2. Multiply percentage by the total duration of the file duration to get the value of the time point you want to jump to, and then assign the value to currentTime to complete the function to be implemented.

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. The remaining UI interaction implementation is irrelevant (in fact, it is the most important for me). If you are interested, go to the source code to view it. If you have any questions, please leave a comment below, hope you can exchange and learn more.