Autoplay HTML5 audio in Chrome for Android, Mobile Safari in iOS

Posted Over 11 years ago. Visible to the public.

Mobile browser's 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.
Audio and video elements will only play as the result of a user interactions (click, touch).
A workaround is to have a "start button" in your application that loads and plays an initial sound.
You can now play further sounds without user interaction by changing the source on the same <audio> element.

I tested this on Chrome for Android. The interweb says Show archive.org snapshot it should work on Mobile Safari as well.

UI/UX Design by

We make sure that your target audience has the best possible experience with your digital product. You get:

Design tailored to your audience
Proven processes customized to your needs
An expert team of experienced designers

Related cards:

The Ruby Object Model

In Ruby (almost) everything is an Object. While this enables a lot of powerful features, this concept might be confusing for developers who have been programming in more static languages, such as Java or C#. This card should help understanding t...

The JavaScript Object Model: A deep dive into prototypes and properties

Speaker today is Henning Koch, Head of Development at makandra.

This talk will be in German with English slides.

Introduction

As web developers we work with JavaScript every day, even when our backend code uses anothe...

Video transcoding: Web and native playback overview (April 2020)

Intro

Embedding videos on a website is very easy, add a <video> tag to your source code and it just works. Most of the time.

The thing is: Both the **operating system and Browser of your client must support the container ...

Good real world example for form models / presenters in Rails

We have often felt the pain where our models need to serve too many masters. E.g. we are adding a lot of logic and callbacks for a particular form screen, but then the model becomes a pain in tests, where all those callbacks just get in the way. O...

Lightning Talk: Coverage based Test Case Prioritization in Ruby on Rails

For my computer science bachelor's thesis I programmed and evaluated a CLI Test Case Prioritization (TCP) tool for makandra. It has been written as a Ruby Gem and was tested and evaluated against one Ruby on Rails project....

Native app install banners in Android, iOS

You can make both mobile Chrome and mobile Safari display a native app install banner. The banner suggests that the user installs an app that is related to the current page. It is shown in the phone's native UI. See attached animation.

There is s...

How to: Upgrade CarrierWave to 3.x

While upgrading CarrierWave from version 0.11.x to 3.x, we encountered some very nasty fails. Below are the basic changes you need to perform and some behavior you may eventually run into when upgrading your application. This aims to save you some...

CarrierWave: Processing images with libvips

When you write your next CarrierWave uploader, consider processing your images with libvips instead of ImageMagick.

Reasons for libvips

There are several **upsi...

How to create giant memory leaks in AngularJS (and other client-side JavaScript)

This guide shows how to create an AngularJS application that consumes more and more memory until, eventually, the browser process crashes on your users.

Although this guide has been written for Angular 1 originally, most of the advice is relevant...

Use <input type="number"> for numeric form fields

Any form fields where users enter numbers should be an <input type="number">.

Numeric inputs have several benefits over <input type="text">:

On mobile or tablet devices, number fields show a special virtual keyboard that shows mostly digit...

Posted by Henning Koch to makandra dev (2013-01-27 08:46)