Welcome, Guest. Please login or register.

Login with username, password and session length

Advanced search

1412057 Posts in 69447 Topics- by 58483 Members - Latest Member: Exye

June 23, 2024, 12:37:32 PM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsDeveloperTechnical (Moderator: ThemsAllTook)Javascript + AudioContext - Sound Quality issues (Crackling)
Pages: [1]
Author Topic: Javascript + AudioContext - Sound Quality issues (Crackling)  (Read 2325 times)
Level 0

View Profile
« on: November 21, 2022, 02:53:44 PM »

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:

const sound = {
    frequency: 110,
    attack: 0.02,
    duration: 0.02,
    rampDown: .2,      
    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
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

Thanks for your help.
Pages: [1]
Jump to:  

Theme orange-lt created by panic