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

[ManmohanKrishna]

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?

[just-tom]

Hi @ManmohanKrishna - Did you find anything out about this in the end? I have having the same issue.

Thanks

[yoyotheboss7]

Same problem, IOS stop the sound in PWA when the screen is locked. It works in the browser though.