[Vuejs]-How can I play/pause a randomized mp3-file in vue?

by

0👍

you need to stop the playing file before starting a new one.

One solution to achieve this could be a pauseAll method:

pauseAll() {
  this.audios.filter(audioItem=>audioItem.isPlaying).forEach(filteredAudioItem=>{
          filteredAudioItem.isPlaying = false;
          filteredAudioItem.loop = false;
          filteredAudioItem.file.pause();
        })
},

I created a jsfiddle.net for you:
https://jsfiddle.net/2n4y6xhb/

0👍

I got the answer in the vue-forum. Problem was the reference of the play and pause functions in the button. Adding a toggle-function with .this.play/pause did the trick:

toggle () {
      return this.activeAudio.isPlaying ? this.pause() : this.play()
    },

<button v-if="activeAudio" class="btn btn-primary btn-sm"  
@click.prevent="toggle">
{{ activeAudio.isPlaying ? 'Pause' : 'Play' }}
</button>

Also set v-if to bypass the button complaining about “activeAudio” being null if there hasn’t been a randomize-click/file call yet. Thank you sherlockmac again for the solution .

Leave a comment