I am trying to upload an audio file in Angular. The purpose is to be able to reproduce it and do some little work on it such as play,stop, get timestamp of pause marker ecc... I can upload through the use of input, FileReader and the tag audio:

Typescript:

  onAudioSelected(files: any) {
    let addedFile = files.addedFiles[0]
    console.log(addedFile)
    if (addedFile && addedFile.type.match(/audio\/*/)) {
      let reader = new FileReader();
      reader.readAsDataURL(addedFile);
      reader.onload = (e: any) => {
        const resource = {
          file: addedFile,
          base64encode: reader.result as string,
          mimeType: addedFile.type,
          id: Math.floor(Math.random() * 100),
          title: addedFile.name,
          url: reader.result as string
        };
        this.audio = resource;
        setTimeout(() => {
          this.initProgressBar()
        }, 300)
      }

HTML

<audio #audioEl [src]="audio.url | safe" (timeupdate)="initProgressBar()"></audio>

SafePipe

transform(value: string, ...args: unknown[]): unknown {
    return this.sanitizer.bypassSecurityTrustResourceUrl(value);
  }

The problem is that using the sanitizer, i could get some Xss problems, and i need to avoid them. If i don't use the sanitizer the following error occurs:

err_unknown_url_scheme

and i am not able to reproduce the audio. It would be great if someone could help me, thanks a lot!