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

Differences between applying addClass(undefined) and addClass(null)

Tips for removing the default hover and click effects from a Material-UI CardActionArea

Experimenting with an Angular Controller that invokes a service and receives a promise as a

Having trouble with obtaining real-time text translation using ngx translate/core in Angular 2 with Typescript

When entering a sub-URL into the browser address bar, the routes do not display as expected

Adjust the jQuery.animate function based on the specific value

The error message states: "An attempt was made to destructure a non-iterable object. In order for non-array objects to be iterable, they must have a [Symbol.iterator

What is the best method for converting input files into FormData?

What are the ideal scenarios for implementing React.Fragments?

Generate a CSV file using Javascript

Tips for including multiple JSON results into a single text box for auto-complete purposes

Creating numerous hash codes from a single data flow using Crypto in Node.js

Tips on how to retrieve the value of the second td in an HTML table when clicking on the first td utilizing jQuery

Tips for concealing the values within a selected dropdown list using jQuery

The asyncData function in Nuxt is throwing a surprise setTimeout (nuxt/no-timing-in-fetch-data)

What is the best way to convert a series of sentences into JSON format?

Error message: "The getJSON call is missing a semicolon before the statement."

I'm curious about the potential vulnerabilities that could arise from using a Secret key as configuration in an express-session

In JavaScript, when using the fetch function with JSON, it is possible to skip the

Puppeteer patiently waits for the keyboard.type function to complete typing a lengthy text