Shulou(Shulou.com)06/03 Report--

How to use the audio tag of html5 music player? in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

The code is as follows:

Tag attribute: src: music URLpreload: preload autoplay: auto playback loop: loop playback controls: browser's own control bar

Tag attribute: src: video URLposter: video cover, no picture displayed during playback preload: preloaded autoplay: auto playback loop: loop playback controls: browser's own control bar width: video width height: video height

Get HTMLVideoElement and HTMLAudioElement objects

The code is as follows:

/ / 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:

Both HTMLVideoElement and HTMLAudioElement inherit from HTMLMediaElement

The code is as follows:

/ / error status

Media.error; / / null: normal

Media.error.code; / / 1. The user terminates 2. Network error 3. Decoding error 4.URL is invalid

/ / Network status

Media.currentSrc; / / returns the URL of the current resource

Media.src = value; / / returns or sets 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. Normal but not using network 2. Downloading data 3. No resources found

Media.load (); / / reload the resources specified by src

Media.buffered; / / returns the buffered region, TimeRanges

Media.preload; / / none: do not preload metadata: preload resource information auto:

/ / status of preparation

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 or not

/ / playback status

Media.currentTime = value; / / the current playback position, which can be changed by assignment

Media.startTime; / / is generally 0, but not 0 if it is a streaming media or a resource that does not start from 0

Media.duration; / / the current resource length stream returns infinite

Media.paused; / / whether to pause

Media.defaultPlaybackRate = default playback speed of value;//, which can be set

Media.playbackRate = value;// current playback speed, change immediately after setting

Media.played; / / returns the area that has been played, TimeRanges. For this object, see below

Media.seekable; / / returns the region TimeRanges that can be seek

Media.ended; / / whether to end or not

Media.autoPlay; / / whether to play automatically

Media.loop; / / whether to play in a loop or not

Media.play (); / / playback

Media.pause (); / / pause

/ / Control

Does Media.controls;// have a default control bar?

Media.volume = value; / / Volume

Media.muted = value; / / mute

/ / TimeRanges (region) object

Number of TimeRanges.length; / / region segments

Start position of TimeRanges.start (index) / / paragraph index area

TimeRanges.end (index) / / the end of the index area

Events:

EventTester = function (e) {

Media.addEventListener (eQuery function () {

Console.log ((newDate ()). GetTime (), e)

});

}

EventTester ("loadstart"); / / the client starts to request data

EventTester ("progress"); / / the client is requesting data

EventTester ("suspend"); / / delayed download

EventTester ("abort"); / / the client initiatively terminates the download (not caused by an error)

EventTester ("error"); / / encountered an error while requesting data

EventTester ("stalled"); / / Network speed stall

Triggered when eventTester ("play"); / / play () and autoplay start playing

EventTester ("pause"); / / pause () triggers

EventTester ("loadedmetadata"); / / obtain the resource length successfully

EventTester ("loadeddata"); / /

EventTester ("waiting"); / / waiting for data is not an error

EventTester ("playing"); / / start playback

EventTester ("canplay"); / / can be played, but may be paused due to loading

EventTester ("canplaythrough"); / / can be played, and all the songs have been loaded

EventTester ("seeking"); / / searching

EventTester ("seeked"); / / search completed

EventTester ("timeupdate"); / / playback time change

EventTester ("ended"); / / end of playback

EventTester ("ratechange"); / / playback rate change

EventTester ("durationchange"); / / Resource length change

EventTester ("volumechange"); / / Volume change

A paragraph 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)

}

This is the answer to the question about the use of audio tags in html5 music player. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.