Modification of Html5 audio tag style _html5 tutorial skills

Let me first introduce to you the new element tags in HTML5
src: audio file path.
autobuffer: Set whether to automatically buffer audio when the page loads.
autoplay: Set whether audio plays automatically.
loop: Set whether the audio should be played in a loop.
controls: Attribute for adding play, pause and volume controls.
Due to the popularity of HTML5, audio can now be used to play audio for most needs on mobile terminals. However, you may only need a simple play/stop effect, but the audio styles on different browsers are not satisfactory. So I simply encapsulated it, and the effect is as follows:

As a technical implementation, its principle is relatively simple, which is to hide the native audio, 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. Sometimes this value can be obtained, but sometimes it cannot, which is a bit tricky. Therefore, it is recommended to customize the duration attribute storage time on the audio tag. At this time, if the component cannot obtain it, it will get this value.

Copy 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('');
}
}
});

The above content introduces you to the modification of Html5 audio tag style. I hope it will be helpful to you.