Current location - Music Encyclopedia - NetEase Cloud Music - How to make the progress bar of JS web player? Principle and code for high score 100 points
How to make the progress bar of JS web player? Principle and code for high score 100 points

If you are using the wmp control, you can refer to the following properties:

controls.currentPosition

This property can be used to control the progress of the current song playback. Write, for example, set

document.getElementById("wmpid").controls.currentPosition = 18

It will advance the current song to 18 seconds. I have not tried the non-integer part. Is it possible? Take effect (should be possible)

controls.currentPositionString

This is a read-only property. For example, if the current song is released at 18 seconds, the value is 00:18.

As for the progress bar you mentioned, it is controlled using the event.clientX property, which is the abscissa of the mouse relative to the window. Subtracting this number from the clientX property of the progress bar DIV is the position of the mouse on the progress bar. You can make some additions, subtractions, and fine-tuning yourself to ensure the results are appropriate. If the width is 100px and the position you click is 40px, then 40/100*song length is the current position that should be jumped to.

It is also very simple to add a slider. There are many drag classes on the Internet. It would be better to add one and adjust it a little.

By the way, please also post the basic properties of the wmp component. LZ if If not, you can refer to it briefly

URL:String; Specify the media location, local or network address

uiMode:String; Player interface mode, which can be Full, Mini, None, Invisible

playState:integer; playback status, 1=stop, 2=pause, 3=play, 6=buffering, 9=connecting, 10=ready

enableContextMenu: Boolean; Enable/disable the right-click menu

fullScreen:boolean; Whether to display in full screen

[controls] wmp.controls //Basic player controls

controls.play ; Play

controls.pause; Pause

controls.stop; Stop

controls.currentPosition:double; Current progress

controls. currentPositionString:string; Current progress, string format. Such as "00:23"

controls.fastForward; fast forward

controls.fastReverse; fast rewind

controls.next; next song

controls.previous; Previous song

[settings] wmp.settings //Basic player settings

settings.volume:integer; Volume, 0-100

settings.autoStart:Boolean; whether to play automatically

settings.mute:Boolean; whether to mute

settings.playCount:integer; number of plays

[currentMedia] wmp.currentMedia //Current media properties

currentMedia.duration:double; Total media length

currentMedia.durationString:string; Total media length, string format.

Such as "03:24"

currentMedia.getItemInfo(const string); Get the current media information "Title" = media title, "Author" = artist, "Copyright" = copyright information, "Description" = media Content description, "Duration" = duration (seconds), "FileSize" = file size, "FileType" = file type, "sourceURL" = original address

currentMedia.setItemInfo(const string); via properties Set media information by name

currentMedia.name:string; same as currentMedia.getItemInfo("Title")

[currentPlaylist] wmp.currentPlaylist //Current playlist properties

< p>currentPlaylist.count:integer; The number of media contained in the current playlist

currentPlaylist.Item[integer]; Get or set the media information of the specified item, its sub-properties are the same as wmp.currentMedia

The player interface is very good, please keep working hard

------

Question added:

So how to control wmp under Firefox?

-----

As far as I know, Firefox also supports the above attributes. It just needs to be like this when calling , everything else is the same. I am using firefox3.6 and have the wmp extended control installed. Users who do not have it installed may not be able to browse your page normally.

In addition, during testing, I found that adding the type attribute directly to the original object does not work, but using a new object does. The reason is unknown. I think it's a problem of not recognizing the clsid.

If this is the case, it may be necessary to use a program to determine the browser and dynamically write the corresponding object element?

I also found this article while searching for information

/article/24207.htm

It can be used as a reference

Above

p>