[SOLVED] by myself : Handle end of audio file event, @ionic-native/media, on Android

Ionic Native
1

hi all

ok ! with ionic-native, i can play an audio file. I just want to display a message “playing” when the file is playing, then remove it at the end of the file. That s pretty simple. What i can’t handle is to capture the event of the end of the file. Is it possible ? I mean, i just want to remove the message “playing” when the player reach the end of the audio file .
So how can i do this one ?
I read doc, and have done exactly what is written, but onStatusUpdate fire the event 1 after f.play() and then nothing at all … Except when i stop the player with f.stop() , then i receive status 2 ( running ??? ) and 4 stopped. What am i doing wrong ? Please help me i can t find any solution. i saw that the plugin has been update la august and i have the last release. Here is my code and my json file below.
By the way, does the event “stopped” mean “has been stop by an action” or “media has reached the end of file”, or something else ? Thanks in advance :smile:

here s an extract of my typescript component

import { Media, MediaObject } from '@ionic-native/media';
....
      const f:MediaObject = this.media.create(path);

      f.onStatusUpdate.subscribe(status => 
        { 
          this.message=this.message+" > onStatusUpdate="+status;
        }); 
        
        f.onSuccess.subscribe(() => 
        {
          this.message=this.message+" > onSuccess"+status;
        });
        
        f.onError.subscribe(error => 
        {
            this.message=this.message+" > onError"+error;
        });
              
      f.play();

and here is my configuration

{
    "name": "myApp_a",
    "version": "0.0.1",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@ionic-native/android-permissions": "^4.2.1",
        "@ionic-native/app-preferences": "^4.2.1",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/file": "^4.2.1",
        "@ionic-native/media": "^4.2.1",
        "@ionic-native/native-page-transitions": "^4.2.1",
        "@ionic-native/screen-orientation": "^4.3.0",
        "@ionic-native/splash-screen": "3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic/storage": "2.0.1",
        "com.telerik.plugins.nativepagetransitions": "^0.6.5",
        "cordova": "^7.0.1",
        "cordova-android": "^6.2.3",
        "cordova-plugin-android-permissions": "^1.0.0",
        "cordova-plugin-app-preferences": "^0.99.3",
        "cordova-plugin-compat": "^1.1.0",
        "cordova-plugin-console": "^1.0.5",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-file": "^4.3.3",
        "cordova-plugin-filepath": "^1.0.2",
        "cordova-plugin-media": "^3.0.1",
        "cordova-plugin-screen-orientation": "^2.0.1",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.2",
        "cordova-plugin-whitelist": "^1.3.1",
        "es6-promise-plugin": "git+https://github.com/vstirbu/PromisesPlugin.git",
        "ionic-angular": "3.6.0",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "2.1.3",
        "typescript": "2.3.4"
    },
    "description": "An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {},
            "cordova-plugin-media": {},
            "cordova-plugin-file": {},
            "cordova-plugin-android-permissions": {},
            "cordova-plugin-filepath": {},
            "com.telerik.plugins.nativepagetransitions": {},
            "cordova-plugin-app-preferences": {},
            "cordova-plugin-screen-orientation": {}
        },
        "platforms": [
            "android"
        ]
    }
}
2

anyone ? Pleaaaaaaaaaaaaaaaaaaaaase : in a simple question : why onStatusUpdate doesnt fire the running or stopped event after start playing audio file ?

3

[SOLVED] by myself. after hard work !

configuration :
"@ionic-native/media": “^4.3.1”,
“cordova-plugin-media”: “^3.0.1”,

Cordova update and return to ionic-native the status of the player only if you call a function on the player ( see the java code ). So i choose to query a function ( here “duration”, but you can choose the one you want ) with setInterval in order to get the status update in my callback as below : ( more things below code :wink: )

      if (this.mediaTimer !=null) {
        clearInterval(this.mediaTimer);
        this.mediaTimer=null;
      }

    this.memoMedia = this.media.create(path);

    this.memoMedia.onStatusUpdate.subscribe(status => 
        { this.message=this.message+" > onStatusUpdate="+status;

        if (status.toString()=="1") { //player start
    
            let self=this;
            this.mediaTimer = setInterval(function(){  //here the set interval function to refresh status 
                let duration=self.memoMedia.getDuration();
                self.message=self.message+" > duration="+duration;
                            
            }, 500);
        }

        if (status.toString()=="4") { // player end running
            if (this.mediaTimer !=null) {
                //clearInterval(this.mediaTimer);    // (*) don t do clearInterval here, or your ionic will not work, see below
                //TODO here : handle html, remove "playing" message
            }
        }

    }); 

    this.memoMedia.onSuccess.subscribe(() => 
        { 
        this.message=this.message+" > onSuccess complete";
    });

    this.memoMedia.onError.subscribe(error => 
        {
        this.message=this.message+" > onError="+error; 
        //clearInterval(this.mediaTimer);  (*) don t do clearInterval here, or your ionic will not work, see below
    });
        
    
    this.memoMedia.play();

By the way, 2 more things to help you :

  • don’t forget that onSuccess and onsStatusUpdate are asynch functions. So if you choose to put the clearInterval function in OnSucess, may be (if statusupdate==4 …) will never be executed if you’re code execute OnSucess with clearInterval. I choose to wait and test the end of running on the line (if statusupdate==4 …) but you can do it in OnSuccess
  • getDuration() : if you re just interrested with duration, don t try to get duration just after the start event statusupdate==1, you will always receive the value -1. The solution : you can do as here, or a simple thing like this : setTimeout(self.getDuration(), 500). It will work. But as setTimeout is running just once, don t except to receive running or stop event.
  • (*) clearInterval : i tried this clearInterval in callBacks and that was such a mess too … So eventually, i clearInterval before creating the media ( see first line of code )

I lost so many hours on this, i really hope this solution will help you. Please reply here, it will be a real pleasure to know that i helped you :smile:

4 Likes
4

i am trying to implement this code im my app…thanks brother

5

thank you so much for this