Nativescript Audio: Access Player across pages? - nativescript

Question

I am using the nativescript-audio plugin for my iOS angular NS app.
I want to start playing an audio file on one page, navigate to a different page, and manipulate the audio player from that second page. So I need to access the player instance on a page that is different than where the instance was created.
For example, start playing audio on Page 1, and then pause the player on Page 2.
How can I do this?
I have tried saving the player instance in local storage to access later, but local storage saves items as strings, so I need to convert the player instance to a string, which doesn't work.

Answer 1

As #Brad Martin recommended, it works to put the player in an injectable Angular service and access it app wide. So, for example:
Create the Service:
app.module.ts:
import { AudioService } from "./audio-service"
#NgModule({
...
providers: [
AudioService //registers the service with the provider's metadata
]
})
audio-service.ts:
import { Injectable, EventEmitter } from '#angular/core'
import { TNSPlayer } from "nativescript-audio"
#Injectable()
export class AudioService {
private _player: TNSPlayer;
playEvent = new EventEmitter<any>()
constructor() {}
playAudio(audioFilePath){
this._player = new TNSPlayer();
this._player.initFromFile({
audioFile: audioFilePath,
loop: false,
}).then(()=>{
this._player.play()
this.playEvent.emit('File is playing now')
})
}
pausePlayer(){
this._player.pause()
}
}
Access the Service:
cool-component.ts:
import {OnInit} from #angular/core"
import { AudioService } from "~/audio-service"
import { Page } from "tns-core-modules/ui/page"
#Component({...})
export class CoolComponent implements OnInit {
public getPlay: any;
constructor(private _audioService: AudioService) {}
ngOnInit(): void {
this.getPlay = this._audioService.playEvent.subscribe((value)=>{
console.log(value) //when audio is playing, should say 'File is playing now'
}
this.page.on('navigatingFrom', (data) => {
if (this.getPlay){
this.getPlay.unsubscribe() //unsubscribe from service emitter when exit the page--to avoid multiplying the subscription every time you go to this page
})
}
playAudioFromService(audioFilePathDetail){
this._audioService.playAudio(audioFilePathDetail)
}
pauseAudioFromService(){
this._audioService.pausePlayer()
}
}