AudioContext gain Node does not mute audio source (Web Audio API)

Question

I have some music visualizations I made with three.js and the Web Audio API, and I'm having issues muting the audio.

I currently have an AudioContext object with an analyzer and source buffer. I'm working on adding a gain node to mute the audio, which is not currently working. When I click mute, the audio level changes (it actually gets louder), so I know the gain is affecting something.

Code:

// AudioHelper class constructor

function AudioHelper() {
    this.javascriptNode;
    this.audioContext;
    this.sourceBuffer;
    this.analyser;
    this.gainNode;
    this.isMuted;
}

// Initialize context, analyzer etc

AudioHelper.prototype.setupAudioProcessing = function () {
    // Get audio context
    this.audioContext = new AudioContext();

    this.isMuted = false;

    // Create JS node
    this.javascriptNode = this.audioContext.createScriptProcessor(2048, 1, 1);
    this.javascriptNode.connect(this.audioContext.destination);

    // Create Source buffer
    this.sourceBuffer = this.audioContext.createBufferSource();

    // Create analyser node
    this.analyser = this.audioContext.createAnalyser();
    this.analyser.smoothingTimeConstant = 0.3;
    this.analyser.fftSize = 512;

    this.gainNode = this.audioContext.createGain();

    this.sourceBuffer.connect(this.analyser);
    this.analyser.connect(this.javascriptNode);
    this.sourceBuffer.connect(this.audioContext.destination);

    this.sourceBuffer.connect(this.gainNode);
    this.gainNode.connect(this.audioContext.destination);

    this.gainNode.gain.value = 0;
};


// This starts my audio processing (all this and the analyzer works)

AudioHelper.prototype.start = function (buffer) {
    this.audioContext.decodeAudioData(buffer, decodeAudioDataSuccess, decodeAudioDataFailed);
    var that = this;

    function decodeAudioDataSuccess(decodedBuffer) {
        that.sourceBuffer.buffer = decodedBuffer
        that.sourceBuffer.start(0);
    }

    function decodeAudioDataFailed() {
        debugger
    }
};

// Muting function (what isn't working)
AudioHelper.prototype.toggleSound = function() {
    if(!this.isMuted) {
        this.gainNode.gain.value = 0;
    } else {
        this.gainNode.gain.value = 1;
    }
    this.isMuted = !this.isMuted;
}

Any ideas as to whether I'm setting up the gain node incorrectly? Is there a better way to mute audio?

Thank you!

Answer 1

The problem is you're still connecting the buffersource directly to the destination as well as connecting it through the gain node - so you've effectively got two patch cables from source buffer to destination (one through the gain node). You should delete the following line:

this.sourceBuffer.connect(this.audioContext.destination);

as well as this line (because you want it to start out not muted):

this.gainNode.gain.value = 0;

and I think you'll get the behavior you expect.

Answer 2

I had the same issue, and I solved it passing the 0 gain value as a string, like

this.gainNode.gain.value = "0";

its really weird and I don't know why it worked like that.

all that in adition to cwilso's answer