HTML5 audio issue with Mobile Safari iOS

Question

I have created a Simon Game here on Codepen: http://codepen.io/nalexiou/pen/rOaQOK

On the desktop, the audio/sound is playing fine. However, when I visit the site using my iPhone's Safari, the sound will not play.

I call the play() method on the sound variables (green, red, etc.) via this jQueryUI code:

......
 $('.' + items[0]).addClass('active', speed, function() {
    obj[items[0]].play();}).removeClass('active', speed, 
    function() {
    nextItemActivate(items.slice(1));
 });
......

However, if I trigger the play() methods first like this:

$('.test').on('click', function() {
  green.play();
  red.play();
  yellow.play();
  blue.play();
})

then the my addClass code does play the sounds.

Could this issue be related with the jQueryUI library or is there something special I need to consider for the Mobile Safari browser?

Thank you.

Answer 1

You can read the article from Apple:

https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

By the way, you can't use autoplay or trig to play function video or audio because of:

https://stackoverflow.com/a/12496184/2686143