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

This article is about how html5 customizes audio. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Html

Css

/ * progress bar * / .range {width: 5.875remr; height: 0.15remr; background: # 2386e4; border-radius: 0.25remr;-webkit-appearance: none! important; position: absolute; top: 3.55remr; left: 6remr;} / * progress slider * / .range::-webkit-slider-thumb {width: 0.5remr; height: 0.5rem Background: # fff; border: 1px solid # f18900; cursor: pointer; border-radius: 0.25remr;-webkit-appearance: none! important;}

Js

/ / convert seconds to 00:00 format function timeToStr (time) {var m = 0, s = 0, _ m ='00 seconds, _ s ='00 seconds; time = Math.floor (time% 3600); m = Math.floor (time / 60); s = Math.floor (time% 60); _ s = s < 10?'0' + s: s +'' _ m = m < 10?'0' + m: M +'; return _ m + ":" + _ s;} / / trigger playback event $('.play'). On ('click',function () {var audio=document.getElementById (' ao'); audio.play (); setInterval (function () {var t=parseInt (audio.currentTime)) $(".range") .attr ({'max':751}); $(' .max') .html (timeToStr (751)); $(".range") .val (t); $('.cur') .text (timeToStr (t));}, 1000);}) / / listen to the slider, you can drag $(".range") .on ('change',function () {document.getElementById (' ao'). CurrentTime=this.value;$ (".range") .val (this.value);})

The above can basically achieve custom audio playback, but there is a problem when dragging the progress bar. It is ok on the computer, but it can be dragged on the mobile phone, but the total audio duration is several minutes less than the normal playback, resulting in inaccurate playback after dragging progress. Through the test, it is found that the duration (total time) on the mobile phone is not the same as that on the computer, resulting in inaccurate playback position after sliding. The reason is that because the uploaded audio is compressed by me, the duration I get on the phone is different from the normal one. So after the audio is compressed, its duration will change on the phone (not on the computer), so you should pay attention to it in the future.

Thank you for reading! This is the end of this article on "how to customize html5 audio". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

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.