I have a radio app in development.  It works great within a desktop browser.  Unfortunately, it has problems on phones.  The biggest problem on Android is that the music would not autoplay when the page loaded.

After debugging, I found that the ‘play’ event was not being called – this is the event that should be triggered when play() is called from the MediaElementJS control (which trickles down to the corresponding HTML5 event).  Funny thing – I have a toggle play/pause button within the app.  Clicking that would execute play and trigger the event appropriately.  So, this really did seem like an autoplay issue.

Long story short – I found out that Android (and iPhone, apparently) have a requirement that initial media streaming can only playback as a result of user-interaction.  I guess this was done to prevent cell phone bandwidth from exceeding limits unknowingly.

Anyway, I fixed it by introducing a welcome dialog (the modal from Bootstrap).  When loading the page, the user will see this welcome dialog, then be able to dismiss it, which triggers the music.

Related links