0

Using Web Audio, I generated a sound, but it sounds really bad (vibration). If I use very low gain, then it's better, but too quiet. Same as using low pass filter with very low value. What's the correct way to play multiple frequencies in a same time?

You can see that clicking "Play 1" button would work fine for an "A" note. Play 2 button would work for a "C" note. "Play both" button would sound very bad when both are played in a same time.

<html>
    <head>
        <title>Audio</title>
        <script>

            var context = null;
            var oscillatorNode1 = null;
            var oscillatorNode2 = null;

            function stop() {
                if ( oscillatorNode1 != null ) {
                    oscillatorNode1.stop(context.currentTime);
                    oscillatorNode1 = null;
                }
                if ( oscillatorNode2 != null ) {
                    oscillatorNode2.stop(context.currentTime);
                    oscillatorNode2 = null;
                }
            }

            function play1() {
                stop();
                if ( context === null) {
                    context = new AudioContext();
                }
                oscillatorNode1 = context.createOscillator();
                oscillatorNode1.type = 'sine';
                oscillatorNode1.frequency.value = 220;

                oscillatorNode1.connect(context.destination);
                oscillatorNode1.start();

                oscillatorNode2 = context.createOscillator();
                oscillatorNode2.type = 'sine';
                oscillatorNode2.frequency.value = 261.6255653005986;

                oscillatorNode2.connect(context.destination);
                oscillatorNode2.start();
            }

            function play2() {
                stop();
                if ( context === null) {
                    context = new AudioContext();
                }
                oscillatorNode1 = context.createOscillator();
                oscillatorNode1.type = 'sine';
                oscillatorNode1.frequency.value = 220;

                oscillatorNode1.connect(context.destination);
                oscillatorNode1.start();

            }

            function play3() {
                stop();
                if ( context === null) {
                    context = new AudioContext();
                }

                oscillatorNode2 = context.createOscillator();
                oscillatorNode2.type = 'sine';
                oscillatorNode2.frequency.value = 261.6255653005986;

                oscillatorNode2.connect(context.destination);
                oscillatorNode2.start();
            }

        </script>
    </head>
    <body>
        <form>
            <input type="button" onclick="play1()" value="Play both" />
            <input type="button" onclick="play2()" value="Play 1" />
            <input type="button" onclick="play3()" value="Play 2" />
            <input type="button" onclick="stop()" value="Stop" />
        </form>
    </body>
</html>
1
  • Try playing those notes on a piano. They are both low. Low notes close together are pretty bumpy. Dec 16, 2019 at 6:43

3 Answers 3

2

Using the "stereo" concept I mentioned above, I use context.createChannelMerger, then connect each sine wave to each output channel and it works pretty well. It seems to work better on one pair of speakers than another. It doesn't work that well on phone. However, adding gain to it make it very good on all speakers and phone I tested so far. I still wish to have a good solution on merging these that makes it sound like real air merge.

I also just tried pasting the updated code into the Canopy, but it didn't sound good. One reason is that the audio context was already created and creating a new one works good. So the existing one doesn't work well on that Canopy page.

                context = new AudioContext();
                oscillatorNode1 = context.createOscillator();
                oscillatorNode1.type = 'sine';
                oscillatorNode1.frequency.value = 220;

                var merger = context.createChannelMerger(2);
                merger.connect(context.destination);

                oscillatorNode1.connect(merger, 0, 0);
                oscillatorNode1.start();

                oscillatorNode2 = context.createOscillator();
                oscillatorNode2.type = 'sine';
                oscillatorNode2.frequency.value = 261.6255653005986;

                oscillatorNode2.connect(merger, 0, 1);
                oscillatorNode2.start();
0

I guess the vibration that you describe is caused by the clipping. When two oscillators are playing at the same time that may result in values of +2 or -2 respectively. You can see it visually when pasting the following snippet into the editor of Canopy.

const osc1 = new OscillatorNode(context, { frequency: 261.6 });
const osc2 = new OscillatorNode(context, { frequency: 222 });

osc1.connect(context.destination);
osc2.connect(context.destination);

osc1.start();
osc2.start();

You can avoid this by adding a GainNode with a value of 0.5. However the combined signal will be perceived a little more silent as the pure tones. That's because the pure tones constantly alternate between +1 and -1 whereas the combined tone is not always reaching the extreme values.

After adding a GainNode the core part of your play1() function looks somehow like this:

oscillatorNode1 = context.createOscillator();
oscillatorNode1.frequency.value = 220;

oscillatorNode2 = context.createOscillator();
oscillatorNode2.frequency.value = 261.6255653005986;

gainNode = context.createGain();
gainNode.gain.value = 0.5;

oscillatorNode1.connect(gainNode);
oscillatorNode2.connect(gainNode);
gainNode.connect(context.destination);

oscillatorNode1.start();
oscillatorNode2.start();
9
  • I mentioned above that adding low gain would help, but doesn't fix it. Your gain sample code also didn't fix it, it helps. Adding low pass filter with very low values appears to work, but very quiet, so basically it's a very small gain. Thank you for helping though.
    – vdu
    Dec 16, 2019 at 0:34
  • Create a gain node for each oscillator. Dec 16, 2019 at 1:49
  • @vdu In that case I misunderstood the question. I thought you might have used a gain value higher than 0.5 since you said it results in a very silent signal. If a low pass filter helps, I guess what you describe as vibrations are just the artifacts caused by overlaying two sine waves. I'm not sure what ultimately helps to solve that. That's highly subjective. If you want to preserve the sound of a pure tone you can just play one oscillator at the frequency between the other two tones instead of overlaying two oscillators. Dec 16, 2019 at 8:06
  • @MikeHelland Both approaches should sound the same. There is no internal clipping in the Web Audio API. At least not as long as the numbers stay in the range representable with JavaScript. :-) Dec 16, 2019 at 8:08
  • @chrisguttandin in experimenting with the effect of overlaying two sine waves, I opened two browser windows with my test above. I then play 1 sound on each and the result is the same. I tried with Chrome and Firefox for each, and same result. However, when playing 1 sound (Play 1) on the computer, and another (Play 2)on my phone's speaker phone, and changing the volume on both to match, the sound is ok. You can easily hear the sound I described by pasting the code to the above Canopy link to see what I described. So now, it seems to me that computer just don't mix sound as air does.
    – vdu
    Dec 16, 2019 at 16:12
0

This has a lot to do with digital audio and audio engineering.

You definitely want to take the volumes down. Consider panning different sounds: putting less work on the individual speakers makes a clearer sound.

I've used literally dozens of oscillators at the same time. This app I made let's you go hog wild. Here's an example of two oscillators:

https://openmusic.gallery/play/1601

5
  • I am not quite sure why the volume needs to be down since the combined volume is not loud to start with.
    – vdu
    Dec 16, 2019 at 0:35
  • You create two oscillators and play them, they're both at 100% volume (by default). So you get 200% volume. Turn them down to 33% and you'll hear them without clipping. Dec 16, 2019 at 1:29
  • Make sure you're using 2 gain nodes, one for each oscillator. If you're connecting both oscillators to a single gain node and then turning it down, the signal has already clipped. Dec 16, 2019 at 1:30
  • Thank you for the suggestion, but lower the gain doesn't help, unless it's barely audible, which doesn't make any sense . Two gains or one for both resulted the same.
    – vdu
    Dec 16, 2019 at 2:00
  • Sine waves are inherently quiet at low and mid frequencies. Try some high notes. Or try a Sawtooth wave. Go to openmusic.gallery/gauntlet and "Add Part". Create any amounts of oscillator. Go to the "mix" panel, see how the volumes effect things. Dec 16, 2019 at 2:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.