[Vuejs]-Can't get audio to mute using vue audio player

by

0👍

✅

In your example you already have a reference this.audioPlayer to control the mute state of the player.

Therefore your method could look something like this:

methods: {
    mute() {
      this.audioPlayer.muted = !this.audioPlayer.muted
    }
}

Please note – this is the way Vue recommends you to add something like click listeners to your HTML (see Vue docs). You should probably not use addEventListener for such a task.

I added a simple mute button next to the play button:
https://codepen.io/anon/pen/MLxOyj?editors=1111

Another short hint for your example:
You set this.audioPlayer like this:

mounted () {
    this.audioPlayer = this.$el.querySelectorAll("audio")[0];
}

vue.js provides a cleaner way to reference elements:

<audio src="my.mp3" ref="myAudio"></audio>

mounted () {
    this.audioPlayer = this.$refs.myAudio;
}

Leave a comment