Html5 audio label style modification, html5audio label Style

Html5 audio label style modification, html5audio label Style
First, we will introduce the new element tags in HTML5.
Src: Specifies the audio file path.
Autobuffer: Set whether to automatically buffer audio when the page is loaded.
Autoplay: sets whether the audio is automatically played.
Loop: Set whether or not to play audio cyclically.
Controls: attribute for adding playback, pause, and volume controls.
Thanks to the popularity of html5, audio can be used to play audio for most mobile terminals, but you may only need simple playback/Stop effects, however, the audio style on different browsers is not satisfactory, So I simply encapsulate it and the effect is as follows:

As a technical implementation, its principle is relatively simple, that is, to hide the Native audio, then use div to display the player effect, and then call its click event to trigger play and stop, then there is the duration. This value can be obtained sometimes, sometimes it is not good, it is relatively pitfall, so we recommend that you customize the duration of the duration Attribute on the audio tag. At this time, this value will be obtained if the component cannot be obtained.

The Code is as follows:
This.settings.tar get. on ('loadedmetadata', function (){
_ This. duration = _ this. audio. duration;
If (_ this. duration! = "Infinity "){
_This.durationContent.html (Math. floor (_ this. duration) +'s ');
} Else {
Var attr = values (_this.settings.tar get). attr ('duration ');
If (attr ){
_This.durationcontent.html(%(_this.settings.tar get). attr ('duration') + "s ");
} Else {
_This.durationContent.html ('');
}
}
});

The above section describes how to modify the Html5 audio tag style. I hope it will be helpful to you.