Comment: This article will give you a detailed overview of the use of the audio tag of html5 music player. Friends who like html5 can refer to it. I hope it will be helpful to you.
<audio> Tag properties: src: music URLpreload: preload autoplay: autoplay loop: loop controls: browser's own control bar
<audioid="media"src="http://www.abc.com/test.mp3"controls></audio>
<video> Tag properties: src: URL of video poster: video cover, picture displayed when there is no play preload: preload autoplay: autoplay loop: loop controls: browser's own control bar width: video width height: video height
<videoid="media"src="http://www.abc.com/test.mp4"controlsheigt="400px"></video>
Get HTMLVideoElement and HTMLAudioElement objects
//audio can create objects directly 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 properties:
HTMLVideoElement and HTMLAudioElement are both inherited from HTMLMediaElement
//Error status
Media.error; //null: Normal
Media.error.code; //1. User termination 2. Network error 3. Decoding error 4. URL invalid
//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); //Can it play a resource of a certain format
Media.networkState; //0. This element is not initialized 1. Normal but not using the network 2. Data is being downloaded 3. Resource not found
Media.load(); //Reload the resource specified by src
Media.buffered; //Return to buffered area, TimeRanges
Media.preload; //none: not preload metadata: preload resource information auto:
//Ready status
Media.readyState; //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
Media.seeking; //Is it seeking
//Replay status
Media.currentTime = value; //The current playback position, assignment can change the position
Media.startTime; // Generally 0, if it is a 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, can be set
Media.playbackRate = value;//The current playback speed will be changed immediately after setting
Media.played; //Return to the playable area, TimeRanges, see below for this object
Media.seekable; //Return to the area where you can seek TimeRanges
Media.ended; //Is it ended
Media.autoPlay; //Is it automatically played
Media.loop; // Whether to play loop
Media.play(); //Play
Media.pause(); //Pause
//control
Media.controls;//Is there a default control bar
Media.volume = value; //Volume
Media.muted = value; //Mute
//TimeRanges (region) object
TimeRanges.length; //Number of area segments
TimeRanges.start(index) //The start 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"); //The client actively terminates the download (not caused by an error),
eventTester("error"); //An error was encountered while requesting data
eventTester("stalled"); //Stop the network speed
eventTester("play"); // Triggered when play() and autoplay start playing
eventTester("pause"); //pause() triggers
eventTester("loadedmetadata"); //Successfully obtain the resource length
eventTester("loadeddata"); //
eventTester("waiting"); //Waiting for data, not an error
eventTester("playing"); //Start playback
eventTester("canplay"); // Can play, but may be paused due to loading in the middle
eventTester("canplaythrough"); // Can be played, all the songs are loaded
eventTester("seeking"); //Searching
eventTester("seeked"); //Search completed
eventTester("timeupdate"); // Playback time changes
eventTester("ended"); //The playback ends
eventTester("ratechange"); //The playback rate changes
eventTester("durationchange"); //Resource length changes
eventTester("volumechange"); //Volume change
A paragraph of js written by myself:
$(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);
};