On iPad audio doesnt play on DragEnd event

[Ketan]

Hi,

 

I am using Green Sock Draggable utility where on dragEnd event I am playing one mp3 audio file, but it doesn't play. Anyone has any idea why its not playing. I know that IOS needs user interaction to play audio file. Is this the case that IOS is not recognising the dragEnd event as a user interaction event?

 

Thanks in advance.

 

[PointC]

I'm not too familiar with adding audio files on IOS, but if you could post a demo, I'm sure someone around here can offer some advice. More info about making a demo:

Happy tweening.

[Jonathan]

Hello @Ketan and Welcome to the GreenSock Forum!

 

Have you tried adding a console.log("onDragEnd fired") or alert("onDragEnd fired") in the onDragEnd() callback function to see if you see it is being fired?

 

But like @PointC advised a codepen demo example will help us see your issue in context.

 

 

Thanks!

 

 

[Ketan]

Hi PointC and Jonathan,

 

@JonathanThe alerts on DragEnd event occurs correctly. I have created one sample and it has the same issue. As this sample has a audio file I have not created it with CodePen. I hope its fine. 

 

Please extract the zip and run the test.html in both desktop browser and on iPad Safari browser. On the desktop browser the when you drag and release the arrow image, you can hear a audio, however if you launch it on Safari on iPad then you cannot hear that sound. 

audio_issue.zip

[macguffin]

Hi, it might be because you need a user action to initiate audio on iOS safari. Your user needs to play any audio via a direct request for the audio to play.

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

 

To see if this is the case add an onClick somewhere to play the sound.

Once you have heard the audio see if it works with the drag event.

 

If this is your issue you can play a blank audio with your user click at some point before you need to do the "drag and drop". The user doesn't need to directly request the actual audio you want to play just an audio file.

 

this might not be your issue but it's a good thing to rule out.

 

Cheers

[Ketan]

Hi macguffin,

 

OnClick event did the trick. No need to play the blank audio. I just played the same audio on onClick event instead of DragEnd event.  Thanks a lot for the response. I got the hint from it. Sometime you need a little push to change your thinking track.

 

Thanks PointC, Jonathan and Macguffin for all the support. Much appreciated.

 

-Ketan