Having trouble muting the audio on my Vue audio player

Question

Having trouble muting the audio on my Vue audio player

I'm facing some challenges with muting the audio within my vue app. I have a list of songs that can be played, paused, shuffled, etc., but I can't seem to get the mute function working. Here's what I have in the JavaScript:

mute()
            {
            if (this.muted) {
                return this.volume = this.previousVolume;
            }

            this.previousVolume = this.volume;
            this.volume = 0;
        },

And here is the computed method:

muted() {
        return this.volume / 100 === 0;
}

I've attempted adding the following:

mutebtn = document.getElementById ("mutebtn")
              mutebtn.addEventListener ("click", mute());

In the music player, I have:

<div id="mutebtn">
                  <i class="icon ion-ios-volume-high" title="Mute" v-if="volume" @click="mute()"></i>
                  <i class="icon ion-ios-volume-off" title="Unmute" v-if="muted" @click="volume"></i>
              </div>

This is my initial attempt at creating a music player, and as someone new to this, I'm getting a bit overwhelmed by the JavaScript aspect. Any assistance would be greatly appreciated!

javascript vue.js html5-audio

Answer 1

Answer №1

If you already have a reference to control the mute state of the player like this.audioPlayer in your example, you can create a method like this:

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

It's recommended by Vue not to use addEventListener for adding click listeners to HTML. Instead, follow Vue's guidelines (check out Vue docs).

I included a simple mute button beside the play button in this CodePen example: https://codepen.io/anon/pen/MLxOyj?editors=1111

In your case, setting this.audioPlayer is done like this:

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

VUE.js offers a cleaner way to reference elements:

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

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

Answer 2

If you already have a reference to control the mute state of the player like this.audioPlayer in your example, you can create a method like this:

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

It's recommended by Vue not to use addEventListener for adding click listeners to HTML. Instead, follow Vue's guidelines (check out Vue docs).

I included a simple mute button beside the play button in this CodePen example: https://codepen.io/anon/pen/MLxOyj?editors=1111

In your case, setting this.audioPlayer is done like this:

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

VUE.js offers a cleaner way to reference elements:

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

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

Having trouble muting the audio on my Vue audio player

Answer №1

Similar questions

How to trigger an update of the useEffect() hook when a button is clicked

Performing a mass update in MongoDB with the help of mongoose

JavaScript ACTING UP -> CROSS-ORIGIN RESOURCE ACCESS ERROR

What is the best way to create a select box in React that allows for both single and multiple selections?

Unable to retrieve basic profile data from LinkedIn Members using their email ID unless they are signed in

Having trouble dynamically adding HTML elements in JQuery

What is the best way to display pages with different states in ExpressJS?

Is it possible to halt the set timeout function in an AJAX call once a specific condition has been satisfied?

Unable to start store from localStorage during App initialization

What is the best way to create a continuous typewriter effect in Next.js?

Display all the names of the files from various file inputs in a unified notification

Substituting ng-init with scope variables results in failure

Automatically select all options in MUI Autocomplete by default

"The text() or json() methods in Javascript's fetch function never seem to resolve, leaving the operation in a perpetual

Issue with Jquery UI draggable positioning in a specific Reveal.js slide

Exploring the world of typescript with the power of ts-check

Create an asynchronous method within an object-oriented programming (OOP) class

What is the best way to connect a VueJS event to a C# razor input field?

What are some ways to make autorun compatible with runInAction in mobx?

Looking for guidance on configuring an email composer in a PhoneGap application