Introduction to h5 custom audio (problem and solution) and h5audio

Introduction to h5 custom audio (problem and solution) and h5audio

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

Html

Copy XML/HTML Code to clipboard

1. <! -- Cur indicates the current time. max indicates the total duration. 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

Copy the content to the clipboard using CSS Code.

1. /* Progress bar */
2. . Range {
3. Width: 5.875rem;
4. Height: 0.15rem;
5. Background: #22.16e4;
6. Border-radius: 0.25rem;
7. -Webkit-appearance: none! Important;
8. Position: absolute;
9. Top: 3.55rem;
10. Left: 6rem;
11. }
12. /* Progress slider */
13. . Range:-webkit-slider-thumb {
14. Width: 0.5rem;
15. Height: 0.5rem;
16. Background: # fff;
17. Border: 1px solid # f18900;
18. Cursor: pointer;
19. Border-radius: 0.25rem;
20. -Webkit-appearance: none! Important;
21. }

Js

Copy the content to the clipboard using JavaScript Code

1. // Convert seconds to 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. Metrics ('.max'0000.html (timeToStr (751 ));
22. $ (". Range"). val (t );
23. $ ('. Cur'). text (timeToStr (t ));
24. },1000 );
25. });
26. // Listen to the slider, which can be dragged
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.

The h5 custom audio (Problem and Solution) is a part of the Content shared by Alibaba Cloud. I hope you can give us a reference and support for our guests.