How to show media notification in iPhone Safari when Audio is played

[ManmohanKrishna]

Following is my code based on howlerjs

import { Component, OnInit } from '@angular/core'; import { Router, NavigationExtras } from '@angular/router'; import { AngularFireDatabase } from '@angular/fire/database'; import { AngularFirestore } from '@angular/fire/firestore'; import { Observable } from 'rxjs'; import { ViewChild, NgZone } from '@angular/core'; import { NavController, IonApp } from '@ionic/angular'; import { IonContent } from '@ionic/angular'; import { map } from 'rxjs/operators'; import {Howl, Howler} from 'howler'; @Component({ selector: 'app-library', templateUrl: './library.page.html', styleUrls: ['./library.page.scss'], }) export class LibraryPage implements OnInit {

player: Howl = null; activeTrack: any = null; isPlaying: boolean = false; musics: any[]; //musics: Observable<any[]>;

constructor(private router: Router, db: AngularFireDatabase, public app: IonApp) {
   db.list('new_musics').valueChanges().subscribe((new_musics) => {
            this.musics = new_musics;
        });
}

// viewArticle(article1: any, title: any) {
// let navigationExtras: NavigationExtras = { // state: { // article: article1 // } // }; // this.router.navigate(['hare/' + article1], navigationExtras); //this.router.navigate(['hare'], navigationExtras); //} ngOnInit() { }

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;
            },
            onend: () => {
                console.log('on end');
                this.next();
            },

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

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

next() {

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

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])
    }
}

seek() {

}

updateProgress() {

}

}

my html code

Music

{{ music.title}}

{{ music.artist}}

<ion-footer *ngIf="activeTrack">

{{ activeTrack.title }}
{{ activeTrack.artist }}

It is playing music track in chome in android iOS safari. It generates media notification in Android even in lock screen but there is no media notification Safari to play/pause control when screen is lock. How can i generate media notification for played audio track in iOS safari for lock screen?

[bikubi]

@ManmohanKrishna what are your iOS & Safari versions? I think I'm seeing the same thing, and I feel like this used to work fine before my last update.

Also, could you check if the notifications work with the Demos? Esp. the Music Player should be interesting.

Please also make sure that your code samples look correct (they lack proper formatting) and maybe think about putting longer snippets into a gist, Codepen, pastebin or something like that.

[ManmohanKrishna]

Iphone7 iOS 13.3.1 Safari 13 i checked Demos music player in my iPhone7. but media/music notification is not working at all.

[bikubi]

iOS 13.3.1 Safari 13

same here, Safari 13.0.5 on iPad.

Maybe someone running an older version can check?

[ManmohanKrishna]

I checked with iOS/Safari Version 12. But it is not working. So what is the issue and even it should work on latest version too?

[bikubi]

I tested on an iPhone/iOS 12.3.1 and it worked :-\

[ManmohanKrishna]

what should be done for latest version?

[ManmohanKrishna]

awaiting for your reply?

[bikubi]

Well if I knew what should be done, I'd have done it. I hope you understand that I'm not a developer of Howler. You can try to find someone else who cares enough, hope that other people run into it, do it yourself, or pay someone.

[bikubi]

Hey @ManmohanKrishna, I have tested the newest iOS with no change & decided to re-submit this issue, hopefully clearer. You might want to close this one & subscribe to #1383.