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

This article introduces the relevant knowledge of "how to modify the audio tag style of Html5". In the operation of the actual case, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Let's first introduce the new element tags in HTML5.

Src: audio file path.

Autobuffer: sets whether audio is buffered automatically when the page is loaded.

Autoplay: sets whether the audio is played automatically.

Loop: sets whether the audio should be played in a loop.

Controls: properties for adding playback, pause, and volume controls.

Due to the popularity of html5, most mobile devices can use audio to play audio, but you may just need to simply play / stop the effect, but the audio style on different browsers is not satisfactory, so I simply encapsulated it, and the effect is as follows:

As a technical implementation, its principle is relatively simple, that is, hide the native audio, and then use div to display the effect of the player, and then call its click event to trigger play and stop, and then the duration duration. Sometimes this value can be obtained, sometimes not, so it is recommended to customize the storage time of the duration attribute on the audio tag. In this case, if the component cannot get it, it will take this value.

Copy the code

The code is as follows:

This.settings.target.on ('loadedmetadata', function () {

_ this.duration = _ this.audio.duration

If (_ this.duration! = "Infinity") {

_ this.durationContent.html (Math.floor (_ this.duration) +'s')

} else {

Var attr = $(_ this.settings.target) .attr ('duration')

If (attr) {

_ this.durationContent.html ($(_ this.settings.target) .attr ('duration') + "s")

} else {

_ this.durationContent.html ('')

}

}

});

This is the end of the content of "how to modify the audio tag style of Html5". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.