HTML5 Canvas mp3 audio not supported crossbrowser and crossplatform

[Hans_Kroll]

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.

[Colin Holgate]

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 = {

[Hans_Kroll]

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.

[ClayUUID]

https://forums.adobe.com/people/Hans+Kroll  wrote

I can't test this on iOS yet (don't have an iOS device atm),

But... you just said it doesn't work in iOS Firefox and Chrome.

[Hans_Kroll]

Yes, sorry, should've specified. I myself don't own an iOS device, but I let another person test it on theirs, remotely. That person claimed to not have sound on Chrome as well as Firefox. But I will ask for further specifications.

That would still leave Chrome on Android however. I tried Colin Holgate​ suggestion. I added an ogg version of the audio file in the same folder, and I edited the js file, where I included:

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

// library properties:

lib.properties = {

Unfortunately, Chrome on Android still wouldn't play it.

[Colin Holgate]

There is a good chance they tried in Safari too, but you should ask. It would be a very unusual iOS user who only used non-Apple browsers.

[Colin Holgate]

The way you added it was correct, you put the ogg files in the sounds folder with the MP3 (don't forget to upload that to your server), and you manually edit the js file. Each time you publish that will get wiped out, so you have to edit it again each time.

[Hans_Kroll]

Thanks again for your input. I'm still not getting it to play unfortunately. I'm absolutely no programmer, but found this. Do you know if this could help me somewhere?

Also, I will ask the person to test as well on Safari. (It's his workphone, so not a usual iOS user).

[Colin Holgate]

Pages like the one you linked to are more for people who are not using Animate. You shouldn't have to worry about those things.

Did you answer what ClayUUID said about user action? That is required by most browsers, especially on mobile, and it doesn't matter if you find a case where it does work, you won't be able to get around the problem without there being a user action to set the first sound playing on the page.

[Hans_Kroll]

I have created an event where it first needs user input to play the sound. No luck still. I have no idea what else to look at, but I'd say it's browser focused..

[Colin Holgate]

What do you mean when you say that you created an event? What we mean is this (where "sound" is the linkage name in the library for an MP3):

this.aBtn.AddEventListener("click",clicked);

function clicked(){

    createjs.Sound.play("sound");

}

Without doing something like that sound won't be heard. Another variation that would work is:

this.aBtn.AddEventListener("click",clicked.bind(this));

function clicked(){

    this.gotoAndPlay(10);

}

where frame 10 has a sound in the timeline. You have to have a physical press from the user in order for sound to be heard.

[Hans_Kroll]

I started from scratch, to test things. At the moment it's a simple blue screen which you can click/touch to play an audio file (piano scale). I have used your codes as above, as well as replaced the mp3 as ogg file in the folder, and added the js code. It still correctly plays on Desktop webbrowser, but on Android only Firefox. No Chrome. You can test it here.

I probably should've also specified, I'm testing it out on itch.io. Perhaps it's their platform that causes errors on Chrome Android?

[Colin Holgate]

I think that you didn't give the button a name. You used my code, but the button or movieclip needs an instance name of "aBtn" for my code to work.

[Hans_Kroll]

I did name the instance "aBtn". But I'm new to Animate (I'm still figuring out layers, frames, let alone coding), so it will be hard to explain what I exactly did without visual aid. Still, strange that specifically Chrome on Android won't play this. Also, the person with his iPhone 5 couldn't hear anything on Chrome, Firefox and Safari.

I will keep experimenting around, but thank you so much for all your help and effort. I really appreciate it, you definately helped me learn more. Should I stumble upon a solution, I will report back.

[Colin Holgate]

There was a typo in my code. It should have been addEventListener, not AddEventListener. I put a test here:

tunetest

I test in Safari, Chrome, and Firefox on my iPhone, and in Safari on my iPad. It works in all cases. After I unmuted my phone that is.

[Hans_Kroll]

Your test plays succesfully on Chrome on my Android as well. If you made this in Adobe Animate, is it possible for you to share the project with me, so I can take a look at your layout and code? In the mean time I'm trying your new code as well.. Thank you so much again.

[Colin Holgate]

I put the FLA as a zip file here:

http://colin.scienceninja.com/soundtest/tunetest.fla.zip

[Hans_Kroll]

Thanks! I see your document is created in a newer version, and Animate informs me about a possibility of containg new features not supported by my version. In fact, when I test your project, the sound immediately starts playing in the browser. I can't click on the black square.

I was under the impression I had the latest version. I'm updating my software at the moment, perhaps this was in fact a (the?) problem with my other test project as well...

[Colin Holgate]

I tend to be a bit ahead of most people. The FLA should open in any version of Animate,.

I realized that I may not have saved the FLA after I had removed the sound from the timeline (I had it there while testing). I've replaced the zip file:

http://colin.scienceninja.com/soundtest/tunetest.fla.zip

[Hans_Kroll]

Thx again. In the mean time I'm on the latest version. Strangely enough however, your test (from two posts back) works on Chrome on my Android, but when I publish and upload your test on itch.io, it doesn't work. I have not edited your project in any way. Perhaps it's on itch.io's end? These are my publish settings:

[Colin Holgate]

It works in Safari and Chrome on my iPad. Need to recharge my Android tablet before I can test there.

[Hans_Kroll]

I don't know how to express my gratitude to you, but I really appreciate your efforts in helping me.

[Colin Holgate]

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.

[Hans_Kroll]

Hi, thanks again so much for testing out. I've tried several embed and upload options, and tried opening as desktop mode in Chrome on Android as well, but no luck so far. I'm gonna contact itch.io and ask them about their framework.

[Hans_Kroll · Accepted solution]

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.