Javascript + AudioContext - Sound Quality issues (Crackling)

Hi all,

I'm a hobbyist. I've developed a web-based game and I'm having beginner's issues with sound quality.
(https://symzzle.com for some live examples of the quirks detailed below.)

I've designed some very simple sounds to provide user feedback for tap, select, lift, etc...
The sounds are all pure frequencies, or sequences of pure frequencies.
Unfortunately, I have the following problems:
   • The tones have a tendency to crackle.
   • The sound is inconsistent across devices - some speakers render them worse than others.
   • The sound is inconsistent from one click to the next: each click sounds slightly different with more of less crackling.
   • The crackling is quite noticeable above 0.5 volume gain.
   • There are interferences when the game wants to play two overlapping sounds .

I have some guesses about the issues, but I don't know the right way to fix them.
   • My frequencies are low compared to the play time (110hz at 0.02 sec is about two wavelengths)
   • The slow triangular wave-shape cause hardware artifacts (though it is not better with a smoother sine) as opposed to more complex high frequencies which may be easier to generate.

I hoped that by ramping up and down the volume I could minimise the artifacts, but that is not the case.
   • Am I using the AudioContext and Oscillator incorrectly?
   • Is there a light-weight way to replace the simple waves with better sounding alternatives?

Any advice or link to a good tutorial would be greatly appreciated.

My code:

Code:

const sound = {
   frequency: 110,
   attack: 0.02,
   duration: 0.02,
   rampDown: .2,
   shape:'triangle',
   volume: .9,
}

//Setup the AudioContext
const audioContext = new AudioContext()
//Create the Oscillator
const osc = audioContext.createOscillator()
osc.type = sound.shape
osc.frequency.value = sound.frequency

//Play time
const startTime = audioContext.currentTime
const endOfAttack = startTime + sound.attack
const endOfPlateau = startTime + sound.attack + sound.duration
const endOfRamp = startTime + sound.attack + sound.duration + sound.rampDown

//SOUND ENVELOPE:
const sweepEnv = audioContext.createGain()
// Start at 0 volume
sweepEnv.gain.setValueAtTime(0, startTime)
// Set the attack to gradually ramp up the volume
sweepEnv.gain.linearRampToValueAtTime(sound.volume , endOfAttack)
// Plateau at a steady volume
sweepEnv.gain.setValueAtTime(sound.volume , endOfPlateau)
// Ramp down the sound
sweepEnv.gain.linearRampToValueAtTime(0, endOfRamp);

//Now play the sound
osc.connect(sweepEnv).connect(audioContext.destination)
osc.start(startTime)
osc.stop(endOfRamp)

Thanks for your help.