Problems with using NativeAudio

Ionic Framework ionic-v3
1

Can some body help me with this, i have a list of cards when i click on the card the first time, i dont get any sound, and the following error is poped up, then when i click it again i get a sound, im using NativeAudio

import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';
import { NativeAudio } from '@ionic-native/native-audio';
// import { Media, MediaObject } from '@ionic-native/media';
@IonicPage()
@Component({
  selector: 'page-card-background',
  templateUrl: 'card-background.html'
})
export class CardBackgroundPage {
  NativeAudio: any;
  sounds: any = [];
  cards = [
    {
      imageUrl: 'assets/img/card/cat-2204851_1920.jpg',
      title: 'Meow!',
      url: 'assets/audio/meow.wav'
    },
    {
      imageUrl: 'assets/img/card/cat-1992140_1920.jpg',
      title: 'Kitten',
      url: 'assets/audio/kitten2.wav'
    },
    {
      imageUrl: 'assets/img/card/cat-1333926_1920.jpg',
      title: 'Funny',
      url: 'assets/audio/meow.wav'
    },
    {
      imageUrl: 'assets/img/card/cat-334383_1920.jpg',
      title: 'Angry',
      url: 'assets/audio/Angry-cat-sound.wav'
    },
    {
      imageUrl: 'assets/img/card/pexels-photo-538628.jpeg',
      title: 'Purring',
      url: 'assets/audio/Purring-SoundBible.com-1561515931.wav'
    }];
  constructor(public navCtrl: NavController, private nativeAudio: NativeAudio) {
  }
  cardTapped(card) {
    console.log(card.url);
    this.nativeAudio.preloadSimple('newOder', card.url).then(() => {
    }).catch((err) => {
      console.log(err);
    });
    this.nativeAudio.play('newOder', () => {
      console.log("iim in the callback")
      this.nativeAudio.stop('newOder');
      this.nativeAudio.unload('newOder');
      console.log("unloaded!");
    });
  };
}

heres the error log

[18:08:27] console.log: Ionic Native: deviceready event fired after 4627 ms
[18:09:23] console.log: assets/audio/meow.wav
[18:09:23] console.error: Unhandled Promise rejection: A reference does not exist for the specified audio id. ; Zone:
; Task: null ; Value: A reference does not exist for the specified audio id. null
[18:09:25] console.log: assets/audio/kitten2.wav
[18:09:25] console.log: A reference already exists for the specified audio id.
[18:09:27] console.log: iim in the callback
[18:09:27] console.log: unloaded!

my goal is to click one time and get the sound directly rather then tapping twice

2

First, it is very confusing that you have an unused NativeAudio property alongside the nativeAudio one.

Secondly, this is not how asynchronous programming works:

doThing.then(() => {
});
doSecondThing();

If preloadSimple() must complete before you attempt to play the sound, you must move the play call inside the then block. Simply having it appear later in the surrounding function means nothing in terms of execution ordering.

1 Like
3

hey thanks alot for pointing out it was an asynchronous problem, to be honest i just know how to use async await, so i fixed the problem using that!
thanks alot buddy :smiley:

4

You are going to spend a lot of time dealing with both Promises and Observables when writing Ionic apps, so any time you invest in deepening your understanding of both of them will pay off drastically.

2 Likes
5

i’ll put that as my main goal, thanks :wink:

6

I got it to work with mp3 files on IOS and ANDROID (and WEB/HTML5) by wrapping the preloadSimple and play methods in cordova ready, AND fixing a bug in the Josh Morony tutorial. He was passing the asset path to the play method, and should be passing the key instead. Here is my solution:


I call the preload on each page where a sound is played, so it’s very modular.