Trigger Touch Event on iOS

[ylluminarious]

Hi all,

 

So, this question stems from this question: Problems with a certain M4A file in iOS with Phaser. So, I have an intro song that I want to play on my game right when the game starts. Obviously, this works fine on desktop and other systems, but not on iOS since iOS needs a touch event before it plays any sound. Unfortunately, I don't want my user to have to click / touch the game first before the intro song starts. What I'm hoping to be able to do is to trigger the touch event so that it registers with iOS. I've tried setting `game.sound.touchLocked` to false, but to no avail:

this.game.sound.touchLocked = false;this.myGame.audio.titleMusic.fadeIn(INTRO_MUSIC_FADE_DURATION);

Does anyone know how to register a touch event on iOS with Phaser?

[ylluminarious]

So, I've been researching how to trigger types of events in the browser, and came across this way of doing it:

event = new Event();event.initEvent("touchstart", true, true);eventAlert = function(){  alert("event detected");}window.addEventListener("touchstart", eventAlert);document.body.dispatchEvent(event);intro_music.play();

If you run that in iOS, you'll see an alert showing that a touch event was triggered, even before you touch it. However, it seems that another touch event is still required for the music to play, which is very weird (you might want to comment out the section where the alert is fired so that you don't have an alert for every touch event). I'd appreciate it if someone could explain this odd behavior and offer a solution to this tricky problem.

 

Btw, here's a demo app: http://cl.ly/0H3s1G3k1j2W.

And here's the source code for it:

var game = new Phaser.Game(800, 550, Phaser.AUTO, "game", {preload: preload, create: create, update: update});function preload () {  intro_music_key  = "title_music";  intro_music_path = "title_music.m4a";    game.load.audio(intro_music_key, intro_music_path);}function create () {  game.add.text(320, 100, "Audio Test", {fill: "white"});    intro_music = game.add.audio(intro_music_key);    event = new Event();  event.initEvent("touchstart", true, true);    eventAlert = function(){    alert("event detected");  }    window.addEventListener("touchstart", eventAlert);    document.body.dispatchEvent(event);    intro_music.play();}function update () {  num = 1  console.log(num);  num += 1}

[ylluminarious]

So, I've tried yet another approach for this:

event = new Event();event.initEvent("touchstart", true, true);eventAlert = function(){  alert("event detected");  intro_music.play();}window.addEventListener("touchstart", eventAlert);document.body.dispatchEvent(event);

As you can see there, I explicitly put the play event inside the event listener, but it still doesn't work unless you actually touch the screen. I wonder, is there perhaps an interrupt request at play here that is required for the browser-level touch event to register?

[ylluminarious]

Bummer. So it seems that folks have already discussed this problem thoroughly on StackOverflow: Autoplay audio files on an iPad with HTML5. One fellow suggested a fix similar to the one I proposed above with the only real difference being that he triggered click events in the browser (which work as well as touch events). Unfortunately, it appears that such solutions no longer work and that real touch input is the only way to fix this problem, since iOS is probably needing to detect an interrupt so that input can't be faked in the browser. However, I'm open to suggestions and will leave this post open in case anyone does have a solution for this.