Cap-go / native-audio

Capacitor plugin for native audio engine.
https://capgo.app
MIT License
28 stars 14 forks source link

TypeError: this.notifyListeners is not a function #129

Open folsze opened 1 month ago

folsze commented 1 month ago

I am getting errors like below

TypeError: this.notifyListeners is not a function

triggered from this method:

Audio.onEnded

after upgrading to

  1. capacitor v6
  2. (ionic v8)
  3. (angular v17)
image

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();
  }
}
riderx commented 2 weeks ago

Can you try again i updated

folsze commented 2 weeks ago

(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

folsze commented 2 weeks ago

I edited my comment

riderx commented 2 weeks ago

Ok i found the issue the listener was loosing the context of "this" try 6.4.11 please :)