CODEWITHSUNDEEP
javascripthtmlangularhttp-status-code-404html5-audio
zyydoosh
zyydoosh

Reputation: 379

audio tag doen't work in angular, 404 not found error

I have a .wav audio file, I'm testing with simple audio tag, but it doesn't work, it's in my app.component.html

<audio class="col-8" controls="">
  <source src='test.wav' type="audio/wav" />
</audio>

it gives me 404 not found error. Here is a screenshot of firefox console

I put my test.wav file in every directory of the project to avoid path problems and avoid not found, but it didn't help!

I tried the same snippet with online wav file, it works, so I tried the audio tag in a simple html file away from the angular project, it worked, so the problem is not the audio.

Can anyone help?

Upvotes: 0

Views: 1155

Answers (3)

vel Dinesh
vel Dinesh

Reputation: 11

audio play in Angular 14 using folder path

TypeScript:

playSound(){

  let audio=new Audio();
  audio.src="../assets/uploads/mixkit-positive-notification-951.wav";
  audio.load();
  audio.play();

}

Html Code:

<button mat-raised-button color="accent" (click)="playSound()">Play Sound</button>

Note: It's working in the Angular 14 version. you can try an angular different version.

Upvotes: 1

zyydoosh
zyydoosh

Reputation: 379

I put it in assets folder, and make src="assets/filename", it worked.

Upvotes: 0

Marcus
Marcus

Reputation: 113

Have you tried changing the path? I get this problem sometimes when trying to link to a file.

Example:

<audio class="col-8" controls>
 <source src='./test.wav/' type="audio/wav" />
</audio>

Note: You don't need to add the quotation marks after the controls attribute.

Upvotes: 0

Related Questions