I am trying to load an audio and i am getting two erros, but everything is fine and the source is correct.

errors:

• GET http://localhost:4200/src/assets/sound/wele_Rift.mp3 404 (Not Found) -Uncaught (in promise) DOMException: Failed to load because no supported source was found.

javascript:

this.sound = new Audio();
        this.sound.src = 'src/assets/sound/wele_Rift.mp3';
        this.sound.load();
        this.sound.play();

file path : src/assets/sound/wele_Rift.mp3

I dont know why i am getting this eror, can anyone help me?

I am trying to load an audio and i am getting two erros, but everything is fine and the source is correct.

errors:

• GET http://localhost:4200/src/assets/sound/wele_Rift.mp3 404 (Not Found) -Uncaught (in promise) DOMException: Failed to load because no supported source was found.

javascript:

this.sound = new Audio();
        this.sound.src = 'src/assets/sound/wele_Rift.mp3';
        this.sound.load();
        this.sound.play();

file path : src/assets/sound/wele_Rift.mp3

I dont know why i am getting this eror, can anyone help me?

• javascript
• angular
• dom
• audio

1 Answer 1

GET http://localhost:4200/src/assets/sound/wele_Rift.mp3 404 (Not Found)

The 404 error means that your media file has not been found. That could be a number of things. If the path is correct then it could be the localhost server which does not know where src/assets/sound/wele_Rift.mp3 should point towards. Might be an idea to check if a file from src/wele_Rift.mp3 does work to see where the problem lies.

DOMException: Failed to load because no supported source was found.

This is because HTMLMediaElement.play() returns a Promise. The part where it says Uncaught in promise means that the promise has no way to handle the error and should add some promise logic with a catch() method to it. This method allows you to do something whenever an error occurs.

this.sound = new Audio();
this.sound.src = 'src/assets/sound/wele_Rift.mp3';
this.sound.load();
this.sound.play()
  .then(() => {
    // Audio is playing.
  })
  .catch(error => {
    console.log(error);
  });

Older browsers might not return a Promise when executing play() so in that case you should check if it returns a promise or not.

this.sound = new Audio();
this.sound.src = 'src/assets/sound/wele_Rift.mp3';
this.sound.load();
const promise = this.sound.play();
if (promise !== undefined) { // On older browsers play() does not return anything, so the value would be undefined.
  promise
    .then(() => {
      // Audio is playing.
    })
    .catch(error => {
      console.log(error);
    });
}