Force PreloadJS to use XHR for all loading

Question

I'm using PreloadJS as part of an application that's being built with the CreateJS libraries. PreloadJS is being used to pull in graphics and audio files listed in a manifest. I've setup a progress bar and hooked the preloader's fileprogress and fileload events to update it. I'm getting progress updates as the images load, so I can see the progress bar crawling along, but I never get fileprogress updates for the audio files, just the fileload (file is completely loaded) so the progress bar sits idle and then suddenly jumps to 100%. Since the audio files are by far the largest assets, this creates something of a problem as far as providing meaningful load progress to the user.

I've looked at the documentation for PreloadJS and it indicates that XHR loading is the preferred method because it does provide the progress updates, but that PreloadJS can fall back on things like tag-based (<audio>) loading of audio files.

None of the file loading is local or cross domain, so it would seem to me that PreloadJS ought to be using XHR.

Is there a way to force PreloadJS to use XHR for everything so I can get consistent progress updates or why would I not be getting progress events for these much larger files?

Answer 1

I believe there are open bugs in PreloadJS and SoundJS which prevent audio loading from reporting progress. I have logged issues for both libraries: https://github.com/CreateJS/PreloadJS/issues/99 https://github.com/CreateJS/SoundJS/issues/119

Some additional info: Although PreloadJS will try and favor XHR-based loading for filetypes it controls, audio loading works a little differently.

SoundJS actually injects the functionality into PreloadJS to handle loading, and will not respect the useXHR parameter, instead relying on the browser capabilities (and SoundJS plugins) to load and play audio. Unfortunately, web audio requires an array buffer (loaded with XHR), whereas HTML audio requires HTML tags, so the playback capabilities dictate how audio files load.

By default, SoundJS will default to load/use the following plugins in order:

1. WebAudio (therefore XHR)
2. HTML (therefore tag-loading)

This should favor XHR-loading and webaudio for most browsers (IE is the standout that will almost always require HTML loading). You can force plugin order by registering the plugins manually before you begin playback/

Thanks for the surfacing this!

Answer 2

@Lanny is correct, there are open bugs for this issue. Currently SoundJS is setup in a way that always uses Tag loading with PreloadJS, even when using WebAudio which loads via xhr. The result is that regardless of plugin, there is currently no way to get progress events.

The good news is that we are currently in the process of revising how loading works between PreloadJS and SoundJS and this issue should be resolved.