Dev blog

Angular Audio Component error while changing source or replay

25 November 2025

Category: Mini

Hello!
So, was stuck a bit with this cheeky error

Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.

or

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

Like everybody else, I tried Google link from the error message, but example there is both (imho) wrong and does not help solve the issue. I’m using audio component as a part of custom playlist player and had to experiment quite a bit to make it all work as I need to.

Main takeaways from this frustrating couple hours:

• to change source dynamically, I had to use [src] on audio component, not use source sub-element.
• what worked for me in handling reload of the source and starting playing it was this (modified code from Google docs page) code you can find bellow.
• setting progress bar on “controls” element is trough ViewChild-ed audio element this.audioRef.nativeElement.currentTime
• update progress is happening regularly 1 tick after audio is paused so need to gate it somehow, it’s that shouldUpdateProgress in the snippet, can’t use signal for it.

Snippets from component encapsulating audio element:

@ViewChild('audio') audioRef!: ElementRef<HTMLAudioElement>;

ngAfterViewInit() {
    this.audio = this.audioRef.nativeElement;
}

readonly maximumPlayRetries: number = 5;
private retryNr: number = 0;

  private handlePlay() {
    let playPromise = this.audio.play();

    if (playPromise !== undefined) {
      playPromise.then(_ => {
          this.shouldUpdateProgress = true;
          this.retryNr = 0;
      })
        .catch(_ => {
          this.retryNr += 1;

          if (this.retryNr >= this.maximumPlayRetries) {
            console.log('Maximum number of retries reached, aborting...');
            
            return;
          }

          console.log('error post audio.play(), trying replay, attempt nr.: ', this.retryNr);
          setTimeout(() => { this.handlePlay(); }, 100);
        })
    }
  }

So far I saw maximum of 1 retry.

For the sake of completion, my super-basic setup of audio component:

<audio #audio
       (timeupdate)="updateProgress()"
       (ended)="onEnded()"
       [src]="currentTrack().trackUrl"
       controls
       (play)="onPlay()"
       (pause)="onPause()"
>
    Your browser does not support the audio element.
</audio>

If this post saves one person that time I lost while figuring it out, great <3

Cheers!

Petr