loading local file in <audio> tag working alternately

Issue

I need to load local audio file into <audio> tag.

I did it with the following code.

Let the user choose a file with:

<ion-input type="file" (change)="laodLocalFile($event)">

Prepare it for <audio> tag:

laodLocalFile(event: any)
{    
  file_url = URL.createObjectURL(event.target.files[0]);
  document.getElementById('audio_file').setAttribute("src", file_url);
}

And use it as following:

<audio id="audio_file" type="audio/mpeg" controls></audio>

I tried it with several different mp3 files. It worked several times, but most of the times it didn't work, without any warning or error.

What can be the issue?

Solution

You need to use domeSanitizer and bypassSecurityTrustUrl() this method bypass security and trust the given value to be a safe style URL, i.e. a value that can be used in hyperlinks or src

constructor(private domSanitizer:DomSanitizer) {    }

And in your method: ...

this.mediaSrc = this.domSanitizer.bypassSecurityTrustUrl(file_url);

Answered By - Mohammad Babaei