Search code examples
htmlweb-audio-api

Web audio stereo panner not working correctly if the volume is greater than 0

I'm creating angular app with custom web audio player.
I've created 2 sliders - 1 to control the volume and one to control the stereoPan (L R channels).
The problem is that if the volume is not set to 0 the panning is not disabling (when it supposed to disable) on of the channels.
For example if the volume = 0.5 and pan = -1 then only the left channel is supposed to produce sound BUT no - both channels are working (right is weaker than the left one but its still producing sound) ... when the volume = 0 everything works ok...
This is how I'm creating the volume and pan nodes 

        $scope.AudioBufferSource.buffer = AudioBuffer;

        $scope.AudioStereoPannerNode = $scope.AudioContext.createStereoPanner();
        $scope.AudioGainerNode = $scope.AudioContext.createGain();

        $scope.AudioBufferSource.connect($scope.AudioStereoPannerNode);
        $scope.AudioBufferSource.connect($scope.AudioGainerNode);

        $scope.AudioStereoPannerNode.connect($scope.AudioContext.destination);
        $scope.AudioGainerNode.connect($scope.AudioContext.destination);
Solution

  • You've created your graph incorrectly. You have the output of both the gain node and the panner node connected to the destination. Hence, you'll always hear something from the gain node (on both channels) unless the gain is 0 and something from the panner.

    You probably wanted to connect the panner to the gain to the destination (or vice versa).