"autoplay" Html5 Audio Player On Mobile Browsers

I am creating a HTML5 music website for mobile users.The goal is to get it running completely in mobile browsers.. The issue is that when a user selects a track to play, they are t

Solution 1:

This question has been answered in other places before.

Regarding Apple devices specifically:

• Can you autoplay HTML5 videos on the iPad?
  • "Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations. In Safari, on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and auto-play are disabled. No data is loaded until the user initiates it."
• Safari HTML5 Audio and Video Guide - iOS-Specific Considerations
  • "In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not."

Googling will reveal more.

I have read in a few places that Chrome on Android also behaves this way, though other Android browsers may not.

How this applies to your case specifically:

Normally, just clicking on a link would work fine if the player were in the same page, since the click on that link would be counted as valid user interaction to start the media playback. But, you're loading a new page, which resets this check for user interaction, and so media will not start until the user interacted with the new page in some way. Thus, the user has to scroll, touch, tap, swipe, or something, in order to auto play, or just hit the play button on the media player.