Sound issues with Simon!

Code Feedback
1

I have pushed what I have working up to Github at:

https://marcnshapiro.github.io/simon/index.html

I don’t yet have the controls on the center panel, so it starts up immediately and assumes it is NOT in strict mode. It also does not check for successful completion of twenty tones. I’ll deal with that later. My current problem is with sound. I am using the Web API and everything works fine on my desktop machine running the latest Firefox. It behaves exactly as I would expect it to at this time. Then I tried it on my Lenovo Tab 2A and things were not so good. It played back the first note when it initially starts, but that is the last sound that I get. I know that it registers my taps (sometimes) because it will either go on to the next round, or repeat the same one.

I assumed the problem was only on the tablet, but then I decided to try it on the desktop using Chrome. The results were pretty similar to the tablet. I get about three or four notes played before the sound vanishes. After that I can at least SEE that my mouse presses are registering, but no sound until I reload the page to start over.

I tried the example page from fcc in Chrome on the desktop, and it behaved similarly, the first time. Then it seems to have started working properly, so I don’t know what to make of that. On the tablet, the example plays sound when the computer plays the sequence, but not when I respond. Again, it sometime registers the key press and acknoleges a correct sequence, but does not actually light of the button, or make any sound.

If anyone can make sense out of this I would really appreciate it.

To Recap:

Neither Firefox, nor Chrome seem to behave correctly on the tablet, although the behavior is different for my page than it is for the example. On the desktop, Firefox works great for both my code and the example. Chrome now seems to work for the example, but not my code.

HELP!!

2

I changed from using the Web Audio API to using an .MP3 file for each tone. I think that it is now working in both Firefox and Chrome on the desktop. The tablet is still another story entirely. What it seems to be doing is ignoring the press (the “mousedown” event), but activating the “mouseup” event. Since it lights the button up and starts the audio on the “mousedown” and returns the button to its unlit state, stops the audio and increments the count on “mouseup” that would produce exactly the results that I’m seeing. Except, as I think of it, the “You pressed the wrong key” sound is created on the “mousedown” and it does work! Could the “mousedown” and “mouseup” events be issued together when I remove my finger from the screen? If they were issued one immediately after the other then I think that it would still produce the results that I’m seeing. That would be a problem since I would never have any time between the two events for the button to light up and the tone to play.

3

I had a similar problem that the game would seem to register my input as two presses (thus often losing the game), when trying on my phone, even when trying to make really deliberate presses. I ended up putting a preventDefault on the event for mousedown/touchstart’ and that cleared up my issue. I’m using the audio context + oscillator for the tones.
Maybe this could help your situation as well… I am almost done with the project and a large percentage of the time went to trying to make it mobile/touch friendly.
Feel free to check my codepen. simon