HTML5 audio tag does not work in Android - Chrome when created in JS?

Question

I'm using a .mp3 file, the .mp3 file plays okay when viewed directly and also when embeded using the HTML5 audio tag, however when creating the HTML5 audio tag in JS it does not play! (very strange)

I do not have this issue in any other browser/device, for example Desktop - Chrome works perfectly.

sound = document.createElement('audio');
sound.setAttribute('src', 'sound.mp3');
sound.play();

I've tested sound.canPlayType('audio/mpeg') and this produces true (so it is supported).

Perhaps there's a bug in Android - Chrome? (it is the latest version)

Answer 1

Looks like this is intended feature that spans more then just the Chrome browser. User interaction is required to get media elements to play.

Blink and WebKit have a setting for requiring a “user gesture” to play or pause an audio or video element, which is enabled in Opera for Android, Chrome for Android, the default Android browser, Safari for iOS and probably other browsers. This makes some sense, since mobile devices are used in public and in bed, where unsolicited sound from random Web sites could be a nuisance. Also, autoplaying video ads would waste bandwidth. Block Quote from 'blog.foolip.org'

Duplicate Threads from Other Users

Autoplay audio on mobile safari

How can I autoplay media in ios 4.2.1

Autoplay audio with ios 5 workaround?

Current Status

Developers have requested the deletion of 'mediaPlaybackRequiresUserGesture' which was reviewed and denied (for now). "We're going to gather some data about how users react to autoplaying videos in order to decide whether to keep this restriction."

Upon further inspection i found this...

"I misunderstood the outcome of the discussion (removing mediaPlaybackRequiresUserGesture) surrounding this topic. We need to keep this code in order to not break google.com while gathering data about this feature."

Google.com relies on the feature being disabled, otherwise it breaks ( they didn't say what it breaks ).

Original Bug Report

Answer 2

Not every browser on every platform can play the mp3 audio format. Generally, as I would recommend, you should provide two <source> elements within your audio element, one providing the mp3 format, and another one providing the ogg vorbis format.

You can read more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats

Answer 3

Try appending it to the document body.

document.body.appendChild(sound);

Though it is possible that mobile devices will not automatically play the audio or videos. If you are targeting mobile devices, autoplaying is considered bad practice since it can consume bandwidth. So it may be worth considering adding controls.

sound.setAttribute('controls', 'true');

Answer 4

OK, well, now that we know it won't work with audio , the only path left to you is to switch to the Web Audio API. You'll need to load the mp3 into an ArrayBuffer (eg using an XHR), then pass that to the decodeAudioData method, which gets you an Audio buffer that you can play back at will from an AudioBufferSourceNode .