Cannot get audio to play in a Phaser 3 game


I’m trying to learn how to put audio in a Phaser 3 game. Right now, my code can’t even get passed preloading the audio:

    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/hitSound.wav')
    }

    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)

    }
}

I get the Error Message:

phaser.js:123418 Error decoding audio: hit -  Unable to decode audio data
(anonymous) @ phaser.js:123418
phaser.js:106996 Uncaught Error: Audio key "hit" missing from cache
    at new WebAudioSound (phaser.js:106996)
    at WebAudioSoundManager.add (phaser.js:106577)
    at GameScene.create (phaser.js:1)
    at SceneManager.create (phaser.js:100720)
    at SceneManager.loadComplete (phaser.js:100636)
    at LoaderPlugin.emit (phaser.js:2218)
    at LoaderPlugin.loadComplete (phaser.js:197141)
    at LoaderPlugin.fileProcessComplete (phaser.js:197109)
    at AudioFile.onProcessError (phaser.js:5321)
    at AudioContext.<anonymous> (phaser.js:123419)
WebAudioSound @ phaser.js:106996
add @ phaser.js:106577
create @ phaser.js:1
create @ phaser.js:100720
loadComplete @ phaser.js:100636
emit @ phaser.js:2218
loadComplete @ phaser.js:197141
fileProcessComplete @ phaser.js:197109
onProcessError @ phaser.js:5321
(anonymous) @ phaser.js:123419
localhost/:1 Uncaught (in promise) DOMException: Unable to decode audio data

I’m a very new coder so I don’t know if there is something silly that I’m missing. I’ve triple checked that the pathway and file name is correct. All the tutorials online make it look so easy.

Source: JavaSript – Stack Overflow

November 26, 2021
Category : News
Tags: game-development | html5-audio | javascript | phaser-framework

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.