Our Simon games might be failing on Chrome

Our Simon games might be failing on Chrome
0.0 0

#1

@QuincyLarson
here is link to my simon to see how bad sound is now http://simonjohnl3.surge.sh/
Hi all being checking out my simon game and discovered the sound was failing on chrome where previously it worked … made a change to it and got i kind of working but sound is bad.

so started looking at other simon games made by freecode campers and found the same problem
generally we all used the same pattern eg var greenAudio = new Audio(‘https://s3.amazonaws.com/freecodecamp/simonSound1.mp3’);

then played sound like greenAudio.play()
For me this is not working on chrome … presuming will be the same for others. sound plays once (badly) then stops.
to get it working in better i dont use the global variable but declare the variable in the function where i then call play() … works but sound is bad …

One camper i found did his own sounds using different code name is @eirolfe his Simon game is here https://codepen.io/elrolfe/pen/qNbLYO?editors=1010

so I looking at doing mine similar … so had a look at his code and tried it out and will change it a bit as i just want the basic onclick of the colored panels not moueup an mousedown key presses he uses.
And was thinking maybe freecodecamp could look into the usage of play() method … it would be a pain to show my Simon game to a potential employer only for them to try it and sound not work if the try it on chrome … (works fine on firefox)

I will hopefully also look at the example given at bottom of this page and see if I can get it working https://developer.mozilla.org/en-US/docs/Web/API/AudioParam/setTargetAtTime

As for @eirolfe code i updated it a little to get rid of deprecation warnings … changes due in 2018 so helped me get a bit of a understanding of the code messing around with it and updating the warnings.
So when doing Simon game just check using the play() method or have a look at doing it different

updated code below // red/yellow/green/blue are just 4 buttons i threw on a page to test this

// commented code below is what i changed to remove deprecation warnings  
var audContext;
var tones = {
  red: {gain: null, oscillator: null},
  green: {gain: null, oscillator: null},
  yellow: {gain: null, oscillator: null},
  blue: {gain: null, oscillator: null}
};
function init() {
audContext = new window.AudioContext();

  tones.red.gain = audContext.createGain();
  tones.red.gain.gain.setTargetAtTime(0, audContext.currentTime + 0, 0.0)
  //tones.red.gain.gain.value = 0;
  tones.red.gain.connect(audContext.destination);

  tones.red.oscillator = audContext.createOscillator();
  tones.red.oscillator.type = "triangle";
  tones.red.oscillator.frequency.setValueAtTime(523.25, audContext.currentTime);
  //tones.red.oscillator.frequency.value = 523.25;
  tones.red.oscillator.connect(tones.red.gain);
  tones.red.oscillator.start();

  tones.green.gain = audContext.createGain();
  tones.green.gain.gain.setTargetAtTime(0, audContext.currentTime + 0, 0.0);
  //tones.green.gain.gain.value = 0;
  tones.green.gain.connect(audContext.destination);

  tones.green.oscillator = audContext.createOscillator();
  tones.green.oscillator.type = "triangle";
  tones.green.oscillator.frequency.setValueAtTime(329.63, audContext.currentTime);
  //tones.green.oscillator.frequency.value = 329.63;
  tones.green.oscillator.connect(tones.green.gain);
  tones.green.oscillator.start();
  
  tones.yellow.gain = audContext.createGain();
  tones.yellow.gain.gain.setTargetAtTime(0, audContext.currentTime + 0, 0.0);
  //tones.yellow.gain.gain.value = 0;
  tones.yellow.gain.connect(audContext.destination);

  tones.yellow.oscillator = audContext.createOscillator();
  tones.yellow.oscillator.type = "triangle";
  tones.yellow.oscillator.frequency.setValueAtTime(261.63, audContext.currentTime);
  //tones.yellow.oscillator.frequency.value = 261.63;
  tones.yellow.oscillator.connect(tones.yellow.gain);
  tones.yellow.oscillator.start();
  
  tones.blue.gain = audContext.createGain();
  tones.blue.gain.gain.setTargetAtTime(0, audContext.currentTime + 0, 0.0);
  //tones.blue.gain.gain.value = 0;
  tones.blue.gain.connect(audContext.destination);

  tones.blue.oscillator = audContext.createOscillator();
  tones.blue.oscillator.type = "triangle";
  tones.blue.oscillator.frequency.setValueAtTime(392.0, audContext.currentTime);
  //tones.blue.oscillator.frequency.value = 392.0;
  tones.blue.oscillator.connect(tones.blue.gain);
  tones.blue.oscillator.start();
}


let red = document.getElementById('red');
red.addEventListener('click', ()=> {
	playTone('red');
	});
	
let green = document.getElementById('green');
green.addEventListener('click', ()=> {
	playTone('green');
	});
	
let yellow = document.getElementById('yellow');
	yellow.addEventListener('click', ()=> {
	playTone('yellow');
	});
	
let blue = document.getElementById('blue');
	blue.addEventListener('click', ()=> {
	playTone('blue');
	});

//RUNNING INIT here	
init();

function playTone(color) {
	tones[color].gain.gain.setTargetAtTime(1, audContext.currentTime + 0, 0.5)
	//tones[color].gain.gain.value = 0.2;
		setTimeout(function(){
	tones[color].gain.gain.setTargetAtTime(0, audContext.currentTime + 0, 0.5)
	//tones[color].gain.gain.value = 0;
},500)
}

#2

Thanks for reporting this. Could you create a GitHub issue for this, and post these details in there? That way we can more easily reproduce it and address it.