Audio stops in background after 3–4 minutes when a new track starts

[Milapcontriverz]

Audio stops in background after 3–4 minutes when a new track starts on android.

[wsamoht]

Please share some code. How are you adding a new track?

[Milapcontriverz]

When a track is 20 minutes long, playback stops after it completes and does not automatically move to the next chapter.

When a track is 2 minutes long, it automatically proceeds to the next track and starts playback in the background. However, after the next audio finishes, the audio player stops completely.

If the app is reopened after this, the audio track resumes playback.

async playOnline(isTrue = false) {
console.log("playOnline called----->");
this.autoNextTriggered = false;
if (this.audioId) {
try {
await AudioPlayer.stop({ audioId: this.audioId }).catch(() => {});
await AudioPlayer.destroy({ audioId: this.audioId }).catch(() => {});
await new Promise(resolve => setTimeout(resolve, 100));
} catch (error) {
console.log('Error cleaning up previous audio:', error);
}
}

this.audioId = 'audio-' + Date.now();

var a = this.currentTrackInfo["duration"].split(":");
if (a.length == 2) { a.unshift("00"); }
this.displayDuration = +a[0] * 60 * 60 + +a[1] * 60 + +a[2];
this.position = 0;

console.log('Attempting to play MP3:', this.mediaUrl);
console.log('AudioId:', this.audioId);

try {
  console.log('Creating AudioPlayer...');
  await AudioPlayer.create({
    audioId: this.audioId,
    audioSource: this.mediaUrl,
    friendlyTitle: this.currentTrackInfo["track_name"] || 'Unknown Track',
    albumTitle: this.currentTrackInfo["album_name"] || 'Unknown Album',
    artistName: this.currentTrackInfo["artist"] || 'Unknown Artist',
    useForNotification: true,
    showSeekBackward: true,
    seekBackwardTime: 10,
    showSeekForward: true,
    seekForwardTime: 10,
    isBackgroundMusic: true,
    artworkSource: this.currentTrackInfo["live_image"] || this.currentTrackInfo["track_image"]
  });

  console.log('AudioPlayer created with backward button prioritized');

  console.log('Initializing AudioPlayer...');
  await AudioPlayer.initialize({ audioId: this.audioId });
  
  console.log('Setting up events...');
  this.setupAudioPlayerEvents();
  
  this.updateMediaSessionMetadata();
  
  this.lastHeard();
  
  console.log('Setting rate...');
  await AudioPlayer.setRate({ audioId: this.audioId, rate: this.rate });

  var sleeepTime = Number(localStorage.getItem("autosleeptime"))
  if (sleeepTime == -1 && !this.isOpenPage && !isTrue) {
    this.showLoader = false;
    await AudioPlayer.pause({ audioId: this.audioId });
    localStorage.removeItem("autosleeptime");
    if (this.get_position_interval) {
      this.get_position_interval.unsubscribe();
    }
    return;
  }

  console.log('Starting playback...');
  await AudioPlayer.play({ audioId: this.audioId });
  this.commonService.logsEvents('media_play', {
    'track_name': this.currentTrackInfo.track_name,
    'album_name': this.currentTrackInfo.album_name
  });
  this.eventServiceService.publishEvent({
    event: "changeCurrentChapter",
    currentTrack: this.currentTrack
  });
} catch (error) {
  console.error('Error in playOnline:', error);
  this.showLoader = false;
  this.showPlay = true;
  console.log('Unable to play audio. Please check your internet connection and try again.');
}

}

async setupAudioPlayerEvents() {
try {

await AudioPlayer.onPlaybackStatusChange({ audioId: this.audioId }, (status) => {
 if (status.status === 'playing') {
  this.ngZone.run(() => {
    this.musicControlPlay();
  });
 }
 if (status.status === 'paused') {
  this.ngZone.run(() => {
    this.musicControlPause();
  });
  
 }

});

await AudioPlayer.onAudioReady({ audioId: this.audioId }, () => {
  this.ngZone.run(() => {

    if (this.currentAudioBookTime) {
      AudioPlayer.seek({ audioId: this.audioId, timeInSeconds: this.currentAudioBookTime });
      this.position = this.currentAudioBookTime;
      this.currentAudioBookTime = 0;
    }
    this.showLoader = false;
    this.showPlay = false;
    this.playing = true;
    this.getAndSetCurrentAudioPosition(this.position);
  });
});

await AudioPlayer.onAudioEnd({ audioId: this.audioId }, async () => {
  this.ngZone.run(async () => {
    this.handleTrackEnd();
  });
});    

} catch (error) {
console.error('Error setting up audio player events:', error);
}
}

handleTrackEnd() {
console.log('🎵 Handling track end - Current:', this.currentTrack, 'Total:', this.totalTracks);

this.playing = false;
if (this.get_position_interval) {
this.get_position_interval.unsubscribe();
}
if (this.currentTrack >= this.totalTracks - 1) {
console.log('🏁 Reached end of audiobook');
if (!this.isOpenPage) {
setTimeout(() => {
localStorage.removeItem("autosleeptime");
this.close(true);
}, 1000);
}
} else {
console.log('➡️ Auto-advancing to next track');
this.isOpenPage = false;
this.autoNextTriggered = false;
setTimeout(() => {
this.change("next");
}, 500);
}
}

[wsamoht]

Unfortunately this is a know issue. On both iOS and Android, after a certain amount of time (I've seen 5-10 minutes), the OS pauses JavaScript execution when the app is not active. Once the app comes to the foreground again, JS continues execution.

The only solution is to manage a playlist on the native side. We have plans for this at some point.

A little more info is here - #12 (comment)