Loading bar issue for large audio file

[kkiiji]

Hello all, 

While recently making a game I ran into an issue with setPreloadSprite. The load bar is working as expected, however when I looked at its behavior and the source code it was apparent that the loading bar works based on number of files loaded, not the size of the files. So I have a bunch of sprites that are relatively small and one large mp3 file. Does anyone have experience with this situation? Is there a way to split the mp3 file, load it, and then combine it back or something? Are there any other ways to make the loading bar more accurately reflect real loading time? 

Right now the loading bar loads all the way to the end, and then halts while it loads the large mp3 file. Any advice on fixing this would be appreciated. 

Thanks,

[Batzi]

what do you mean it halts while it loads the large mp3 file? You mean it keeps loading in the background while the bar has finished loading?

[rcoaxil]

Phaser loader doesn't knows anything about size of the files you're loading, so it uses file count as progress indication. If you wanted to display progress based on amount of data loaded, you'd have somehow know in advance total size of files you're loading. It is usually applicable to use "onprogress" event of a loaded element, which returns you exactly how much data was loaded and how much there is to load total, but 1) it wouldn't return any data until the loading have actually started, which may take a while, and 2) you'd have to hack into Phaser.Loader class. Though if you precisely knew all file sizes in advance and could just pass them to Loader class, then hacking it to display progress based on bytes rather than file count would be entirely feasible operation and would actually work well. Even if that wasn't the case, you could still just put byte progress bars for individual files, and put file count next to them.

Oddly enough, Loader actually has "onprogress" event handler punched into it, but it's a blank function. You'd have to change it to something like this:

xhr.onprogress = function ( bytes ) {
    this.onProgress.dispatch ( file, bytes );
}

But of course there's very many of specific loader functions, and you'd need to do this with every single one of them.

And in the class header you'd need to create appropriate event:

this.onProgress = new Phaser.Signal ( );

Then on loading progress you'll receive a Phaser.Signal with first argument to callback function being file structure (you only need its "key" field really) and the DOM event.

callback = function ( file, bytes ) {
    if ( bytes.lengthComputable ) {
        loadingbars [ file.key ].fraction = bytes.loaded / bytes.total;
    }
}

Note that length may not be computable, e.g. if total file size is not known and it's just loading the stream until it finally ends, without expecting end of file at any particular point.