Audio won't play properly on Mobile (Simon Game app)

Hi there, I hope this is the right place to post this, apologies if not. I’m been playing around with Ember, making some mini projects. My latest one is a Simon Game and a live demo can be found here http://ember-simon-game.surge.sh

The sounds seem to work fine on chrome but on mobile browser (also chrome), if you hit start and get up to the second level, the sequence sounds (level 2 onwards) aren’t playing properly (mobile issue only).

I think it has something to do with how I am using Ember.run.later but I’m not too sure. The relevant code for reinitializing the play sequence can be found here https://github.com/tchan/ember-simon-game/blob/master/app/controllers/application.js#L134

Any idea on why this is happening? Also if you have extra time, I welcome any feedback on how to structure or improve what I’ve done but please don’t be too harsh as I have low self esteem (just kdiding…but not really).

I’ve uploaded a version that plays the entire sequence when you click ‘start’ using the same code

http://ember-simon-mob.surge.sh/

And it fails to play the audio on mobile.

        let time = 0;
        for (let i=0; i<sequence.length; i++) {
          time = time+1250;
          Ember.run.later(this, function () {
            this.set(`${sequence[i]}Pulse`, true);
            var audio = new Audio(`./${sequence[i]}.mp3`)
            audio.play();
            Ember.run.later(this, function() {
                this.set(`${sequence[i]}Pulse`, false);
            }, 1080);
          }, time);
        }

Not sure about the audio, but I have a comment on the structure

You have a pattern for making the rings blink. If you moved this to a function then the game flow logic would be easier to read

You could also look at Ember Concurrency which could help you with timing and flow control