Hello campers! I just finished the Simon game, which leaves me with two more projects for my front-end certificate (Twitch.tv and Tic Tac Toe). I would love some feedback, and if someone managed to find bugs, I would like to try and fix it. In my testing, it seems to work fine though.
One issue I’ve noticed on mobile is that the sounds don’t load immediately and only do so after the button is clicked multiple times. Is there a way to pre-load the sound? Is it worth doing so? Perhaps this is also an issue with PCs other than mine, so please test this, and if you know a solution, I would love your help.
Here’s the project: https://codepen.io/imtoobose/full/KMgvBX
This is not an easy issue to deal with, and it’s the thing I let slide about my Simon game because I just couldn’t deal with it at the time. I’ve done more research since then, and I think I have a solution now. There’s two parts to this: 1) Getting the audio to play on all browsers without delay, and 2) getting iOS to preload the audio file.
Here’s the solution I’ll be trying. Basically, we want to combine all of the sounds into one file, and then assign a section of that sound file to the variable we want. So, the combined sound file may be 2 seconds long, but for the red button, we only want the sound from 0.8 to 1.3 seconds. This lets us preload one sound for everything in the app, which is accomplished with the .load() function of any audio object.
var audioFile = new Audio(urlToAudioFile);
audioFile.load()
The same link describes a hack for getting the file to preload on iOS, which is a challenge because mobile Safari only allows one audio stream at a time. I’m looking into whether this is still the case (the link is almost 4 years old) and if Android has the same limitation.
Awesome design, by the way.
1 Like
Is there a significant disadvantage if you audio.load() these files separately? Loading one will obviously be more efficient, but I believe you only load a file once so it shouldn’t be that big an issue? I wasn’t aware of the load function and loaded my audio files this time.
Regardless thank you for taking the time to respond, and for the compliment on the design 
On desktop, there is no issue with multiple files other than your browser has to make n-1 extra calls, but on iOS (and possibly Android), there can only be one audio object at any time. This means it’s re-loading the audio file each time you call it and introducing a delay. So, I guess the only disadvantage is that it can’t possibly work on most mobile devices 
