Click here to Skip to main content
11,705,212 members (50,220 online)
Click here to Skip to main content

Workaround to Fix Audio Autoplay on Mobile Browsers!

, 2 Nov 2013 CPOL 18.2K
Rate this:
Please Sign up or sign in to vote.
Most of the mobile browsers don't support audio autoplay to save mobile bandwidth on behalf of the user!

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Elagizy
Software Developer (Senior) InfraDrive
Egypt Egypt
Egyptian freelance programmer and the founder of InfraDrive, Inc.

Check:
http://www.infradrive.com
http://www.tufoxy.com
http://www.bitsnips.com

You may also be interested in...

Comments and Discussions

 
QuestionjPlayer Autoplay not working in Android 4.1 Pin
Member 1083135120-May-14 19:38
memberMember 1083135120-May-14 19:38 
AnswerRe: jPlayer Autoplay not working in Android 4.1 Pin
Elagizy20-May-14 20:47
memberElagizy20-May-14 20:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150819.1 | Last Updated 2 Nov 2013
Article Copyright 2013 by Elagizy
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid