is writing a vue audio component. The audio progress bar will be displayed in the style. When playing, the progress bar will scroll forward smoothly. When the user clicks pause, it will pause the progress bar and click the continue progress bar to continue until the playback is complete.
1.css transition animation implementation scheme. Using the transition implementation, when there is only one audio component, there is no problem, but when there is more than one audio on a page, the transition state will have problems in the pause / playback state of multiple audio components, the browser will save only one component sample transition is correct, other audio tansition will have conflict problems, can be understood as the browser mechanism bug.
2. Use timers to animate. If the audio duration is 4s, but the entire audio progress bar is 100px, then the animation implemented by js will be more stuttered, not as smooth as css, and the experience is not very good.
whether there is a better way to implement it, consider using vue transition, but mobile phone compatibility is a problem, especially phones with Android 4.4 and below are seriously stuttered.