preloadjs + howler audio doesn't play

Question

I was trying to make my first website. I'm working on local, so if you need an online website for debug it, I can upload it. I want to create a preload section on the first visit where show a preload bar/% progress and load all elements before show the page. I'm doing the audio part and the preloader of the website. To accomplish this part, I'm using howler.js for audio management and preloadjs.js for the preloader part. The problem that I can not solve is to start the mp3 at the complete function of the mp3 load. Below is the code I used.

This is the music part with howler.

var baseurl = document.location.origin;
var soundfolder = baseurl+'/alink/wp-content/themes/alink/media/sounds/';

//SOUNDS EFFECTS
var bgmusic = [soundfolder+'background.mp3', soundfolder+'background.ogg'];

//Music background
var musicbg = new Howl({
    src: [bgmusic[0], bgmusic[1]],
    loop: true,
    volume: 0.5,
    preload: false,
});

This is the preloader part with prealodjs.

//PRELOADER
var manifest;
var preload;
function setupManifest() {
    manifest = [{
        src:  baseurl+"/alink/wp-content/themes/alink/media/sounds/background.mp3",
        id: "mp3file"
    }
    ];
}
function startPreload() {
    preload = new createjs.LoadQueue(true);
    preload.on("fileload", handleFileLoad);
    preload.on("progress", handleFileProgress);
    preload.on("complete", loadComplete);
    preload.on("error", loadError);
    preload.loadManifest(manifest);
}
function handleFileLoad(event) {
    console.log("A file has loaded of type: " + event.item.type);
}

function loadError(evt) {
    console.log("Error!",evt.text);
}


function handleFileProgress(event) {
}

function loadComplete(event) {
    console.log("Finished Loading Assets");
    musicbg.play();
}
setupManifest();
startPreload();

Following some tutorials and js library guidelines, in the howler call I entered the "preload: false" parameter.

Without the preload part and without the "preload: false" parameter, the musical part works perfectly. By inserting the parameter and the code part of the preloader, when the loadComplete() function is called, the music does not start. (in the console the function is called correctly.

I really can not figure out where the problem is, so I ask you what I'm doing wrong. I think there is a missing part where the file loaded from preloadjs functions is not related to howler call and it can't find the mp3 file in the cache.

Thank you very much for your help.

Answer 1

if you load audio using PreloadJS without SoundJS "installed" to assist with preloading, the audio can only be loaded as HTMLAudio, which is pretty limited. I am fairly certain Howler uses the WebAudio context, so it would just re-load the audio when it needs it.

PreloadJS is really only designed to load WebAudio sounds to be played with SoundJS. In fact, it actually uses a lot of shared code to download and prepare audio for playback. This is not necessarily by design (to prevent usage of other libraries), but WebAudio uses a shared audio context when preloading audio buffers, and PreloadJS knows how to share that context with SoundJS. Howler is probably similar, where it preloads using an audio context it knows how to work with.

As a maintainer of the CreateJS libraries I am certainly biased, but if you want to preload audio with PreloadJS, then SoundJS is a better option than Howler.

var queue = new createjs.LoadQueue();
queue.installPlugin(createjs.Sound); // Tell PreloadJS to use SoundJS to load audio
// ... other queue stuff

// After loading is done:
createjs.Sound.play("soundId");

Hope that helps.