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