Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ionic native-audio doesn't work on android

I'm having a problem to use the native-audio cordova plugin with ionic. I installed native using npm

sudo npm install --save @ionic-native/native-audio

And added a new provider called smartAudio (code attached below). It works like a charm both in ionic's web view and on iOS emulator/real device as well.. but for some reason there's no sound on android emulators/real devices at all.

I have an ion-slides element that generate images slide using *ngFor, like this -

<ion-slides (ionSlideDidChange)="muteAnimalSound()" pager dir="rtl" [loop]="true" >
  <ion-slide *ngFor="let slide of animals_slides; let i = index" style="background-color: white">
    <img src="{{slide.img_url}}" (click)="playAnimalSound($event)">
    </ion-slide>
  </ion-slides>

Where playAnimalSound() function looks like this -

playAnimalSound(ev) {
    let animalSound = this.getAnimalBySource(ev.target.src);
    let currentIndex = this.slides.getActiveIndex();

    this.smartAudio.preload(currentIndex, animalSound[0].sound_url);
    this.smartAudio.play(currentIndex);
  }

My smartAudio provider was is defined like this -

export class SmartAudio {

    audioType: string = 'html5';
    sounds: any = [];

    constructor(public nativeAudio: NativeAudio, platform: Platform) {

        if(platform.is('cordova')){
            this.audioType = 'native';
        }
        //testing atlassian sourcetree

    }

    preload(key, asset) {

        if(this.audioType === 'html5'){

            let audio = {
                key: key,
                asset: asset,
                type: 'html5'
            };

            this.sounds.push(audio);

        } else {

            this.nativeAudio.preloadSimple(key, asset);

            let audio = {
                key: key,
                asset: key,
                type: 'native'
            };

            this.sounds.push(audio);
        }       

    }

    play(key){

        let audio = this.sounds.find((sound) => {
            return sound.key === key;
        });

        if(audio.type === 'html5'){

            let audioAsset = new Audio(audio.asset);
            audioAsset.play();

        } else {

            this.nativeAudio.play(audio.asset).then((res) => {
                console.log(res);
            }, (err) => {
                console.log(err);
            });

        }

    }
    stop(key)
    {
        let audio = this.sounds.find((sound) => {
            return sound.key === key;
        });

         if(audio.type === 'html5'){

            let audioAsset = new Audio(audio.asset);
            audioAsset.play();

        } else {

            this.nativeAudio.stop(audio.asset).then((res) => {
                console.log(res);
            }, (err) => {
                console.log(err);
            });

        }

    }

}
like image 733
Gonras Karols Avatar asked Jul 16 '17 19:07

Gonras Karols


2 Answers

i found an issue in your smartAudio provider. Please change "asset: key" to "asset: asset" and try again.

enter image description here

like image 152
Haider Rasool Avatar answered Nov 13 '22 13:11

Haider Rasool


I had the same problem. But I found this article: Sound Effects using HTML5 and Native Audio in Ionic

I did everything as in this article - and I got a sound in my Android phone. Try it - it should work. Just in case, I will show the file package.json:

  "dependencies": {
    "@angular/common": "4.4.3",
    "@angular/compiler": "4.4.3",
    "@angular/compiler-cli": "4.4.3",
    "@angular/core": "4.4.3",
    "@angular/forms": "4.4.3",
    "@angular/http": "4.4.3",
    "@angular/platform-browser": "4.4.3",
    "@angular/platform-browser-dynamic": "4.4.3",
    "@ionic-native/core": "4.3.0",
    "@ionic-native/native-audio": "^4.3.0",
    "@ionic-native/social-sharing": "^4.3.0",
    "@ionic-native/splash-screen": "4.3.0",
    "@ionic-native/status-bar": "4.3.0",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.7.1",
    "ionicons": "3.0.0",
    "rxjs": "5.4.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.0.0",
    "typescript": "2.3.4"
  },

The latest version of Ionic is used. This example works in the article. Try it.

like image 1
Павел Полько Avatar answered Nov 13 '22 13:11

Павел Полько