Workaround to Fix Audio Autoplay on Mobile Browsers!

Introduction

If you have been trying to implement a web audio player that works perfectly on your mobile browsers, probably you've faced an issue that your player doesn't play audio automatically on page load, with a timer, or even with external calls. Or probably your desktop browsers play audio fine while the mobile browsers don't.

Background

Mobile browsers ignore the autoplay attribute on <audio> and <video> elements. Stupid reasons include saving mobile bandwidth on behalf of the user and/or securing app store sales. The only way to play the audio is to physically click/touch a button/link.

This is not acceptable and the mobile browsers' policy must be changed as there are many of us who develop web games/apps that require audio to be automatically triggered without the need to initiate a physical click/touch.

Audio APIs

Whether you used jPlayer, JW Player, audio.js or SoundManager2, you will not be able to initiate audio auto play on mobile browsers.

The Workaround

I've found a workaround that solves this issue until Mozilla, Apple and Google decide to allow audio auto playing on mobile browsers!

If you physically clicked/touched a button/link that plays an audio, and then later you called the same player using external calls or timers, it will work perfectly. Proceed with the following steps:

1. All I need is to give a physical click to that audio player and make it play a blank MP3 (10 millisecond length is enough). Then later, I will be able to autoplay any other audio.

   If you are lazy to create a blank mp3, check the link below. It has many blank MP3s with different lengths:

   http://www.xamuel.com/blank-mp3s/

2. Assuming you use jPlayer and you've already set it up. Then just place this code to a click event right that can be clicked by the user before doing your external calls for the audio player.

   $("#AudioPlayer").jPlayer("setMedia", {mp3: "blank.mp3"}).jPlayer("play").jPlayer("stop"); 

   The jQuery code above will simply trigger the audio player making it ready to be used for autoplaying audio. So if you placed this code in a click event for any object that could be just clicked once by the user, later you will be able to control the audio player making it play sounds automatically.

You can apply the same logic to any Audio APIs such as audio.js, SoundManager2, JW Player, etc.

I hope the idea was clear and solved the problem.

Update

It seems that Apple closed all the workarounds in iOS along with Android 4.2.2. I’ve tried the following scenarios without any luck:

1. Used timers
2. Simulating key press, tap and clicks
3. Used onReady, onPlay, onBufferChange, etc.
4. Used synchronized Ajax calls
5. Simulating value change through textbox and comboboxes
6. Used iframe
7. Used OnScroll event for the document

The only way to get it working with JWPlayer is that a user MUST interact with any click/touch before getting the video playing. As long as the mobile browser receives an initial click/touch, the video will just play fine.

So I think they are patching any workarounds that pop to them. Even if you found a workaround, it might not be working with later versions.