*/Configure */--------------------------------------------------------------------------------------
*/By: programming China http://www.bc-cn.net
*/Author: programming star★E-mail: rostar@126.com QQ: 150163704
*/Time:-8-30 programming Forum debut
*/Statement: respect the work of the author. Reprinted in this section.
*/Configure */--------------------------------------------------------------------------------------
Simple webpage music playing program using JavaScript
-- Programming star
2007-8-30
Hello everyone, I haven't posted a post on the forum for a while. in the past, I posted a post on the Forum-simple picture browsing of cainiao's JavaScript Application. although no one has posted me back, the popularity is still good, And the postmaster has been refined. I would like to express my gratitude to the postmaster.
Today, let's take a look at the principles of the Web music player program. This should be a topic of interest to everyone, especially beginners. the program I wrote is not fully functional and the interface is not beautiful. However, this post aims to discuss the principles of the program, so we will discuss it. you can also write a fully functional webpage playing program on this basis. the premise for running this program is that Windows Media Player is installed on the computer.
To achieve the effect of webpage music playback, you should have some knowledge about the attributes and methods of the plug-in (Windows Media Player or Real Player. here, we only discuss some attributes and methods of the Windows Media Player Plug-in involved in this program.
Properties of Windows Media Player
Attribute name Attribute Value
Set the URL song address or return the song file address played by the playback plug-in.
Uimode none or mini or full sets whether the playback plug-in displays the control bar.
Enablecontextmenu true or false sets whether the playback plug-in displays the right-click menu
A set attribute of the controls playback plug-in to control playback.
How to set the Windows Media Player attribute controls
Function of method name
Play () Play a song
Pause () pause a song
Stop () Stop a song
Program test connection:
Http://rostar.xinwen5#net/simple online music program. html
The complete source code of the program is provided to you. then you can understand the comments in the code. if you still don't understand it, read my explanation. The text may be inaccurate and fluent. Please forgive me.
<HTML>
<Head>
<SCRIPT>
// Play the video when it is enabled
Function loadplay ()
{
Try {
Setcolor (0 );
Document. WMP. url = musiclist. Options [0]. value; // specify the first song in the (play) List
Document. WMP. Controls. Play (); // play
} Catch (e ){}
// Try {} catch (e) {} indicates ignoring errors occurring during the program running
}
// The following function is used to obtain the index of the currently played song in the list.
Function getmusicindex ()
{
Try {
VaR musicindex = 0; // stores the position of the currently played song
/*
Traverse the entire playlist.
Obtains the subscript position of the currently played song in the list.
Use document. WMP. URL to compare the value of the list item
*/
For (I = 0; I <musiclist. length; I ++)
{
If (document. WMP. url = Document. All. musiclist. Options [I]. value)
{
Musicindex = I; // record the position of the currently played song
Break;
}
}
Return musicindex; // The entire function returns the subscript position of the currently played song.
} Catch (e ){}
SetTimeout ('getmusicindex () ', 1000); // checks the position of the currently played song every 1 second.
}
Getmusicindex (); // call the getmusicindex () function
// Set the color of the currently played and unplayed songs
Function setcolor (me)
{
For (I = 0; I <musiclist. length; I ++)
{
Musiclist. Options [I]. style. color = "Purple ";
If (I = me)
{
Musiclist. Options [I]. style. color = "green ";
Continue;
}
}
}
// Play the last song
Function playprevious ()
{
Try {
VaR playindex = getmusicindex (); // store the position of the currently played song to the playindex variable.
Playindex --; // The Position of the currently played song-1 indicates the position of the previous song
Setcolor (playindex );
Document. WMP. url = musiclist. Options [playindex]. value;
Document. WMP. Controls. Play ();
} Catch (e ){}
}
// Play the next song
Function playnext ()
{
Try {
VaR playindex = getmusicindex (); // store the position of the currently played song to the playindex variable.
Playindex ++; // The Position of the currently played song + 1 indicates the position of the next song
Setcolor (playindex );
Document. WMP. url = musiclist. Options [playindex]. value;
Document. WMP. Controls. Play ();
} Catch (e ){}
}
// Control playback, pause, and stop
Function Control (me)
{
Switch (me)
{
Case 1: // pause
Document. WMP. Controls. Pause ();
Break;
Case 2: // play
Document. WMP. Controls. Play ();
Break;
Case 0: // stop
Document. WMP. Controls. Stop ();
Break;
}
}
</SCRIPT>
</Head>
<Body onload = "loadplay ()">
<Object ID = "WMP" classid = "CLSID: 6bf52a52-394a-11d3-b153-00c04f79faa6" width = "232" Height = "200" loop =-1>
<Param name = "url">
<Param name = "uimode" value = "NONE"> <! -- None, Mini, full -->
<Param name = "enablecontextmenu" value = "false">
</Object>
<Br>
<Button onclick = "Control (2)"> play </button>
<Button onclick = "Control (1)"> pause </button>
<Button onclick = "Control (0)"> stop </button>
<Button onclick = "playprevious ()"> previous curve </button>
<Button onclick = "playnext ()"> next song </button>
<Br>
<Select id = "musiclist" multiple>
<Option value = "http://down.5458.net/yenja/zy/jwys.mp3"> life
<Option value = "http://media3.91vc.com/vc0912/space/2007/05/16/cyzhuiyue/1560247_20070517004036.mp3"> water and wood years -- juvenile past
<Option value = "http://www.m8cool.com/UserFiles/BbsAttachments/2007072219356718750-29B4.mp3"> life-don't cry, my favorite person
</SELECT>
<P>
</Body>
</Html>
Detailed analysis of program code:
There are six functions in this program. Next I will try to analyze these functions one by one.
1. loadplay () function analysis:
Let's first look at the 1st functions loadplay (). This function indicates that the first song in the list is played as soon as the webpage is opened. we can see that the function has such a statement try {} catch (e) {} inside, which is the wrong statement captured in Javascript. The reason for using this statement is, if an internal function error occurs, the running error is ignored. let's take a look at this setcolor (0); this indicates that another function is called, which will be explained later. let's take a look at document. WMP. url = musiclist. options [0]. value; this statement indicates that the value of item 1st in the list is assigned to the URL attribute of the playback plug-in as the playback file address of the playback plug-in, because the values in the list are the file addresses of some songs. next, we can see document. WMP. controls. play (); this statement is used for playing, because in the previous statement, we have specified the playback file address for the playback plug-in, therefore, we need to use the play () method of the set attribute controls of the playback plug-in to play a song.
2. getmusicindex () function analysis:
This function is used to obtain the index of the currently played song in the list. this program obtains the index of the playing song for playing the previous and next songs. first, let's make a sound variable musicindex, which is a local variable used to store the position of the currently played song (the item subscript index in the list ). of course, we can make a sound of a global variable for storage, but if you can solve the problem with local variables, try not to use global variables. This is a good suggestion (I saw it in some places, ). to obtain the subscript position of the current Playing Song in the list, we need to traverse the entire playlist, and then compare it with the values (Value Attribute values) in the list using the URL attribute of the playback plug-in, if the two are consistent, the subscript position of the item in the playlist is extracted, so we need to use for (I = 0; I <musiclist. length; I ++ ){...} Loop to traverse. In this for loop, we use the if statement to determine whether it meets the requirements. If yes, we store the position of the current Playing Song In the musicindex variable, then exit the for loop. next, we can see that return musicindex; this statement indicates that the getmusicindex () function returns a value, which is the value of the musicindex local variable.
3. setcolor (me) function analysis:
This function sets the color of the currently played and unplayed songs so that you can clearly know the song you are playing. this function has a parameter "me", which is related to the subscript of the currently played song. first, we use a for loop to traverse the entire playlist. In the for loop, we can see the following statement: musiclist. options [I]. style. color = "Purple"; this indicates that the text color of each item in the list is set to purple. next we will use an if statement block. Let's look at the Condition Statement I = Me In The if block, which indicates that, if the subscript position of an item in a list is the same as that of the function parameter me, set the text color of the item to green (execute musiclist. options [I]. style. color = "green";) and starts to enter the next half cycle (execute continue; it is not a re-start cycle !) The function of the continue statement in the loop is as if you encounter a stone while walking on the road. When you encounter this stone, you will cross it, continue to the next step (this is my personal stupid understanding. It is intended for people like us who use IQ to remember and understand it. You may not need to understand it like this, ).
4. playprevious () function analysis:
This function is used to play the last song. let's first look at VAR playindex = getmusicindex (); this means that the return value of the getmusicindex () function (the position of the currently played song) is assigned to the playindex variable. let's look at playindex --; this statement represents the variable value of playindex minus 1. In this way, the playindex value is the subscript position of the previous song currently played, and then let's look at it again, setcolor (playindex); this indicates that the setcolor (me) function is called to set the text color of the specified item. Do not forget playindex as the actual parameter of the setcolor (me) function. the following two sentences do not need to be explained. If you do not fully understand them, please refer to the previous explanation.
5. playnext () function analysis:
For more information, see playprevious () function analysis. The only difference between the two is the addition and subtraction.
6. Control (me) function analysis:
This function is used to control the playback plug-in, such as playing, pausing, and stopping. we can see that this function only contains the switch structure block. The conditional expression of the switch structure block uses the form parameter me of this function. next, let's take a look at Case 1, which indicates that if me matches 1, the playing will be paused (execute document. WMP. controls. pause (); statement), break; indicates to exit the switch structure block. and so on. Don't explain the following!
Let's take a look at the following sentence in the HTML code:
<Object ID = "WMP" classid = "CLSID: 6bf52a52-394a-11d3-b153-00c04f79faa6" width = "232" Height = "200" loop =-1>, pay attention to the <Object> marked classid attribute value! CLSID: 6bf52a52-394a-11d3-b153-00c04f79faa6: loading the Windows Media Player Plug-in on the webpage is crucial!
Okay, now you can relax. Remember to write a great player.
The following is for you to download.
This article from the csdn blog, reproduced please indicate the source: http://blog.csdn.net/jcc3120/archive/2008/02/15/2096407.aspx
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
