HTML5 target stuck at loading assets if sound/font files included

As I see from OpenFL source, OpenFL is using SoundJS. I investigated the issue and got that “fireload” event never dispatched for all sound files. I included 3 formats (mp3, ogg, wav). That’s why the assets loading stuck. If I remove the sound files, the game runs fine.
I’m not familiar with SoundJS so… do you guys have any idea how to fix this ?
sorry for bad english

Hmm, that’s strange. I’ve definitely seen this occur (and SoundJS can be somewhat finicky about loading without PreloadJS, which is too much for what we want out of the library, I feel).

However, usually this has been because one of the formats is not included. Are all the files being copied into the output directory? Do they all share identical file names, except for the file extension?

If you open a JavaScript debugger, do you get any insight into what is not loading?

Thanks!

I checked the assets folder just now, and every formats copied correctly (same file names except extensions).
I put 2 traces in Sound.hx.

function load
trace("Register " + id);   
SoundJS.addEventListener ("fileload", SoundJS_onFileLoad);

function SoundJS_onFileLoad
trace("LOADED " + event.id)
if (event.id == __soundID) {
....

Interesting result that “LOADED” trace never called.

by the way this occurs on Android 4.0.4 stock browser. The game can be loaded in Dolphin browser. I tried in iPhone 5s and Android 4.4 as well and works fine.

While investigating I’ve found other problem regarding loadFont function in lime/app/Preloader.hx:152:

if (node.offsetWidth != width) {

with that line enabled my game can’t run in all kind of devices except desktop browsers…
I did trace(node.offsetWidth + " " + width) the results are :
2187 2187
2187 2187
2187 2187

so I put comment to that line, then the game can run again but no custom font.

Those are what I get so far.

Thanks

Hmm, I wonder if another (newer) version of SoundJS would work any better for the older Android stock browser.

I believe the node offset and width are not equaling because the font is not actually loading. Did you get any warnings during compilation, that certain font files could not be generated? Could you look at the output source, and see if the style for the font name you are expecting is present? Does this occur on every platform, or only some?

I experienced a similar problem with loading never completeing on the Kindle Fire tablet’s silk browser. (of 1st and 2nd generation Kindle Fire HD) (the thread with a description of what was going on should be findable if you search the recently replaced forums) - The best workaround i found was to manually implement SoundJS, which then gives me the ability to check the useragent of the browser before trying to load sounds, and assume sound isn’t working and not to try it for the Silk browser. (benefits also include being able to specify sound file types, and which you prefer to be the default sound file type on other browsers !)

Here is the archived topic:

https://muut.com/i/openfl/general:html5-game-only-loads-on

If you guys have any suggestions of how we can improve support out-of-the-box (especially if a newer or patched SoundJS version resolves some of this stuff) then that would be great :slight_smile:

It’s tricky to know what to do to support platforms which are in effect broken !

For the kindle fire HD for example, anything html5 with sound preloading, which has been created with openFL (or in pure html5 using soundjs) simply wont load on 1st and 2nd generation devices! - but the developers of the silk browser fixed it for 3rd generation devices and later versions, and didn’t seem it worthy of prompting a patch/update for older devices !? -

The OP talks about the Android Stock browser ! - I’ve completely given up testing my openfl creations on that on my own older devices, as it really doesn’t run things correctly! and i expect most serious tablet and phone users to have moved on to a different browser !

Given my own experience of trying to get sound working, my recomendation for improving out-of-the box for html5 sound support would be to.
a) keep soundjs - it does pretty well and support the majority - and it’s only old things that i’ve experianced have problems with it.
b) Include an exclusion list of older non compliant, and known not working browser useragents, which it is known dont work with soundjs - don’t even try to load or play any sound if we know it wont work ! - Over time these browsers will go away, there’s little point spending any time trying to support them - just exclude them !!
c) include a method of specifying which file extensions are available / preferred. (even if it is only a html5 target specific requirement)

edit : regarding fonts - sorry i’ve only mentioned sound - i made the move to bitmap fonts a few months ago, and haven’t looked back !, it’s worth looking into to avoid alot of headaches !

Thank you for the responses.

Font problem

it occurs on all of my devices (4.0.4 Android, 4.4 Android, iOS 7) and all browsers (stock, chrome, safari). For now I simply move on to bitmap font as workaround like Penry said, thanks. I included all font formats to my folder (*.eot, *.svg, *.woff, *.ttf) so there is no warning. All font names present in the source urls array. If I can remember correctly I was able to use custom font before this error, so I think the problem is on my side.

Sound problem

I updated the soundjs file, still didn’t work :(. Seems like SoundJS is awesome in managing sound files, so please keep it. But it has one problem that if a sound failed to load, “fileload” event never be dispatched, so it means the loading is stuck because loaded < total. Is there something like “fileerror” event to implement? Or you can give timeout to the sound preloader… but I don’t think it’s a good idea. I think I will try Howler.
One more thing, in the js source code, if I remove all sound urls from ApplicationMain.create function, the game can run without any sound.

If you would mind checking the generated source, to see if you get the correct CSS for your generated font, and also try something like the “AddingText” sample, to see if that runs for you. If it does, you can also try substituting additional fonts.

I’ve asked the guys who made SoundJS, and they said that the error handling is supported only if you use PreloadJS as well, which seems like a total bother, and too much weight for what we use, I felt. Perhaps we need to emulate PreloadJS or bite the bullet and include the whole thing just for one error condition handler :sweat:

Here are the generated codes.
css of index.html:

src: url('assets/font.eot');
src: url('assets/font.eot?#iefix') format('embedded-opentype'),
url('assets/font.svg#my-font-family') format('svg'),
url('assets/font.woff') format('woff'),
url('assets/font.ttf') format('truetype');

js source:

urls.push("assets/font.eot");
types.push("BINARY");
urls.push("assets/font.svg");
types.push("TEXT");
urls.push("assets/font.ttf");
types.push("FONT");
urls.push("assets/font.woff");
types.push("BINARY");

The problem is from js source, isn’t it?
The other formats considered as BINARY, TEXT, and BINARY except ttf.
I guess I need to determine the assets type in project.xml file.
I tried to change all the types to FONT and the game can run again :slight_smile: but no custom font :(. I think my browser doesn’t support custom font

So sad SoundJS can’t handle it easily,
I was able to play music from hand-written (non-haxe) JS code in same browsers using Howler.

Thanks.

I used Howler before, but it fell flat on some browsers/combinations, and particularly was not happy about looping sound. Perhaps it’s improved over time? I liked the lighterweight/easier-to-integrate nature of the library, but functionality is more important. Does the font name seem correct, before the “src” and “url” values? It should be something like “Myriad Pro Bold” or whatever

yes, all of them are correct (font-family, name, url, exts). Corrupted converted fonts possible?

If I compare Howler and SoundJS, I agree with you that SoundJS has more features and better in my opinion. But there is no fileerror event.
Are you planning to add PreloadJS or emulate it?

Thanks

I don’t know, it’s 30 KB for one error event. What a nuisance :slight_smile:

1 Like

But it’s better than the whole game broken… haha

Now I have a workaround, maybe this is useful for who need it fast/waiting for this fix:

  1. Use haxe-howler, download here : https://github.com/adireddy/haxe-howler, or

    haxelib install howlerjs

  2. While the stuck caused by generated code of OpenFL, we must do something about assets type:

template type of assets can prevent the game to try to load assets at the preloader.

and dont forget to include dependency

<dependency path="dependencies/howler.min.js" />

That’s it, good luck!

I’m experiencing the same bug despite the fact I’m not using any sound.

On old generation tablet, loading get stucks.

Can you tell if a JavaScript error is occurring, or what might be going on?

There was a fix recently in Lime, which included a patched “Std.is” implementation from the Haxe dev branch, on Safari it would fail, while other browsers worked fine. It’s possible that an older tablet could also be vulnerable to this issue, I’m not sure which versions you’re using

IPad 2 but a quite recent IOS version and a Samsung Galaxy Tab 3.

On the Samsung Galaxy 3, I can’t get a click whereas the hovering works fine. Since I’m using the lib for production. I think I should downgrade to the latest stable lime instead of using the alpha version. However, I don’t know which is the latest ? Is it any 2.0 stable release ?

@Masadow Are you using Flixel? because it does use sound (beep/flixel.ogg/wav) even when you don’t. If you are, the solution is to delete the sound files from your assets (it won’t cause errors AFAIK). I had the same issue on openfl-html5 many months ago.

About the thread (sound and HTML5) I saw (over FGL) that .m4a files might make good candidates for html5 stuff (with little tweaking, mostly instead of the .mp3 format which is legally problematic). Loading properly formated .ogg / .m4a files per html5 browser target without it breaking should be theoretically possible.

#if Android-device-name

might be useful (only for the tricky devices of course). It might also help with other device-specific issues (like lag).

I’m seeing both of these issues occur for me (font and sound causing game not to load). First, I’ll address the font side since I’ve got temp fix.

Fonts are actually working just fine for me in every web browser (Chrome, Firefox, Safari, IE on all platforms) except when using Android. The game never finishes loading here. It does generate the correct JS (as mentioned above in previous post) and does render correctly on Android if you can get beyond the loading issue.

The problem seems to lie in Preloader.hx (or one of those related classes). I think it’s attempting to do a load on the TTF files and hangs. If you modify function load() in Preload.hx, you can add a case in the switch to handle fonts:

#if js
case FONT:
urls[ i ] = null;
types[ i ] = null;
#end

By setting these to null, it seems to skip them properly later in the pipeline and allows Android to complete the load and start the game along with all the other browsers. I’m assuming we wouldn’t want fonts to be part of the load process anyway, since they are embedded into the js code and there’s nothing to load. Hopefully this helps some openfl devs get to the issue quickly.

As far as sound goes, I only have issues on Windows mobile devices (IE11). Windows phones will not finish preloading if ANY audio is present. I have the load problem with other browsers depending on what sound formats are provided; for instance Chrome on PC will do this if an OGG is not provided (even if MP3/M4A is). Again in Preloader.hx, I see it is stripping the extension and replacing it with OGG only (maybe windows mobile has a problem with this?). This should be okay since the browsers (with soundjs) will fall back to other formats, but if you don’t provide fallback formats then the preload will not finish always complete.

I’d like to provide OGG and fallback to M4A (but I saw elsewhere in soundjs’s alternate extension array M4As are not present) or just go solo M4A, so not sure if that will work in openfl (yet?). I don’t care about MP3 all that much since M4As and OGGs are better for web. I don’t want to get into the sound playback support boat in this thread, so I’ll seek out a more appropriate place to continue, but it is related.

So hopefully some of the testing I’ve done this week will help some devs figure these hiccups out. Can answer more questions or provide more if needed : )

Happy hunting.

Hi @jonnym

Thanks for the rundown

When we use webfonts, they are not loaded initially. If you use a sample such as “AddingText”, which sets text once and moves on, it won’t work properly. Only if the text is rendered after the web font is available will it look right, so if you disable the loading, it would depend on your project and how it is written, whether you will notice the problem. I suppose we should try and see if there is a solution for waiting for web fonts to load on Android, or (worst-case) selectively disable for the user-agent

We’re using SoundJS right now, which is really finnicky about sound loading, yes, it does expect WAV, MP3 and OGG of each audio file, since none of these three formats can apply to all browsers, but I understand how this breaks down once you get into other formats like AAC, M4A, etc. I would love to see improvements in this area, I’m not sure if a newer SoundJS lib would fix it, or if we could patch it, but ultimately I would like to have an implementation of the Lime AudioSource API done in Haxe code instead using an external library, long-term I think it will give us more flexibility and feel less helpless when it comes to problems