7-11 Player playback time acquisition and update
1.audio There is a ontimeupdate event triggering at any time.
vueInside is the @timeupdate e event with default parameters, e.target dom.
2. audio An attribute currentTime indicates that the current playtime can also be assigned to change the current position.
The calculation time rubbed for several seconds
7-12 Player progress-bar progress bar component implementation (middle)
What is worth paying attention to
When you slide button, you need prefix variables to determine whether the current clicks are on button. If not, the button will not be executed.This condition can be shielded from the above monitoring One is automatic one is manual
touchend The middle prefix variable needs to reset the touch bar to locate the scroll bar length. As for the synchronization of the audio progress, percentChange will be sent.
touchendIn the event, we send a percentage of the percentChange event by the slider to send a percentage value to the player.vue by the total length * percentage assignment to the audio’s currentTime attribute
7-12 The implementation of the player progress-bar progress bar component (below)
Click progress bar background
Summary: the percentage of incoming progress-bar.vue from player.vue is the current duration / total time (auto offset).
Incoming player.vue from progress-bar.vue is the current offset / total length percentage (manual offset).
Then we can return to the percentage of progress-bar.vue (automatic offset) again if you listen to the current length of player.vue.
To prohibit automatic offset during dragging progress bar