Can't add audio to my game

Hi There,

I am trying to learn how to put sound effect audio in my game but I can’t get it to work.

import Phaser from 'phaser'

const gameState = {
    playerSize: 50,
    playerSpeed: 400,
    playerHealth: 3,
    playerColor: 0x41E20E,
    enemies: []
}
export default class GameScene extends Phaser.Scene
{  


    preload()
    {
         //load sound effects
        this.load.audio('hit', 'assets/sfx/test.mp3')
    }

    create()
    {   //create plater
        gameState.player = this.add.rectangle(300, 300, gameState.playerSize, gameState.playerSize, gameState.playerColor); 

        this.physics.add.existing(gameState.player)

        gameState.player.body.collideWorldBounds = true;
        
        //create cursor keys
        gameState.cursor = this.input.keyboard.createCursorKeys();

        //create's the first enemy
        this.createEnemy();

        //Assign sfx
        gameState.sfx = {};
        gameState.sfx.hit = this.sound.add('hit')

    }
    update()
    {

        if (gameState.cursor.left.isDown)
        {
            gameState.player.body.velocity.x = -1*gameState.playerSpeed
        }
        else if
        (gameState.cursor.right.isDown)
        {
                gameState.player.body.velocity.x = gameState.playerSpeed
        }
        else
        { 
            gameState.player.body.velocity.x = 0
        }

        if (gameState.cursor.up.isDown){
            gameState.player.body.velocity.y = -1*gameState.playerSpeed
        }
        else if (gameState.cursor.down.isDown)
        {
            gameState.player.body.velocity.y = gameState.playerSpeed
        }
        else
        { 
            gameState.player.body.velocity.y = 0
        }
    }   
    
    createEnemy()
    {
        let enemy = this.add.circle(300,300,25,0xf00000)    
        this.physics.add.existing(enemy)
        enemy.body.collideWorldBounds = true
        enemy.body.velocity.x = 100
        enemy.body.velocity.y = 100
        enemy.body.bounce.x = 1
        enemy.body.bounce.y = 1
        this.physics.add.collider(gameState.player, enemy, ()=>{
            gameState.player.body.velocity.x = 0;
            gameState.player.body.velocity.x = 0;
            enemy.destroy()
        })
        gameState.enemies.push(enemy)

    }
}

my code keeps getting hung up in preload(). I get a long error message:

phaser.js:123034 Error decoding audio: hit - Unable to decode audio data
(anonymous) @ phaser.js:123034
phaser.js:106625 Uncaught Error: Audio key “hit” missing from cache
at new WebAudioSound (phaser.js:106625)
at WebAudioSoundManager.add (phaser.js:106189)
at GameScene.create (GameScene.js:36)
at SceneManager.create (phaser.js:100338)
at SceneManager.loadComplete (phaser.js:100250)
at LoaderPlugin.emit (phaser.js:1908)
at LoaderPlugin.loadComplete (phaser.js:196794)
at LoaderPlugin.fileProcessComplete (phaser.js:196760)
at AudioFile.onProcessError (phaser.js:4980)
at AudioContext. (phaser.js:123036)
WebAudioSound @ phaser.js:106625
add @ phaser.js:106189
create @ GameScene.js:36
create @ phaser.js:100338
loadComplete @ phaser.js:100250
emit @ phaser.js:1908
loadComplete @ phaser.js:196794
fileProcessComplete @ phaser.js:196760
onProcessError @ phaser.js:4980
(anonymous) @ phaser.js:123036
localhost/:1 Uncaught (in promise) DOMException: Unable to decode audio data

What am I doing wrong?

Open the Network pane in browser dev tools, find the “test.mp3” file, find the full URL, open it in the browser.

1 Like

I managed to solve this one. I needed to move my files to the “dist” folder in my project setup and it started working fine. I’m not really sure why but I’m happy it’s working.