CODEWITHSUNDEEP
javascripthtmlangulargoogle-chromehtml5-audio
Ankit Porwal
Ankit Porwal

Reputation: 41

HTML Audio Tag getting error - Audio Render on Chrome

I am working on Angular Application where user can play audio files. For this, we need to get the file as blob from api and then create blobURL and assign that to the src attribute of HTML Audio but on chrome, sometimes (really strangely) it gives the following error - 

MediaError
    code: 3
    message: "AUDIO_RENDERER_ERROR: audio render error"

If i try again for few times it plays and then all files plays without any error. Also, if i try after sometime, it starts playing without any error. Works fine on firefox though.

Here is the code which get audio from api - 

res.subscribe((audioData) => {
        this.unsafeBlobUrl = URL.createObjectURL(audioData);
        this.audio.nativeElement.addEventListener('error', onError);
        this.audio.nativeElement.addEventListener('ended', onEnded);
        this.audio.nativeElement.addEventListener('paused', onPaused);
        this.audio.nativeElement.addEventListener('canplay', canPlay);
      }, onError)

Here is the code for Playing audio - 

 const canPlay = () => {
      this.audio.nativeElement.play()
        .then(() => {
          this.isPlaying = true;
          this.isLoading = false;
          this.isError = false;
        })
        .catch(onError);
    };

Upvotes: 2

Views: 780

Answers (1)

Ankit Porwal
Ankit Porwal

Reputation: 41

Ok i found the issue.

Actually, i was initializing Audio Context multiple times which leads to this error. 

this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();

Removing this line saved my life :)

Upvotes: 2

Related Questions