Play An MP3 in Angular Using <audio> Tag

user_12114075 0
Viewed 1636

Very new to Angular. I'm trying to play a hard-coded mp3 file with Angular

I have the mp3 file in the same path as my component, and I'm trying to use the tag like:

<audio controls src={{./name-of-file.mp3}}></audio>

However, this is not working. Is there a straightforward way to hardcode a brief mp3 file into my app?

angular
4 Answers

Okay, actually it looks like Angular just didn't like the file location. Moving the audio file to another folder did the trick: <audio controls><source src="../../audio/name-of-file.mp3" type="audio/mpeg" /></audio>

user_121140750

any img/icon/music should be put in the assets folder

or you could configure in angular.json other assets folders paths

user_130877040

for audio

<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>
user_140454840

This also should work. In your typescript file, You can set myAudio variable with the audio source

<audio controls><source [src]="myAudio" /></audio>
user_78713730
Related