Search code examples
javascriptcreatejs

The audio did not play after function called with preload.js of createjs' series

I worked on a HTML5 game. I used createjs to preload images. When the images finish preloading, a BGM need to play automatically.

I known that chrome new audio policies. And I am very confused that I use function handleComplete to trigger the audio. Why does it still not work? How should I make it work?

Here is my code:


function Sound (id_str){ this.id = id_str; }

Sound.prototype.play = function () {

    //there are other logics, but can simply like below

    let audio = document.getElementById(this.id);
    audio.play().catch(e =>console.log(e));
};

var audio_bg = new Sound('bgm_id');



windows.onload = function preload (handleFileProgress,handleComplete){
    let manifest = [...];

    loader = new createjs.LoadQueue(false);
    loader.setMaxConnections(100);
    loader.maintainScriptOrder=true;
    loader.installPlugin(createjs.Sound);
    loader.loadManifest(manifest);
    loader.addEventListener('progress', handleFileProgress); 
    loader.addEventListener('complete', handleComplete);

};

function handleFileProgress(){...}

function handleComplete(){
    //...
    audio_bg.play();

}

The error I caught was:

NotAllowedError: play() failed because the user didn't interact with the document first.
Solution

  • The error you are seeing is due to changes in security in the browser, where you can't play audio without a user action to kick it off. SoundJS already listens for a browser input event (mouse/keyboard/touch) to unlock audio, but if you try to play audio before this happens, then it will fail.

    To show this, quickly click in the browser before the file is loaded, and it will likely play.

    The recommendation is to put audio behind a user event, like "click to get started" or something similar. It is an unfortunate side-effect of the security improvements in browsers :)