Skip to main content
H
Hans Kroll
Inspiring
September 13, 2017
Answered

HTML5 Canvas mp3 audio not supported crossbrowser and crossplatform

  • September 13, 2017
  • 2 replies
  • 7168 views

Hello,

When publishing and testing my project on different browsers and platforms, the audio doesn't always play. Here's some more info:

Software:

  • Adobe Animate CC 2017.2 build 16.2.0.24


Framework:

  • HTML5 Canvas
  • sound sync as event

Audio file:

  • mp3
  • 96 kb/s
  • 1 channel
  • 44.1kHz

Works in:

  • Desktop, Windows 10: Firefox 55.0.3, Chrome 61.0, Edge 40.1
  • Mobile, Android 5.1.1 (MIUI 7.5): Firefox 55.0.2

Doesn't work in:

  • Mobile, Android 5.1.1 (MIUI 7.5): Chrome 60.0
  • Mobile, iOS 8: Firefox and Chrome

As you can see the audio plays just fine in every browser on desktop. But the audio only plays in one browser (Firefox) on mobile (Android).

Does anyone know where this problem might occur? Is it Animate? Is it HTML5? Is it the browser? Is it the platform?

Thx in advance.

This topic has been closed for replies.
Correct answer Hans Kroll

Your test page does something strange on Android, it runs a full screen project, which I think makes it an unfair test. Not because of being full screen, but something about running the page inside a project shell, or whatever else it's doing. On an Android phone it doesn't work, but the link from my site does work.


I've contacted itch.io and currently await their response. In the meantime I have tested it myself on an iOS 9 device, and have found that the test on itch.io in Chrome (and Firefox and Safari) do not automatically play in fullscreen. This makes it able to press the button to play the sound. In Chrome (and Firerox) on Android however, it does automatically play in fullscreen. This makes it for Chrome unable to press the button to play the sound, but strangely enough not for Firefox. I suspect the automatic fullscreen mode on itch.io in Chrome on Android specifically is where the error occurs. I have informed this at the itch support.

I guess this isn't a problem related to this forum anymore, but to the itch platform. This topic could be closed, but if you're interested, I can report back when I have more info on the matter from itch. Thanks again so much for all your help.

2 replies

C
ClayUUID
Brainiac
September 13, 2017

You're not testing in mobile Safari?

Anyway, all those browsers you're having trouble with supposedly do support MP3. Are you sure it's not an issue with audio not playing until the user has interacted with the content?

Media formats for HTML audio and video - HTML | MDN

Colin Holgate
Colin Holgate
Inspiring
September 13, 2017

Not all browsers can play MP3. The usual work around is to also include ogg-vorbis versions of the sound files. You can use programs like Audacity to convert the MP3 to OGG.

In the JavaScript that gets publish is this part:

// library properties:

lib.properties = {

Once you have OGG versions of your sound files, add this extra line, and then those browsers will play the OGG version:

createjs.Sound.alternateExtensions = ["ogg"];

// library properties:

lib.properties = {

H
Hans KrollAuthor
Inspiring
September 13, 2017

Thanks for your reply. But actually, mp3 is far more supported by browsers than ogg. Besides, the HTML5 canvas in Animate only allows import of mp3 or wav. Or is there another way to test that, outside Animate?

ClayUUID​ Thanks for your reply as well. I have in fact read several issues about movile devices having to want user input first. I can't test this on iOS yet (don't have an iOS device atm), but I believe there I have seen examples where this kind of stuff does work on Android as well as iOS.

H
Hans KrollAuthorCorrect answer
Inspiring
September 14, 2017

Your test page does something strange on Android, it runs a full screen project, which I think makes it an unfair test. Not because of being full screen, but something about running the page inside a project shell, or whatever else it's doing. On an Android phone it doesn't work, but the link from my site does work.


I've contacted itch.io and currently await their response. In the meantime I have tested it myself on an iOS 9 device, and have found that the test on itch.io in Chrome (and Firefox and Safari) do not automatically play in fullscreen. This makes it able to press the button to play the sound. In Chrome (and Firerox) on Android however, it does automatically play in fullscreen. This makes it for Chrome unable to press the button to play the sound, but strangely enough not for Firefox. I suspect the automatic fullscreen mode on itch.io in Chrome on Android specifically is where the error occurs. I have informed this at the itch support.

I guess this isn't a problem related to this forum anymore, but to the itch platform. This topic could be closed, but if you're interested, I can report back when I have more info on the matter from itch. Thanks again so much for all your help.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices