1

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!

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.