Phaser 3 not finding my .mp3 or .ogg files

Phaser 3
1

I am receiving the following message as I am trying to get my audio working: GET http://localhost:1234/assets/audio/shimmering-burst.mp3 404 (Not Found) . It doesn’t matter if I am using .ogg or .mp3, I will still get the same error. I am using Chrome and developing on VS Code. I set up the audio files using Sound Forge. I am hoping that if I can get it to recognize my files, I can get the audio to work. It is a pretty large and complex layout with most everything else already working. I am calling them like this in my preload: scene.load.audio(‘whip’, [
‘…/assets/audio/shimmering-burst.mp3’,
‘…/assets/audio/shimmering-burst.ogg’,
]);
Adding this in my create: whip = scene.sound.add(whip);
And calling them when I press a button like this: whip.play();
Thanks for your help!

2

A 404 Not Found suggests that they don’t exist in the place you’re pointing to - in this case, http://localhost:1234/assets/audio/shimmering-burst.mp3. This URL suggests that your sound files are in a directory called audio, which is inside a directory called assets inside your webroot. Are your files actually in that place? You can also try visiting http://localhost:1234/assets/audio/shimmering-burst.mp3 from your browser - if again get an error, you can be certain that your files aren’t in the correct place.

1 Like
3

It sees there is a file there so long as I don’t add the file type like .ogg or .mp3. All of the sample code shows with the file types in the code like http://localhost:1234/assets/audio/shimmering-burst.mp3. When I call it like this in preload- scene.load.audio(‘whip’, ‘…/assets/audio/shimmering-burst’); Adding this in my create: whip = scene.sound.add(whip);
And calling them when I press a button like this: whip.play(); I get this message now when I trigger the SFX: Uncaught TypeError: Cannot set property ‘seek’ of undefined

4

If you’re using Parcel, the assets need to be imported or required. The paths then get transformed.

scene.load.audio('whip', [
  require('../assets/audio/shimmering-burst.mp3'),
  require('../assets/audio/shimmering-burst.ogg')
]);
5

We are using VS Code on this project. When I have called it exactly like you have in your example, Chrome is giving me the error I have described above. The audio is the only big piece I don’t have working at this point. We set up the project as several classes rather than a single page like all of the examples I have seen. I really need a working solution ASAP. I have tried every example I have found and not been able to get any audio working so far. Thanks for your help!

6

What do you actually see when you open these URLs in your browser?

http://localhost:1234/assets/audio/shimmering-burst.mp3
http://localhost:1234/assets/audio/shimmering-burst.ogg
http://localhost:1234/assets/audio/shimmering-burst
7

When I put in http://localhost:1234/assets/audio/shimmering-burst.mp3 or http://localhost:1234/assets/audio/shimmering-burst.ogg I get an error saying they don’t exist. If I put in http://localhost:1234/assets/audio/shimmering-burst, the game begins to play. These are the same results I get when I put in an art asset like http://localhost:1234/assets/sprites/1_powerup.png (returns an error) and http://localhost:1234/assets/sprites/1_powerup plays the game. The big difference is all of the artwork works in the game (import it, add it in the preload, call it in the create.) Using the same steps for the audio just throws errors. I really appreciate your help!

8

What are you using as a web server (what is running on localhost:1234)?

What output do you get for

console.log(require('../assets/audio/shimmering-burst.mp3'));

If you’re running a watcher/server like Parcel, you need to look in the terminal/console too for errors.

9

We are using yarn to build and display it. This is what it showed in the console: /shimmering-burst.2b76242c.mp3. Thanks again!

10

That suggests the file is at http://localhost:1234/shimmering-burst.2b76242c.mp3.

Use

scene.load.audio('whip', [
  require('../assets/audio/shimmering-burst.mp3'),
  require('../assets/audio/shimmering-burst.ogg')
]);

Save the file and reload the page in Chrome. If you get a 404 error in Chrome, note the 404 URL, exactly.

Look in the public folder (or whatever it’s called) in your project. What files are inside?

11

It is not giving me any loading error any longer thanks to you!. I added the text you supplied in my preload(). I add this in create(): scene.sound.add(whip);. When I click the button I add this: when they button is clicked: whip.play(); . I am getting the following error when the button is clicked:
Uncaught TypeError: _shimmeringBurst.default.play is not a function
I also tried removing the code from create() and got the same error.
I really appreciate your help on this!

12

Follow play audio file. You should have something like

var whip = scene.sound.add('whip');

whip.play();
13

I slightly altered what you gave me and now have audio working. I just had to change this. to scene. Thank you so much for your help!!