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

Source: Internet
Author: User

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.

 

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.