Article From:

7-11 Player playback time acquisition and update There is a ontimeupdate event triggering at any time.

  vueInside is the @timeupdate e event with default parameters, dom.

2. audio An attribute currentTime indicates that the current playtime can also be assigned to change the current position.

3. Math.floor

  The calculation time rubbed for several seconds


        interval = interval | 0 //Or 0 is equivalent to downloading Math.floor
        const minute = interval / 60 |0
        const second = (interval % 60) < 10? ‘0’+  (interval % 60):  (interval % 60); // When < 10 needs to be zero
        return `${minute}:${second}`
7-12 The implementation of the player progress-bar progress bar component (top)
  The progress bar component is introduced in player.vue to pass the percentage to the progress bar component through the variable this.currentTime (computed) in the playback and then the progress bar can pass the progress bar client long.Degree * percentage gets offset
  The offset can monitor the progress of the song, and set the offset buttons to follow the offset.

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



Link of this Article: Music App notes

Leave a Reply

Your email address will not be published. Required fields are marked *