Ionic html audio tag does not play full song


#1

I am developing a music streaming app with ionic 2,

I have a server and S3 bucket for mp3 storage. So my server pipes the request of S3 link of mp3 to the app after the request is made from the app. I see android is behaving all well, even chrome developer tool shows OK and plays in ionic serve.

But with iOS, which I am testing with ionic view pro I see it only plays a part of it and restarts from the beginning. When I see the request made by iOS to my server, it looks like it makes several requests to get the same file. And still incomplete audio fetch.

My server api is simple,
NODEJS
router.get(’/playSong/:id’, function(req, res, next) {
var songId = req.params.id;
console.log(songId);
dbService.fetchSongID(songId).then(function(result) {
console.log(result[0].filePath);
request
.get(result[0].filePath)
.on(‘response’, function(response) {
console.log(response.statusCode)
res.writeHead(200, { ‘Content-Type’: ‘audio/mpeg3’, ‘Content-Length’: result[0].contentLength });
})
.pipe(res);
});
});

Ionic 2, fetching audio is
playMedia(audioObject) {
this.nowPlayingChange.next(audioObject);
if (this.audio) {
this.audio.src = ‘’;
}
this.playTrackIcon.state = true;
this.audio.type = ‘audio/mp3’;
this.audio.src = AppSettings.API_ENDPOINT + ‘playSong/’ + audioObject._id;
this.audio.load();
this.audio.title = audioObject.title;
this.audio.album = audioObject.album;
this.audio.artist = audioObject.artist;
this.audio.preload = ‘metadata’;

Android seems to fetch audio in one get request, all good. Everything is normal and plays all long way through the song. But iOS plays a part of the song and repeats its self from the start.