Wavesurfer.js: toggleMute() is not return audio.

[iagosilvamelo]

Good afternoon, how are you?
i'm development a audio player but the toggleMute() is muted audio and is not return audio.

This is my code:

$("#playerMute").click( e => {
    e.target.classList.toggle('active');
    wavesurfer.toggleMute();
});

Thanks for your attention.

[thijstriemstra]

@iagosilvamelo what is the wavesurfer.js configuration you are using?

and is not return audio.

what do you mean?

[iagosilvamelo]

Helo @thijstriemstra.
This is my wavesurfer instance:

const wavesurfer = WaveSurfer.create({
    container: document.querySelector('#waveform'),
    waveColor: '#0E8F84',
    progressColor: '#23514C',
    backend: 'MediaElement',
    hideScrollbar: true,
    normalize: true,
    plugins: [
        WaveSurfer.cursor.create({
            showTime: true,
            opacity: 0.6,
            customShowTimeStyle: {
                'background-color': '#000',
                color: '#fff',
                padding: '2px',
                'font-size': '12px'
            }
        })
     ]
});

When activating the function toggleMute() on click button, the audio is muted, this is ok. With audio muted when activating the function toggleMute() on click button, mute is not disabled.

I tried with setMute(true) and false and setMute(1) and 0. It didn't work either.

Sorry my english, hehehe.

[thijstriemstra]

what version of wavesurfer.js?

[iagosilvamelo]

3.0.0

[aburai]

i can reproduce this in v3. when i use toggleMute the volume was not restored and stays on 0
i will investigate and create a PR when i found a solution

[iagosilvamelo]

I ended up doing like this:

setVol(e) {
        this.volume = e.target.value;
        this.player.setVolume(e.target.value);
},
mute() {
        this.player.setVolume(0);
        $("#playerVolume").val(0)
},
desmute() {
        this.player.setVolume(this.volume);
        $("#playerVolume").val(this.volume)
},

I'm not using mute.

[aburai]

i think it depends on this change for backend MediaElement

        // only needed for MediaElement backend
        if (this.params.backend === 'MediaElement') {
            this.backend.on('seek', () => {
                this.drawer.progress(this.backend.getPlayedPercents());
            });

            this.backend.on('volume', () => {
                let newVolume = this.getVolume();
                this.fireEvent('volume', newVolume);

                if (this.backend.isMuted !== this.isMuted) {
                    this.isMuted = this.backend.isMuted;
                    this.fireEvent('mute', this.isMuted);
                }
            });
        }

[thijstriemstra]

so this is a bug @aburai?

[aburai]

i think so, but i can test this only in my configuration
i have removed this part and it works for me, maybe someone else can check this

                if (this.backend.isMuted !== this.isMuted) {
                    this.isMuted = this.backend.isMuted;
                    this.fireEvent('mute', this.isMuted);
                }

[adjkldd]

emmm. I get the same problem. In a word, one toggleMute, two mute event happen. And somehow the second 'mute' event set isMuted to false. Below is the reproducing link.

https://codepen.io/ldd/pen/vYBwPXz

[aburai]

@adjkldd can you check, if my change fixes your problem?
if you don't want to clone, edit, build and link the main repo,
you can temporary install my fork and test.
set "wavesurfer.js": "https://github.com/aburai/wavesurfer.js.git" in your package.json
If it works for you, we / i can create a pull request.

[thijstriemstra]

we can add you to the repository collaborators/team @aburai cc @katspaugh

[aburai]

I would gladly do anything to help.

[katspaugh]

Cool, added! Wilkommen im Team, André! 🙂

[aburai]

Danke.

[adjkldd]

@adjkldd can you check, if my change fixes your problem?
if you don't want to clone, edit, build and link the main repo,
you can temporary install my fork and test.
set "wavesurfer.js": "https://github.com/aburai/wavesurfer.js.git" in your package.json
If it works for you, we / i can create a pull request.

It indeed fixes my problem after I comment the code.

if (this.backend.isMuted !== this.isMuted) {
    this.isMuted = this.backend.isMuted;
    this.fireEvent('mute', this.isMuted);
}