title: HTML Audio Tag getting error - Audio Render on Chrome
body: <p>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 - </p>
  
  <pre><code>MediaError
      code: 3
      message: "AUDIO_RENDERER_ERROR: audio render error"
  </code></pre>
  
  <p>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.</p>
  
  <p>Here is the code which get audio from api - </p>
  
  <pre><code>res.subscribe((audioData) =&gt; {
          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)
  </code></pre>
  
  <p>Here is the code for Playing audio - </p>
  
  <pre><code> const canPlay = () =&gt; {
        this.audio.nativeElement.play()
          .then(() =&gt; {
            this.isPlaying = true;
            this.isLoading = false;
            this.isError = false;
          })
          .catch(onError);
      };
  </code></pre>