This article mainly introduces the style modification of the Html5 tag audio. Friends who are interested in the knowledge of HTML5 audio tag styles will learn together. Let’s introduce to you the new element tags in HTML5.
src: Audio file path.
autobuffer: Sets whether to automatically buffer audio when the page is loading.
autoplay: Set whether the audio is automatically played.
loop: Set whether the audio needs to be played looped.
controls: Properties for adding play, pause, and volume controls.
Due to the popularity of html5, most mobile phone needs can use audio to play audio, but you may just need a very simple play/stop 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, which is to hide the native audio, then use a div to display the player's effect, and then call its click event to trigger play and stop, and then the duration duration. This value can sometimes be obtained, but sometimes it is not possible, which is quite pitiful. Therefore, it is recommended to customize the duration of the duration on the audio tag. At this time, if the component cannot obtain it, this value will be obtained.
Copy the code