Error where my song key is missing from cache in Phaser JS

Question

This is my first time adding audio in a Phaser (3.60.0) game and so I might have an obvious mistake but when I searched online I couldn't find an answer that fixed my problem. The error from the Firefox console is :

Uncaught Error: Audio key "backgroundMusic" missing from cache

and is triggered by this line:

//create functuon:
const backgroundMusic = this.sound.add('backgroundMusic');
this.backgroundMusic.loop = true;
this.backgroundMusic.play();

some other information that might be helpful:

//preload function:
this.load.audio('backgroundMusic', '.\music\backgroundMusic.mp4');




//config:
const config = {
  type: Phaser.AUTO,
  width: 500,
  height: 500,
  physics: {
    default: 'arcade',
    arcade: {
      debug: false
    }
  },
  scene: {
    preload,
    create,
    update
  }
};

What do I need to change or add to make the error disappear?

Answer 1

The issue is that you are using a mp4 file-extension, what is usually a video. and you should use file of type / extensions: ogg, mp3, m4a, ... (check this list for completeness), and depending on the browser support.

Theoretically you could rename your file, to backgroundMusic.mp3 or so. BUT better would be to convert it to the "correct" filetype / format.

(Tipp: load multiple filetypes to have the best browser compatibility. like this this.load.audio('title', [ 'music/Title.ogg', 'music/Title.mp3', 'music/Title.m4a' ]);, checkout the documentation for details)