Html5 music player audio tag usage Overview

Comments: This article gives you a detailed overview of the use of the html5 music player audio tag. For friends who like html5, refer to the following. I hope it will help you.
The Code is as follows:
<Audio> label property: src: URLpreload of the music: pre-loaded autoplay: automatic playback loop: loop playback controls: control bar of the browser
<Audioid = "media" src = "http://www.abc.com/test.mp3" controls> </audio>
<Video> label attribute: src: The URLposter of the video: the video cover. The preload: pre-loaded autoplay: automatic playback loop: loop playback: controls: browser control Bar width: Video width height: Video height
<Videoid = "media" src = "http://www.abc.com/test.mp4" controls width = "400px" heimpaired = "400px"> </video>

Obtain HTMLVideoElement and HTMLAudioElement objects

The Code is as follows:
// Audio can directly create an object through new
Media = newAudio ("http://www.abc.com/test.mp3 ");
// Both audio and video can obtain objects through tags.
Media = document. getElementById ("media ");

Media methods and attributes:
Both HTMLVideoElement and HTMLAudioElement inherit from HTMLMediaElement

The Code is as follows:
// Error status
Media. error; // null: normal
Media. error. code; // 1. User termination 2. network error 3. decoding error 4. Invalid URL
// Network status
Media. currentSrc; // return the URL of the current resource
Media. src = value; // return or set the URL of the current resource
Media. canPlayType (type); // whether resources in a certain format can be played
Media. networkState; // 0. This element is not initialized. 1. The network is not used. 2. The data is being downloaded. 3. The resource is not found.
Media. load (); // reload resources specified by src
Media. buffered; // return the buffered area, TimeRanges
Media. preload; // none: Do not preload metadata: pre-load resource information auto:
// Preparation status
Media. readyState; // 1: HAVE_NOTHING 2: HAVE_METADATA 3. HAVE_CURRENT_DATA 4. HAVE_FUTURE_DATA 5. HAVE_ENOUGH_DATA
Media. seeking; // whether or not seeking is being performed
// Playback status
Media. currentTime = value; // The current playback position. The value can change the position.
Media. startTime; // It is generally 0. If it is streaming Media or a resource not starting from 0, it is not 0.
Media. duration; // The length of the current resource. The stream returns an unlimited number.
Media. paused; // whether to pause
Media. defaultPlaybackRate = value; // default playback speed, which can be set
Media. playbackRate = value; // The current playback speed. The setting changes immediately.
Media. played; // return the played area, TimeRanges. For details about this object, see the following
Media. seekable; // returns the region TimeRanges that can be seek.
Media. ended; // whether to end
Media. autoPlay; // whether to play automatically
Media. loop; // whether to play cyclically
Media. play (); // play
Media. pause (); // pause
// Control
Media. controls; // whether the default control bar exists
Media. volume = value; // volume
Media. muted = value; // mute
// TimeRanges (region) object
TimeRanges. length; // number of segments
TimeRanges. start (index) // start position of the index segment
TimeRanges. end (index) // The end position of the index segment.
Event:
EventTester = function (e ){
Media. addEventListener (e, function (){
Console. log (newDate (). getTime (), e );
});
}
EventTester ("loadstart"); // The client starts to request data.
EventTester ("progress"); // The client is requesting data
EventTester ("suspend"); // delay download
EventTester ("abort"); // The client proactively terminates the download (not due to an error ),
EventTester ("error"); // An error occurred while requesting data
EventTester ("stalled"); // network speed stall
EventTester ("play"); // triggered when play () and autoplay start play
EventTester ("pause"); // pause () triggers
EventTester ("loadedmetadata"); // The resource length is obtained successfully.
EventTester ("loadeddata ");//
EventTester ("waiting"); // wait for data, not an error
EventTester ("playing"); // start playback
EventTester ("canplay"); // It can be played, but it may be paused during loading.
EventTester ("canplaythrough"); // It can be played. All the songs have been loaded.
EventTester ("seeking"); // searching
EventTester ("seeked"); // search complete
EventTester ("timeupdate"); // Changes the playback time
EventTester ("ended"); // The End Of The playback.
EventTester ("ratechange"); // Changes the playback speed
EventTester ("durationchange"); // resource Length Change
EventTester ("volumechange"); // volume change

A piece of js written by myself:

The Code is as follows:
$ (Function (){
Var p = new Player ();
P. read ("play ");
$ ("# Stop"). click (function (){
P. pause ();
});
$ ("# Start"). click (function (){
P. play ();
});
$ ("# Show"). click (function (){
Alert (p. duration ());
});
SetInterval (function (){
$ ("# CurrentTime"). text (p. currentTime ());
},1000 );
});
Function Player (){};
Player. prototype = {
Box: new Object (),
Read: function (id ){
This. box = document. getElementById (id );
},
Play: function (){
This. box. play ();
},
Pause: function (){
This. box. pause ();
},
Src: function (url ){
This. box. src = url;
},
CurrentTime: function (){
Return (this. box. currentTime/60). toFixed (2 );
}
};
Player. prototype. duration = function (){
Return (this. box. duration/60). toFixed (2 );
};