Use the MOSS documentation library to create an online mp3 player of the cottage version.

A few days ago, I suddenly experienced a whim and saw someone else playing an online video using the document library. I just wanted to customize the drop-down menu of the document library, that is, to play mp3 online.

First, let's take a look at the effect.

After the customization, the drop-down menu only supports the audition. When you click the audition, a small playback page is displayed, similar to Baidu mp3, which is very familiar to everyone,

I didn't add any styles for this new small page, which is very ugly, but since it was made by myself, it can be customized by BT. I will beautify it later when I have time.
First, let's take a look at how to customize the drop-down menu of the document library. This part of content was first referenced in an article by otec laodu. At that time, I only wanted to modify the name of the entries in the pull-down menu. This was fully implemented at the front-end, in addition, sharepoint provides a JS interface to modify it. You only need to add a piece of JS on the page. Generally, you can easily do this using a Content Editor.
For example, if you want to customize the document library list, put the Custom_AddDocLibMenuItems Method
For a normal list, put the Custom_AddListMenuItems method.
For example:
<Script language = 'javascript '>
Function Custom_AddListMenuItems (m, ctx)
{
Var menuOption;
StrDisplayText = "Say Hello ";
StrAction = "javascript: alert ('Hello! ')";
StrImagePath = ctx. imagesPath + "exptitem.gif ";
MenuOption = CAMOpt (m, strDisplayText, strAction, strImagePath, null, 550 );
MenuOption. id = "ID_Custom ";
Return true;
}
</<SPAN> script>
This method removes the default menu items of the following webpart, and adds a Say Hello menu item. Then, click alert.
CAMOpt is a built-in method for creating menu items
The second parameter specifies the name, the third parameter specifies an action (javascript function), and the third parameter specifies the image (not "")
The fourth is the alt attribute of the image, and the fifth is the sequential number of the menu items.
If Custom_AddListMenuItems returns true, the default menu items are not created.
If false or no return statements are returned, the default menu items are still present. Some time ago, someone asked me how to remove the drop-down menu of the list. I gave him a code, return true in Custom_AddListMenuItems.
The next step is how to get the corresponding mp3 name through JS, pass it to the audition page, and process the audition page. The idea is similar to implementing single-point login. First, create an audition page, which accepts a parameter, generates an absolute mp3 path, and assigns a value to the player control, so that you can play mp3. This method can also be used for online video playback.
First, let's take a look at binding events to the custom drop-down menu. The complete JS Code is as follows:
<Script language = 'javascript '>
Function Custom_AddDocLibMenuItems (m, ctx)
{
Var menuid = m. id. split ('_') [0];
Var url = document. getElementById (menuid). Url;
Var menuOption;
StrDisplayText = "try ";
StrAction = "javascript: CreateMp3 ('" + url + "')";
StrImagePath = ctx. imagesPath + "exptitem.gif ";
MenuOption = CAMOpt (m, strDisplayText, strAction, strImagePath, null, 550 );
MenuOption. id = "ID_Custom ";
Return true;
}
Function CreateMp3 (url)
{
Var mp3url = "/_ layouts/mp3.htm? P = "+ url. split ('/') [3];
Openpage (mp3url );
}
Function openpage (htmlurl)
{
Var newwin = window. open (htmlurl, "newWin", "toolbar = no, location = no, directories = no, status = no, scrollbars = yes, menubar = no, resizable = no, top = 100, left = 200, width = 400, height = 200 ");
Newwin. focus ();
Return false;
}
</Script>
First, in Custom_AddDocLibMenuItems, an event is bound to the "audition" option. strAction = "javascript: CreateMp3 ('" + url + "')";, the CreateMp3 method accepts a parameter url, which is the famous city of the currently selected mp3 file. getElementById (menuid ). url; to obtain it, And then piece together in CreateMp3 to form the audition address, and pass the name to it, then call the openpage method, open the audition page and modify the properties of the audition window, such as the size and invisible navigation menu.
Then let's take a look at the processing process of the trial page. The complete page code is as follows:
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; CHARSET = UTF-8"/>
<Meta name = "Robots" content = "NOINDEX, NOFOLLOW"/>
<Title> MP3 audition </title>
<Script type = "text/javascript">
Function getParameter (queryString, parameterName)
{
Var parameterName = parameterName + "= ";
If (queryString. length> 0 ){
Begin = queryString. indexOf (parameterName );
If (begin! =-1 ){
Begin + = parameterName. length;
End = queryString. indexOf ("&", begin );
If (end =-1 ){
End = queryString. length;
}
Return unescape (queryString. substring (begin, end ));
}
Return "null ";
}
}
Function playList_dblClick (){
Var queryString = window. location. search. substring (1 );
Var mp3url = 'document library address' + getParameter (queryString, 'P ');

MediaPlayer1.detachEvent ("PlayStateChange", checkPlayStatus );
MediaPlayer1.fileName = mp3url;
MediaPlayer1.play ();
SetTimeout ('mediaplayer1. play (); MediaPlayer1.attachEvent ("PlayStateChange", checkPlayStatus); ', 1000 );
}
Function init (){
MediaPlayer1.AutoRewind = false;
MediaPlayer1.AutoStart = true;
MediaPlayer1.SendPlayStateChangeEvents = true;
MediaPlayer1.attachEvent ("PlayStateChange", checkPlayStatus );
}

Function checkPlayStatus (oldState, newState ){
Try {
If (MediaPlayer1.PlayState = 0 ){
MediaPlayer1.detachEvent ("PlayStateChange", checkPlayStatus );
MediaPlayer1.stop ();
If (playList. options. selectedIndex <playList. options. length-1 ){
PlayList. options [playList. options. selectedIndex + 1]. selected = true;
} Else {
PlayList. options [0]. selected = true;
}
MediaPlayer1.fileName = playList. value;
MediaPlayer1.play ();
SetTimeout ('mediaplayer1. play (); MediaPlayer1.attachEvent ("PlayStateChange", checkPlayStatus); ', 1000 );
}
} Catch (e ){}
}
</Script>
</Head>
<Body onload = "playList_dblClick ();">
<Object classid = "clsid: 22D6F312-B0F6-11D0-94AB-0080C74C7E95" id = "MediaPlayer1" width = "286" height = "225" STANDBY = "Loading Windows Media Player components... "TYPE =" application/x-oleobject ">
<Param name = "AudioStream" value = "-1"/>
<Param name = "AutoSize" value = "-1"/>
<! -- Whether to automatically adjust the playback size -->
<Param name = "AutoStart" value = "0"/>
<! -- Automatic playback? -->
<Param name = "AnimationAtStart" value = "-1"/>
<Param name = "AllowScan" value = "-1"/>
<Param name = "AllowChangeDisplaySize" value = "-1"/>
<Param name = "AutoRewind" value = "0"/>
<Param name = "Balance" value = "0"/>
<! -- Left-right channel balance, leftmost-9640, rightmost 9640 -->
<Param name = "BaseURL" value>
<Param name = "BufferingTime" value = "15"/>
<! -- Buffer time -->
<Param name = "ClickToPlay" value = "-1"/>
<Param name = "CursorType" value = "0"/>
<Param name = "CurrentPosition" value = "0"/>
<! -- The current playback progress-1 indicates that the playback progress remains unchanged. 0 indicates that the start unit is seconds. For example, 10 indicates that the playback starts from 10th seconds. The value must be-1.0 or greater than or equal to 0. -->
<Param name = "CurrentMarker" value = "0"/>
<Param name = "DisplayBackColor" value = "0"/>
<Param name = "DisplayForeColor" value = "16777215"/>
<Param name = "DisplayMode" value = "0"/>
<Param name = "DisplaySize" value = "0"/>
<Embed src = "-1.mp3" width = "286" id = "m1" height = "225" autostart = "0"> </embed>
</Object>
</Body>
</Html>
In the onload event of the body, call the playList_dblClick () method to obtain the passed mp3 name and use var mp3url = 'document library address' + getParameter (queryString, 'P'); this method is used to construct the absolute address of the mp3 file in the document library, assign the value to the player, and play the video. MediaPlayer1.fileName = mp3url;
MediaPlayer1.play ();. In this way, you can try mp3.
So far, the online mp3 player of the shanzhai version has been completed, which is relatively primitive and purely idle.