[Js open source component development] html5 tag audio style change, html5audio

[Js open source component development] html5 tag audio style change, html5audio
Style Change of html5 tag audio

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.

This.settings.tar get. on ('loadedmetadata', function () {_ this. duration = _ this. audio. duration; if (_ this. duration! = "Infinity") pai_this.durationcontent.html (Math. floor (_ this. duration) +'s ');} else {var attr = getting get ). attr ('duration') + "s" );}else{_this.durationContent.html ('');}}});