Overview of the use of audio tags in html5 music player_html5 tutorial skills

Copy code

The code is as follows:

Get HTMLVideoElement and HTMLAudioElement objects

Copy code

The code is as follows:

//Audio can create objects directly through new
Media = newAudio("http://www.abc.com/test.mp3");
//Both audio and video The object can be obtained through the tag
Media = document.getElementById("media");

Media methods and properties:
HTMLVideoElement and HTMLAudioElement both inherit from HTMLMediaElement

Copy code

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 available Initialization 1. Normal but not using the network 2. Downloading data 3. No resource found
Media.load(); //Reload the resource specified by src
Media.buffered; //Return to the buffered area, TimeRanges
Media.preload; //none: Do not preload metadata: Preload resource information auto:
//Ready state
Media.readyState; //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
Media.seeking; //Whether it is seeking
//Playback status
Media.currentTime = value; //The current playing position, assigning a value can change the position
Media.startTime; / / Generally 0, if it is streaming media or a resource that does not start from 0, it is not 0
Media.duration; //The current resource length stream returns infinite
Media.paused; // Whether to pause
Media.defaultPlaybackRate = value; //Default playback speed, you can set
Media.playbackRate = value; //Current playback speed, change immediately after setting
Media.played; //Return to the area that has been played, TimeRanges , see below for this object
Media.seekable; //Return the seekable area TimeRanges
Media.ended; //Whether to end
Media.autoPlay; //Whether to automatically play
Media.loop ; //Whether to loop play
Media.play(); //Play
Media.pause(); //Pause
//Control
Media.controls;//Whether there is a default control bar
Media.volume = value; //Volume
Media.muted = value; //Mute
//TimeRanges (area) object
TimeRanges.length; //Number of area segments
TimeRanges. start(index) //The starting position of the index section area
TimeRanges.end(index) //The end position of the index section area
Event:
eventTester = function(e){
Media .addEventListener(e,function(){
console.log((newDate()).getTime(),e);
});
}
eventTester("loadstart"); / /The client starts requesting data
eventTester("progress"); //The client is requesting data
eventTester("suspend"); //Delayed download
eventTester("abort"); //Client The client actively terminates the download (not due to an error),
eventTester("error"); //An error was encountered when requesting data
eventTester("stalled"); //The network speed stalled
eventTester(" play"); //Triggered when play() and autoplay start playing
eventTester("pause"); //Triggered by pause()
eventTester("loadedmetadata"); //Successfully obtained resource length
eventTester("loadeddata"); //
eventTester("waiting"); //Waiting for data, not an error
eventTester("playing"); //Start playback
eventTester("canplay"); //Can be played, but may be paused due to loading
eventTester("canplaythrough"); //Can be played, all songs have been loaded
eventTester("seeking"); //Searching
eventTester( "seeked"); //Searching completed
eventTester("timeupdate"); //Playing time changed
eventTester("ended"); //Playing ended
eventTester("ratechange"); // Playback rate change
eventTester("durationchange"); //Resource length change
eventTester("volumechange"); //Volume change

自己写的一段js：

复制代码

代码如下:

$(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);
};