Can someone direct me to a source of information about decent-sounding frequencies I can use with AudioContext for Simon?
I know that I can just look at the source code for the example project, but I’ll keep the sounds I have now rather than just copy and paste.
Incidentally, I didn’t decide to use Web Audio API based on that example. I just didn’t like the implementation using MP3s and there weren’t enough sounds provided anyway. The game needs 5 sounds (including the buzz sound used when you lose), but the challenge only provided 4 MP3s. So, I did a search for “javascript generate audio”.
So, I don’t know much about the Web Audio API yet, but I do know synthesizers and sound design. Here are my thoughts:
The notes in the original Simon game are (from low to hight) E, A, C#, E. I would start at the E just below middle C. In equal temperament, the root frequencies will be 164.81hz, 220.00hz, 277.18hz, and 329.63hz. You don’t have to use those notes, but I would be cautious about going above 1kz. For reference, censorship bleeps - you know, when you’re watching Reality TV Show #9715 and two of the stars fight over a hot dog and you are prevented from hearing their eloquent verbal sparring (“I’ll ****ing thunder punch you right in the ****box you **** **** *******!”) because something something FCC - those bleeps are 1kz sine wave blasts. Most pleasing sounds are below that frequency. On the flip side, stick to sounds above 100hz because laptop speakers are garbage and low sounds get lost in noise much more easily.
Do not use sine waves for this. My first inclination is to try filtering a square wave, but that may not be possible in the Web Audio API, so go with a triangle wave. Sine waves sound like 60’s sci-fi cheese or a 5 year old attacking a Theremin. Again, reference the censorship bleep.
If you can - and again, I know not if you can - really crank down the sample and bit rates. 8bit, 12khz would be where I start. Downsampling won’t sound the same, but I doubt the browser will let you change the sample rate as this is generally controlled at a much lower level.
The original Simon sounds have some amplitude modulation going on, which gives it a nice tremolo effect. It’s not as sharp as a pulse wave modulation, but not as wobbly as a sine or triangle wave. My bet is some sort of clipped sine-ish wave. This comes to mind:
Much of the character of Simon’s sounds are not in the frequencies or settings you use, but in the hardware itself. It’s an old, old game, and the DSP was crude. I would be surprised if it was capable of 8-bit sound. Those chips all had their own je ne sais quoi, too, beause generating ideal waveforms makes for very boring sounds, so they all had their subtle uniqueness imparted by the engineers. The speakers were cheap. It resonated in a plastic shell. So, sounding like Simon via the browser API will probably not work.
There’s a lot to think about when synthesizing sounds. I used to charge a lot of money for it. I would love to suggest that you just use Loopback to record the YouTube audio, but Milton Bradley frowns upon such threats to its intellectual property rights and I’m already on Santa’s **** list for 2017, so I really shouldn’t compel you to flagrant moral transgressions. A better suggestion may be to check out FreeSound for some copyleft licensed sounds you can use. You don’t need musical tones, so think outside the box. Maybe the world needs a cat-themed Simon clone. Maybe use whip cracks and screams so your players are more motivated. Maybe use ,oh, I don’t know… zipper sounds.
Thank you very much for the detailed reply. I have to admit that some of it went over my head and I’ll have to read through it a couple of times to understand everything.
Although there is a AudioContext.sampleRate property (AudioContext Properties), it’s read-only and can’t be changed. I couldn’t find anything related to the bit rate.
Now I have some work to do. I’m going to try the frequencies you recommended and at least take a look at that sample rate. Then there’s the logic of the actual game that I haven’t even started on yet.
I already considered using pre-recorded sound files like the few provided in the challenge requirements. I found freesound.org before posting and I actually don’t have any concern with using copyrighted / trademarked sounds for such a small project, but there are a couple of things I don’t like about that approach. I don’t have a place to host the files and can’t link to them directly. I don’t know how to loop them while the user is “pressing” the button or cut them off as soon as the user is done. In order for recorded audio to sound okay, I’d have to modify the sounds so that they tile well. I know “tile” isn’t the right word, but I don’t know how else to describe it.
I used the numbers you suggested for the sounds and it’s perfect. Out of curiosity, I also logged the AudioContext.sampleRate and found that it was 44100. This directly reflects the setting I’ve used in my sound card settings. I tested this by changing it to 192000 and reloading the page and the change was logged to the console.
When I tried using the Wikipedia reference, I was looking at the right table, but choosing the wrong octave. How do you know which one is the right note? Is that just based on your experience, or did I miss something?
I’m surprised that the Simon Wiki at waitingforfriday.com was so far off. When I read about how they tested it, it seemed so precise and I figured the Wikipedia page was wrong.
I went off almost two decades of musicianship and sound design. Trial and error also works. I don’t think you missed anything.
I didn’t look at that site until just now, and I don’t think they’re wrong. According to Wikipedia, the re-release of Simon uses different notes. Also, WaitingForFriday mentioned using Pocket Simon for one of their tests.
“loop” is the word you’re looking for (“one shot” is the converse), and it can be quite difficult to do right. I’ll have to actually dig into the WebAudio API sometime, but if there’s a way to set a release envelope separate from the decay, I’d be much more optimistic about looping sounds well. The stock Simon sounds are very distinctly ON-OFF (not much attack or release in the envelopes), which works in our favor here.
Do this. If you write your program well, you’ll be able to change the sound source later on without affecting your logic at all. This will be good practice for designing such modularized code. Don’t worry about understanding much of my post. Sound synthesis is a rabbit hole, and I imagine you’ve got a goal of being hired for web development sometime in the future.
I finally finished. Although a lot of the delay in finishing this was due to events in my life that are outside of my control, this was still a very difficult challenge for me. I seem to have a lot of difficulty conceiving of anything that uses a recursive algorithm. I didn’t really figure it out myself, either. There are some fine folks at Stack Overflow who helped me figure it out. There were a couple of times I had to take a break for a day or so before I could work out what needed to happen.
If you’d like to see my implementation, it’s at CodePen. There are some parts of the code that I know are sloppy, but cleaning it up would be a separate and time-consuming challenge… I’m ready to move on.
There are some parts of my implementation that I’m particularly happy with. For example, my version doesn’t use any images and works in any size window. I don’t seem to have as much difficulty with advanced CSS as I do with advanced algorithms.
Unfortunately, being hired for a web development job may be more of a dream than a goal for me. I won’t say it’s impossible, but I have some ongoing health issues that have kept me out of the work force for nearly a decade and there are almost no jobs in this field where I live (Kota Kinabalu, Sabah, Malaysia). I’ll keep trying anyway
I used the Web Audio API too on my Simon Game, and it turned out pretty well https://codepen.io/mlampert/full/JyOqEa/. The one thing I can’t figure out is how to test whether or not a gainNode or oscillatorNode is already connected to the Audio Content.
This was a problem for two reasons: 1) I didn’t want to make it possible for the user to press and play two buttons at once, so it would be great to check if an oscillatorNode is already connected to a gainNode, and 2) If I want to make sure that all oscillatorNodes and gainNodes were disconnected, for example, when shutting off the machine while it’s in the middle of playing a sequence, I would cycle through all my oscillatorNodes and gainNodes, disconnecting them, and this would give me the following error on the Javascript console: “Uncaught DOMException: Failed to execute ‘disconnect’ on ‘AudioNode’: the given destination is not connected.” Is there a way to test first that the AudioNode is not connected before disconnecting it?
