Problem with sound and animation on mobile devices

Problem with sound and animation on mobile devices
0.0 0

#1

Looking for the feedback on Simon Game http://theonewhodo.es/simon-game/

I’m not sure why sometimes the sound does not play on mobile devices and sound buttons animation have a bit of the delay. I use preload=“auto” but it does not help. For reference how it should work, you may have a look at the same project but on desktop. I’ve tested and did not notice similar problems there.

Here’s the link to repo: https://github.com/ewathedoer/simon-game


#2

iPhone? Mobile safari disables auto playing web audio API sounds. They can only be triggered by intentional user actions.


#3

The problem is that it also occurs on e.g. on Android Chrome or iPad’s Safari.

They play but not:

  1. not all
  2. not always
  3. sometimes also not in the pace they are supposed to

Having what you write in mind, I have one 'intentional user action’ which is trggering Start Playing button at the beginning. It triggers the rest of the functions (at least this was my intention).


#4

I introduced changes. Now it seems to work fine on mobile devices excluding iPhones… Anybody with iPhone can help me debug this?


#5

I hope it works now, at least it did on some iphone models…


#6

Hi, like you, I also had issues with the audio in that challenge. I tried a different approach and with a little help from stackoverflow created a little module that generate custom sounds using the Web Audio API. You can have a look here https://github.com/Holic101/Simon-Game/blob/gh-pages/js/lib/beep.js if you like. Also you can see the implementation here: https://github.com/Holic101/Simon-Game/blob/gh-pages/js/simon.js or test the game here: https://holic101.github.io/Simon-Game/


#7

I’ve just checked your solution (the last link) on iPad on Safari and Chrome. It doesn’t work there. You may double check it. I have already solved this problem in my project and claimed the first certificate. I change the source of the audio dynamically and this way it works on mobile too and does not need each time to be triggered by a user. I trigger it once when a user starts a game by play ‘start playing’ button. I tested in on Android, tablets and few versions on iPhone and it worked.


#8

Hey! I am having the same exact problem in my Simon game. The sound works as expected on the desktop, but becomes distorted and doesn’t always play on my iPhone.

Can you go into a little more detail about how you solved this? I’m not sure what you mean by when you say you changed the source of the audio dynamically.

Thanks!


#9

I’m having the same issue with audio, and it’s pops up from time to time on other forum posts as well. This is my codepen: https://codepen.io/PhysRex/pen/EmKzpa

Even the FCC “vlogger” from a year ago talks about having this same issue: https://youtu.be/TWFNnbAylHI?list=PLWKjhJtqVAbkyQnSv-DNXOKsglcHhYAV2&t=529

Any help or guides with sounds (and animations for that matter) on mobile would be greatly appreciated!