HTML sound woes, after Howler replaces SoundJS

#1

I’ve just been forced into updating an older project to the newer releases, and am now using the current versions of OpenFL (4.8.1) and Lime (3.7.4) - the project was previously using OpenFL 3.6.0. and Lime 2.9.0.

Having fixed the android build of the project, I’ve recompiled for the HTML target, and found to my dismay that SoundJS has been replaced by Howler. - all of my audio was working well with SoundJS previously across web and mobile browsers (except the old android native browser), but with howler i’ve got issues… things like sound.stop() not working on firefox (desktop) causing music to be overplayed. and IE (desktop) failing as i used to set the extension to .ogg and soundJS would load the .mp3 automatically on browsers that cant play the .ogg filetype !

i’ve recreated the playingsound sample today, and it fails for me more than my own project does, as follows …

PlayingSound example fails .
in Chrome
lime.utils.Assets] SOUND asset “assets/stars.ogg” exists, but only asynchronously
Cannot read property ‘play’ of null

in Firefox
[lime.utils.Assets] SOUND asset “assets/stars.ogg” exists, but only asynchronously 1 PlayingSound.js:16848:32

in IE
Unable to get property ‘onComplete’ of undefined or null reference
File: PlayingSound.js, Line: 30432, Column: 4

Is this just me ? or is sound for the html target fairly broken atm ?
Can i ask when SoundJs was replaced with Howler, as i can only find when howler was replaced by SoundJs (2014) in the change log https://github.com/openfl/openfl/blob/develop/CHANGELOG.md?

**(In case you’re interested, the reason for the rewrite was that I’d discovered a major problem with the depreciated Tilesheet class, which is obviously not something that is ever going to be fixed - it was causing fatal errors on an increasing number of android devices, when tilesheet was placing certain tiles in certain places within the display area - the issue gladly doesn’t occur with the newer TileMap class.)

#2

Thanks for bringing this up!

With the latest, it seems if one sound (in a group) was preloaded, the others weren’t flagged as already being loaded/cached.

Path “groups” like this needs to be improved in the future, but for the moment, this commit is fixing “PlayingSound” for me :slight_smile:

Let me know if you give it a try and it helps!

#3

Thankyou, i’ve merged the second of your changes into my installation of Lime 3.7.4 , and my both my current project, and the playingsound sample are loading, and working on Chrome, IE and Firefox. … although on all 3 browsers it’s defaulting to the .MP3 version of the sound and music assets, (whereas SoundJS used to default to use the .ogg extension if you specified it on Chrome and Firefox (IE still doesn’t handle .ogg). Also each .MP3 is being requested twice on those 3 desktop browsers, (and are being fully loaded twice on Chrome and Firefox) !

Are .ogg files becoming superfluous in html5?

#4

this is still present with firefox browser :confused:

#5

Would you mind trying to test if a non-MP3 sound works better in Firefox (temporarily exclude *.mp3 from your build, and try again)? We might be able to prefer one format over another by re-ordering the file list we pass to Howler, but it may be worth testing, first, if a different format performs better

HTML5 mp3 issues in Opera
HTML5 Firefox Sound Issue, Music and sounds playing twice!
#6

Hi, - I’ve tested with just .ogg files included.
Chrome, works fine with .ogg,
Firefox, works, but still with issue with .ogg overplaying music (see below)
IE fails to load the project during the preloader phase, the error mesage indicates that it is trying to load the .ogg asset even though IE can’t use it ! - ( Error loading asset “soundassets/bonk1.ogg” )
Again the sound and music assets (.ogg files) are being loaded twice on both Chrome and Firefox, (asset loading doesn’t reach that far in IE).

I’ve narrowed down the firefox overplaying issue. musicchannel.stop() does work !. The specific firefox overplaying issue can easily be recreated by beginging any music asset from a non zero position, in my code the line.

musicchannel = mymusic.play(musicposition, 0, fullvolume);

starts playing the music twice within the musicchannel. One instance of the music playing begins at position “musicposition” as it should, but another instance of the music playing also begins at position 0 simultaniously.
This is only occuring in Firefox as far as i can tell…

#7

I had the same issue, and I think I found a way to make it work properly for the web (HTML5 target). It seems that the new library auto-loads the proper sound if you load the mp3 file (as long as you also have an .ogg file with the same name, it should load that one if needed for that specific browser). So in the PlayingSound example, the following code:

#if flash
sound = Assets.getSound ("assets/stars.mp3");
#else
sound = Assets.getSound ("assets/stars.ogg");
#end

Should become:

#if (flash || js)
sound = Assets.getSound ("assets/stars.mp3");
#else
sound = Assets.getSound ("assets/stars.ogg");
#end

The “js” directive means web (HTML5 target). I’ve tested in Chrome and Firefox on Windows. Not tested in IE yet. If you do test it in IE, please let me know (I only have IE 8 and doesn’t work, I won’t bother updating it).

EDIT: also tested in Safari on a Mac. Works fine (well, the “stars” file from the example sounds a bit weird after ~30s, as if the sound is too loud or something, but could be my Mac speaker’s fault or just a weird compression or something)

EDIT2: I did not test the overplaying issue in any browser. I only used the default PlayingSound example, and works ok.

#8

It seems the problem with sound in Firefox still exists. In the PlayingSound example the sound isn’t actually stopped as well, it’s volume is just set to 0. Removing

Actuate.transform (channel, fadeOut).sound (0, 0).onComplete (stop);

and directly calling stop(); doesn’t do anything. Another problem is that unlike other pages the page with the game doesn’t stop the sound when not focused. Is there a way to make it automatically stop? Firefox also keeps showing the sound icon on the tab because the sound duplicate isn’t removed untill it completes playing.

#9

Looks like there might be fixes:

Could you try using this version, and see if it works better?

https://raw.githubusercontent.com/goldfire/howler.js/master/dist/howler.min.js

1 Like
#10

Yes, it works, thank you!

1 Like
#11

Updated on GIT, will go out in the next release :wink:

#12

Sorry, I’ve been away for a while - will test thoroughly and feedback when i can :slight_smile:

#13

Not sure what happened but it stopped working again with the same OpenFl and howler.js versions somehow, don’t know if new OpenFl version solves it because I can’t build html5 projects with it now (Preloader , now that NMEPreloader is depreciated)

#14

Tried compiling Playing sound demo with 5.0.0 version - it does have Howler 2.0.3 but the same problem appears anyway. Tried Howler 2.0.1 instead and it worked
Maybe this is connected: https://github.com/goldfire/howler.js/issues/693