HTML5 use the audio tag to create a music player example

This is the highlight of our day and the root of everything, using the HTML5 audio tag to create the player, we need to know some basic usage of audio tags before using this.

You can do this:

<audio controls>
<source src= "Horse.ogg" type= "Audio/ogg" >
<source src= "Horse.mp3" type= "Audio/mpeg" >
Your browser does not support the audio element.
</audio>
You can also do this:

<audio src= "Xxx.mp3" controls></audio>
We can see from the above example that HTML5 's audio tag is very simple to use. And the audio tag has many properties that can be used, such as loop,preload. In the later development, we mainly use the HTML5 event properties.

Start building

First, let's construct a play button.

<audio id= "audio" src= "Xxx.mp3" ></audio>
<div id= "Play" ></div>
We then use the play and pause properties of the audio tag to implement pause and playback (this article is based on jquery).

var audio = document.getElementById (' audio '); Important
$ (function () {
$ ("#play"). On (' click ', function () {
if (audio.paused) {
Audio.play ();
} else {
Audio.pause ();
}
})
}
This allows us to achieve a simple playback pause function, I do not add style.

Then we'll add a playback schedule.

Create a Div

<div id= "Progress" ><span id= "current" >00</span><span id= "duration" >00</span></ Div>
Then write JS to change the content

var progress = function () {
var currenttime = Audio.currenttime; Gets the playback time (in seconds), how to convert to minutes I don't have to say, myself Baidu, or go to my demo address to pull.
$ ("#current"). HTML (currenttime);
}
var time = function () {
var song = Audio.duration; Get song Time
$ ("#duration"). html (song);
}
Add listening
Audio.addeventlistener ("Loadedmetadata", time);
Audio.addeventlistener ("Timeupdate", progress);
Then change the volume of the progress of what the value of their own directly assigned to the corresponding can be.

For example:

var volume = function (value) {
Audio.volume = value; The volume property sets or returns the volume of the audio, from 0.0 (mute) to 1.0 (maximum sound).
}
Progress similar, you can Baidu, I will not write.

Audio Label Event Properties

Lyrics Sync

Create lyrics container

<div id= "LRC" ></div>
JS Code

function Getlyric (URL) {
Create a XMLHttpRequest Request
var request = new XMLHttpRequest ();
Configuration, URL for the lyrics address, such as: './CONTENT/SONGS/FOO.LRC '
Request.open (' Get ', url, true);
Because the lyrics we need are in plain text form, so set the return type to text
Request.responsetype = ' text ';
Once the request is successful, you get the lyrics you want.
Request.onload = function () {
Get the lyrics file here
var lyric = Request.response;
};
Send a request to the server
Request.send ();
}
function Parselyric (text) {
Separate text into one line, in an array
var lines = text.split (' \ n '),
A regular expression used to match the time, with a matching result similar to [xx:xx.xx]
Pattern =/\[\d{2}:\d{2}.\d{2}\]/g,
An array of saved final results
result = [];
Get rid of rows that don't contain time
while (!pattern.test (Lines[0])) {
lines = Lines.slice (1);
};
When you build an array with ' \ n ', the last one in the result is an empty element, and this will remove
Lines[lines.length-1].length = = 0 && lines.pop ();
Lines.foreach (function (v/* Array element value//, I/* element index//////* array itself/*) {
Extract time [xx:xx.xx]
var time = V.match (pattern),
Extract lyrics
Value = V.replace (pattern, ');
Because there may be multiple times in a row, time may be in the form of [xx:xx.xx][xx:xx.xx][xx:xx.xx], which requires further separation
Time.foreach (function (v1, i1, A1) {
Remove the brackets in time to get xx:xx.xx
var t = v1.slice (1,-1). Split (': ');
Pressing the result into the final array
Result.push ([parseint (T[0], m) + parsefloat (t[1]), value]);
});
});
Finally, the elements in the result array are sorted by time, so that the lyrics are displayed correctly after saving
Result.sort (function (A, b) {
return a[0]-b[0];
});
return result;
}
elements that show lyrics
var LRC = $ ("#lrc");
Monitor Ontimeupdate Events
Audio.addeventlistener ("Timeupdate", function () {
Iterate through all the lyrics and see which words coincide with the time of course
for (var i = 0, L = lyric.length i < l; i++) {
if (audio.currenttime/* Current playback time */> Lyric[i][0]) {
Lrc.html (Lyric[i][3]);
};
};
};