3

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)

Stone
  • 343
  • 1
  • 5
  • 11
  • Or perhaps you should let the browser load the source before playing. If possible, create the `audio` element well in advance. Listen to the `canplay` or `canplaythrough` event fired by the `audio` element to know when it has enough data to begin playback. – Touffy Nov 21 '15 at 22:36
  • Are you sure the mp3 file path is correct? (/example/folder/sound.mp3) – mattdevio Nov 21 '15 at 22:38
  • @magreenberg Definitely correct, I've even tried hardcoding the url etc. – Stone Nov 21 '15 at 22:39
  • 1
    Maybe mobile Chrome does not let you trigger play programmatically? Are you doing this on a user-triggered event? Maybe also try adding the element to the DOM. – Alexander O'Mara Nov 21 '15 at 22:39
  • I believe you need to add it to the DOM – Saar Nov 21 '15 at 22:40
  • +1 for browsers preventing some potentially annoying features. Adding to the DOM won't help, it's part of the spec that `audio` can exist in HTML limbo. – Touffy Nov 21 '15 at 22:42
  • why do you try appending the element to the DOM before you play it. – mattdevio Nov 21 '15 at 22:43
  • Wait a min, doesn't the audio tag have a nested source element. Wouldn't you create a element and then set it's attr to the mp3. Then append the whole thing to the DOM – mattdevio Nov 21 '15 at 22:45
  • @magreenberg I'm probably being dense, but how do you mean? - jsfiddle snippet is appreciated. – Stone Nov 21 '15 at 22:46
  • Also, there's a constructor: `new Audio(src)` so you don't need to do all that boilerplate createElement and setAttribute stuff. – Touffy Nov 21 '15 at 22:48
  • @Touffy True, but browser do not always follow the spec fully, or event intentionally deviate from it. – Alexander O'Mara Nov 21 '15 at 22:48
  • @magreenberg Both are valid. However, using `` elements allows you to define multiple sources. – Alexander O'Mara Nov 21 '15 at 22:48
  • `source` is useful to specify multiple alternate sources for the same element (e.g. different formats so the brwoser can choose whichever it can play). Using `src` is fine since you know the mp3 is playable in this context. – Touffy Nov 21 '15 at 22:49
  • 1
    @AlexanderO'Mara I know. But it doesn't make any sense here, and OP has tested that hypothesis, too. If `audio` can't be played back programatically, then that's that (but please check my hypothesis too). You could try using the Web Audio API as an alternative. It's a bit more code but also has much more power. – Touffy Nov 21 '15 at 22:54
  • If you have an .htaccess file.... Disable it. Maybes it is keeping the audio from loading correctly. (audio permissions etc) – mattdevio Nov 21 '15 at 22:56
  • 1
    @magreenberg We already know that the audio plays back fine when the `audio` element is part of the HTML. So it can't be a network thing. – Touffy Nov 21 '15 at 22:57
  • @Touffy It could happen, it is a different file that is asking the audio to load. – mattdevio Nov 21 '15 at 22:58
  • 2
    [Just found this, it's intended by google! :(](https://code.google.com/p/chromium/issues/detail?id=178297) – mattdevio Nov 21 '15 at 23:03

4 Answers4

4

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

Community
  • 1
  • 1
mattdevio
  • 2,319
  • 1
  • 14
  • 28
  • Oh my god, good spot! Bit of a pain but I understand why Google could have added this restriction. It's good from a consumer PoV but for a developer it means more work. – Stone Nov 21 '15 at 23:22
  • @MrLister I updated my answer. Does that look complete enough? – mattdevio Nov 22 '15 at 11:49
0

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

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Simon
  • 683
  • 3
  • 7
  • 18
  • 1
    I'm pretty sure mobile Chrome does support MP3 though, so this probably isn't the immediate issue. – Alexander O'Mara Nov 21 '15 at 22:40
  • 1
    I appreciate this Simon, however on Android - Chrome, I can view the .mp3 file directly without problems. I can also embed the .mp3 file using the HTML5 audio tag without problems. sound.canPlayType('audio/mpeg') also produces true. So all of this suggests it should work. :( – Stone Nov 21 '15 at 22:40
  • @AlexanderO'Mara agreed your view coincides with my above findings. – Stone Nov 21 '15 at 22:42
  • Okay, thank you for the comments. In my referenced link there's a question mark on Chrome + Android, so I thought this *could* be the case. – Simon Nov 21 '15 at 23:09
0

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');
Marco Chan
  • 53
  • 5
0

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 (e.g. 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.

Touffy
  • 6,309
  • 22
  • 28
  • Will take a look - thanks, although the docs on initial inspection seem very overwhelming! – Stone Nov 21 '15 at 23:24