H5 custom audio (problem and solution), h5 custom audio Solution

H5 custom audio (problem and solution), h5 custom audio Solution

For h5 activity, you need to insert audio, but you need to customize the style.

Html

1 <! -- Cur indicates the current time max indicates the total length of time input indicates the progress bar --> 2 <span class = 'cur'> </span> <input type = "range" min = 0 max = 100 class = 'range' value = 0> <span class = 'Max'> </span>

Css

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

Js

1 // convert seconds to the format 2 function timeToStr (time) {3 var m = 0, 4 s = 0, 5 _ m = '00 ', 6 _ s = '00'; 7 time = Math. floor (time % 3600); 8 m = Math. floor (time/60); 9 s = Math. floor (time % 60); 10 _ s = s <10? '0' + s: s + ''; 11 _ m = m <10? '0' + m: m + ''; 12 return _ m +": "+ _ s; 13} 14 // triggers a playback Event 15 $ ('. play '). on ('click', function () {16 var audio = document. getElementById ('ao'); 17 audio. play (); 18 setInterval (function () {19 var t = parseInt (audio. currentTime); 20 $ (". range "). attr ({'max ': 751}); 21 values ('.max'0000.html (timeToStr (751); 22 $ (". range "). val (t); 23 $ ('. cur '). text (timeToStr (t); 24}, 1000); 25}); 26 // listener slider, you can drag 27 $ (". range "). on ('change', function () {28 document. getElementById ('ao '). currentTime = this. value; $ (". range "). val (this. value );
29 });

The above can basically achieve custom audio playback, but there is a problem when dragging the progress bar, the computer is OK, but on the mobile phone can be dragged, however, the total duration of the audio is several minutes less than that of normal playback, resulting in inaccurate playback after the drag progress. The test shows that the duration obtained on the mobile phone is different from that obtained on the computer, resulting in inaccurate playback position after sliding. The reason is that the uploaded audio is compressed by me, so the duration obtained on the mobile phone is different from the normal one. Therefore, after the audio is compressed, its duration on the mobile phone will change (not on the computer). Pay attention to it later. If there is anything that can be used to compress the audio or get the normal duration method on the mobile phone, please tell me, haha.