Chords sounds awful in Chrome and Edge

[chr-bakk]

There is something wrong in the way chords are played, or even the same tone twice.
This happens in Chrome and Edge, but not Firefox.
Anybody else experiencing this?

[saurabhnemade]

For me it sounds same on chrome, firefox, brave on mac os ventura

[CorporateDrone]

I have the same experience, the gain needs to be adjusted to compensate for additional notes being added.

[mlim15]

You can use the DynamicsCompressorNode to avoid this problem, but it does lower the volume somewhat. Still, it sounds better than the clipping mess that seems to be the Chromium implementation's default behaviour here. Alternatively, you can change the gain array (VOLUME_CURVE) to use lower values so more notes can play at once before clipping, but this just pushes back the problem somewhat. You can replace the playSingleFrequency method with the code blocks below to try some fixes:

Use the compressor node:

let c = null;

// Plays single tones. Helperfunction for playChord and playTone, but can also be used by itself.
const playSingleFrequency = (
  frequency = 440,
  type = "sine",
  duration = 1.3
) => {
  o = context.createOscillator();
  g = context.createGain();
  o.connect(g);
  o.type = type;
  o.frequency.value = frequency;
  o.start(0);
  // Better fix: use the dynamics compressor API to limit clipping
  c = context.createDynamicsCompressor();
  c.threshold.setValueAtTime(-100, context.currentTime);
  c.knee.setValueAtTime(40, context.currentTime);
  c.ratio.setValueAtTime(20, context.currentTime);
  c.attack.setValueAtTime(0, context.currentTime);
  c.release.setValueAtTime(1, context.currentTime);
  g.connect(c);
  c.connect(context.destination);
  // Play note
  g.gain.setValueCurveAtTime(VOLUME_CURVE, context.currentTime, duration);
};

Lower the gain we use for each note so more simultaneous notes play before clipping:

const LOW_VOLUME_CURVE = VOLUME_CURVE.map(item => item/2.5);
const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');

// Plays single tones. Helperfunction for playChord and playTone, but can also be used by itself.
const playSingleFrequency = (
  frequency = 440,
  type = "sine",
  duration = 1.3
) => {
  o = context.createOscillator();
  g = context.createGain();
  o.connect(g);
  o.type = type;
  o.frequency.value = frequency;
  o.start(0);
  // Dirty hack fix: just use lower gain on each individual note so more can play before clipping
  g.connect(context.destination);
  if (isFirefox) {
    // The original code
    g.gain.setValueCurveAtTime(VOLUME_CURVE, context.currentTime, duration);
  } else {
    // Use lower gain for other browsers
    g.gain.setValueCurveAtTime(LOW_VOLUME_CURVE, context.currentTime, duration);
  }
};