Detailed introduction to HTML elements-Audio & Video (2)-creation of a song player

Today, we will give you an example of making a music player based on HTML5 and Javascript. The function is very simple. It mainly helps you understand some tips on HTML5 and Javascript programming.

The general implementation idea is:

1. Put an XML file on the server, which contains song information, such as song name, Song url, and song classification.

2. javascript reads the xml file and parses the content.

3. Create a musicList class, which defines some attributes and methods. Attributes include: the currently played song, the last song, And the next song. For example, you can control the playback, play the next song, and play the last song.

4. There is also a music class that stores song information.

5. Then, some functions provided by javascript are used to play the audio.

The interface is quite simple. Just a few divs and buttons.

The following describes the detailed production steps:

1. Define a music class to store the information of a single song.

// Define the music class
Function music (txt, url, catalog ){
This.txt = txt;
This. url = url;
This. catalog = catalog;
}

2. With the music class, we began to focus on compiling the musicList class, which implemented the following attributes:

// All songs
This. allMusic = getAllMusic (xdoc );
// Current song
This. currentMusic = this. allMusic [0];
// Current Song Index
This. currentIndex = this. currentMusic. key;
// Audio Element
This. audioElement = audioSource;
// Define the last song
If (this. currentIndex-1> = 0 ){
This. previusmusic = allMusic [this. currentIndex-1];
}
Else {
This. previusmusic = null;
}
// Define the next song
If (this. currentIndex + 1 <this. allMusic. length ){
This. nextMusic = this. allMusic [this. currentIndex + 1];
}
Else {
This. nextMusic = null;
}

The getAllMusic (xdoc) function is used to obtain an array containing all the song classes.

// Obtain all music lists
Function getAllMusic (xdoc ){
This. _ allMusic = new Array ();
Nodes = xdoc.doc umentElement. childNodes;
For (var I = 0; I <nodes. length; I ++ ){
Var _ music = new music (nodes. item (I ). childNodes. item (0 ). text, nodes. item (I ). childNodes. item (1 ). text, nodes. item (I ). childNodes. item (2 ). text );
_ AllMusic. push ({key: I, value: _ music });
}
Return _ allMusic;
}

3. methods implemented by the musicList class include:

A. This method is used to control the playback and pause.

// Control music
MusicList. prototype. controlMusic = function (){
Var toggle = document. getElementById ("toggle ");
If (this. audioElement. paused ){
This. audioElement. play ();
Toggle. innerHTML = "Suspend ";
}
Else {
This. audioElement. pause ();
Toggle. innerHTML = "playing ";
}
}

B. Play the next song and change the attributes.

// The next song
MusicList. prototype. moveToNextMusic = function (){
If (this. currentIndex + 1 <this. allMusic. length ){
This. currentMusic = this. allMusic [this. currentIndex + 1];
This. currentIndex ++;
This. audioElement. src = this. currentMusic. value. url;
This. audioElement. play ();
Document. getElementById ("toggle"). innerHTML = "Suspend ";
This. previusmusic = this. allMusic [this. currentIndex-1];
If (this. currentIndex + 1 <this. allMusic. length ){
This. nextMusic = this. allMusic [this. currentIndex + 1];
}
Else {
This. nextMusic = this. allMusic [0];
}
This. updataMusicList ();

}
Else {
// Return to the header
This. currentMusic = this. allMusic [0];

This. currentIndex = this. currentMusic. key;

If (this. currentIndex-1> = 0 ){
This. previusmusic = allMusic [this. currentIndex-1];
}
Else {
This. previusmusic = null;
}

If (this. currentIndex + 1 <this. allMusic. length ){
This. nextMusic = this. allMusic [this. currentIndex + 1];
}
Else {
This. nextMusic = null;
}
This. audioElement. src = this. currentMusic. value. url;
This. audioElement. play ();
Document. getElementById ("toggle"). innerHTML = "Suspend ";
This. updataMusicList ();
}
}

C. Play the last song

// Previous song
MusicList. prototype. moveToPreviousMusic = function (){
If (this. currentIndex-1> = 0 ){
This. currentMusic = this. allMusic [this. currentIndex-1];
This. currentIndex --;
This. audioElement. src = this. currentMusic. value. url;
This. audioElement. play ();
Document. getElementById ("toggle"). innerHTML = "Suspend ";
This. nextMusic = this. allMusic [this. currentIndex + 1];
If (this. currentIndex-1> = 0 ){
This. previusmusic = this. allMusic [this. currentIndex-1];
}
Else {
This. previusmusic = null;
}
This. updataMusicList ();
}
Else {
This. audioElement. src = this. currentMusic. value. url;
This. audioElement. play ();
Document. getElementById ("toggle"). innerHTML = "Suspend ";
This. updataMusicList ();
}
}

D. Update the song directory by changing the name of the current play and next song on the interface.

// Update the song directory
MusicList. prototype. updataMusicList = function (){
Document. getElementById ("currentName"). innerHTML = "Current playback:" + this.currentMusic.value.txt;
If (this. nextMusic! = Null ){
Document. getElementById ("nextName"). innerHTML = "Next:" + this.nextMusic.value.txt;
} Else {
Document. getElementById ("nextName"). innerHTML = "";
}
If (this. previusmusic! = Null ){
Document. getElementById ("prevName"). innerHTML = "previous:" + this.previusmusic.value.txt;
} Else {
Document. getElementById ("prevName"). innerHTML = "previous:" + "";
}
}

4.html:

<Audio id = "myPlayer"> </audio>
<Div id = "player" style = "background-color: # E2D7BE;">
<Div id = "prevName" style = "padding: 3px 0px 0px 0px; float: left; margin-right: 25px; width: 200px;"> </div>
<Div id = "currentName"
Style = "padding: 3px 0px 0px; float: left; margin-right: 25px; width: 200px; color: # FF0000;"> </div>
<Div id = "nextName"
Style = "padding: 3px 0px 0px; float: left; margin-right: 25px; width: 200px;"> </div>
<Button id = "prev" onclick = "list. moveToPreviousMusic ()"> previous </button>

<Button id = "toggle" onclick = "list. controlMusic ()"> play </button>

<Button id = "next" onclick = "list. moveToNextMusic ()"> next </button>
</Div>

As shown in the figure above, another extension through this class should be a simple network PLAYER:

Source code download (open with ie9, because the audio is mp3, and the method I wrote to read xml files is also the ie reading method without doing anything else ..)

Next time, we will introduce how to create viedo controls and video players.