native-audio
native-audio copied to clipboard
TypeError: this.notifyListeners is not a function
I am getting errors like below
TypeError: this.notifyListeners is not a function
triggered from this method:
Audio.onEnded
after upgrading to
- capacitor v6
- (ionic v8)
- (angular v17)
plugin version:
"@capgo/native-audio": "^6.4.4",
Here is my native-audio usage:
import { Injectable } from '@angular/core';
import { getIsSoundEffectsOn$ } from './preferences';
import { NativeAudio } from '@capgo/native-audio';
import { Haptics, ImpactStyle } from '@capacitor/haptics';
@Injectable({
providedIn: 'root'
})
export class AudioService {
public isSoundEffectsOn = false;
constructor() {
this.preloadAudio('click', 'assets/sounds/click.mp3');
this.preloadAudio('toggle', 'assets/sounds/toggle.mp3');
this.preloadAudio('success', 'assets/sounds/success.wav');
this.preloadAudio('failure', 'assets/sounds/failure.wav');
getIsSoundEffectsOn$().then(isOn => {
this.isSoundEffectsOn = isOn;
}).catch(error => {
console.error('Error fetching sound effects preference:', error);
});
}
private preloadAudio(assetId: string, assetPath: string): void {
NativeAudio.preload({
assetId,
assetPath,
audioChannelNum: 1,
isUrl: false
}).then(() => {
console.log(`Preloaded ${assetId} successfully.`);
}).catch(error => {
console.error(`Error preloading ${assetId}:`, error);
});
}
private async playAudio(assetId: string) {
if (this.isSoundEffectsOn) {
try {
await NativeAudio.play({ assetId });
console.log(`Playing ${assetId}.`);
} catch (error) {
if (assetId !== 'click') {
console.error(`Error playing ${assetId}:`, error);
}
}
} else {
console.log(`Sound effects are off. Not playing ${assetId}.`);
}
}
public click(): void {
Haptics.impact({ style: ImpactStyle.Light });
this.playAudio('click');
}
public toggle(): void {
Haptics.impact({ style: ImpactStyle.Light });
this.playAudio('toggle');
}
public success(): void {
Haptics.impact({ style: ImpactStyle.Medium });
this.playAudio('success');
}
public failure(): void {
this.playAudio('failure');
}
}
used with a directive:
import {Directive, HostListener} from '@angular/core';
import {AudioService} from '../services/audio-service';
@Directive({
selector: '[clickSound]',
standalone: true,
})
export class ClickSoundDirective {
constructor(private audioService: AudioService) {
}
@HostListener('click', ['$event']) onClick(){
this.audioService.click();
}
}
Can you try again i updated
(It's NOT gone)
EDIT:
Seems like the error is still being logged for some reason. It is polluting my console on desktop web that's the whole problem. Not causing any other bad things that I know of
I edited my comment
Ok i found the issue the listener was loosing the context of "this" try 6.4.11 please :)