Howler.js: Music player created with howler.js is not working in iOS safari of PWA on screen Lock mode

Created on 28 Mar 2020 · 2Comments · Source: goldfire/howler.js

Following is my music service for ionic based PWA Music Player.

import { Injectable } from '@angular/core';
import {Howl, Howler} from 'howler';
import { Events } from '@ionic/angular';

@Injectable({
providedIn: 'root'
})

export class MusicplayerService {

public player: Howl = null;
public activeTrack: any = null;
public isPlaying: boolean = false;
public musics: any[];
public progress =0;
constructor(public events: Events) { }

  publishEvent(track: any){
    console.log('shouldPublishEvent');
    this.events.publish('track', track);
  }

    publishProgress(progress: any){
    console.log('ProgressPublishEvent');
    this.events.publish('progress', progress);
  }


  publishEventIsPlaying(){
    console.log('shouldPublishEvent');
    this.events.publish('isPlaying', this.isPlaying);
  }

public start(track: any) {

    if (this.activeTrack == track) {

    } else {
        if (this.player) {
            this.player.stop();
        }
        this.player = new Howl({
            src: [track.source],
            html5: true,
            mute: false,
            usingWebAudio:true,
            onplay: () => {
                console.log('on play');
                this.isPlaying = true;
                this.activeTrack = track;
                this.publishEvent(track);
                this.publishEventIsPlaying();
                this.updateProgress();

            },
            onend: () => {
                console.log('on end');
                this.next();
            },


        })
        this.player.play();
    }
}

public togglePlayer(pause) {
    this.isPlaying = !pause;
    if (pause) {
        this.player.pause();
    } else {
        this.player.play();
    }
    this.publishEventIsPlaying();

}

public next() {

    let index = this.musics.indexOf(this.activeTrack);
    if (index != this.musics.length-1) {
        this.start(this.musics[index + 1]);
    } else {
        this.start(this.musics[0]);
    }
}

public prev() {
    let index = this.musics.indexOf(this.activeTrack);
    if (index > 0) {
        this.start(this.musics[index - 1]);
    } else {
        this.start(this.musics[this.musics.length-1])
    }
}

public duration(): any {
    return this.player.duration();
}


public seek(newValue:any) {
    let duration = this.player.duration();
    console.log(newValue)
    console.log(duration* (newValue/100))
    this.player.seek(duration* (newValue/100));
}

public updateProgress() {
    let seek = this.player.seek();
    this.progress = (seek/this.duration())*100 || 0;
    this.publishProgress(this.progress);
    setTimeout(()=>{
        this.updateProgress();
    }, 1000)
}

}

It is working on lock screen too if audio played from browser in both iOS Safari and chrome. But it does not play audio in iOS safari PWA (Progressive web app developed in ionic 4). Can you please let me know what is the issue with lockscreen in iOS 13 PWA?

Source