Ionic Native 3 Media Plugin


#1

Given the following instantiation of the Ionic 3 Native Media Plugin:

this.media.create('path/to/file.mp3', onStatusUpdate)
  .then((file: MediaObject) => {

     // play the file
     file.play();

});

How do i get a reference to ‘file’ outside of this scope?

UPDATE: to set ref:

audioFile: MediaObject;
this.media.create().then(file => this.audioFile = file);
playFile(): void {
  // you can guard against this being called too early like so
  if (this.audioFile) {
    this.audioFile.play();
  }
}

NOTE: setting a ref to ‘file’ works … its version 3.5.0 of the ionic native 3 media plugin thats the problem … promise is not resolving … downgrade to 3.4.4 until fixed.


#2

The short answer is “you don’t”.

The longer answer is that you need to stash it somewhere within the then block and be prepared for it to be set at some random time that you can’t predict, such as:

audioFile: MediaObject;
this.media.create().then(file => this.audioFile = file);
playFile(): void {
  // you can guard against this being called too early like so
  if (this.audioFile) {
    this.audioFile.play();
  }
}

<!--or you can do it in the template via the disabled attribute -->
<button (click)="playFile()" [disabled]="!audioFile">play me</button>

#3

Ahh… thank you …

Although, with that said, the promise does not seem to be resolving :frowning:

I tried your suggestion … and then i also tried this:

audioFile: MediaObject
...
createAudio() {
  this.mediaPlugin.create('path/to/my/audio', onStatusUpdate).then(file => this.setAudio(file))
}

...
setAudio(file) {
  console.log("audio instance created");
  this.audioFile = file;
}
...
ionViewDidEnter() {
  this.createAudio();
}

Nothing prints to the console. Am i missing something?


#4

You can toss another function on the then() to catch the error condition if the promise is rejecting. Maybe your path is wonky. Filesystem paths on cordova devices tend to be somewhat gnarly.


#5

Right … tried this … no error returned either …

this.mediaPlugin.create('path/to/my/audio', onStatusUpdate)
.then(file => this.setAudio(file))
.catch(e => console.log('Error opening media file', e));

Only other info i can offer… when using ionic native 2 — it worked … so i would assume the file path is OK.


#6

ionic-native #1405 looks highly relevant. Also see the discussion in this commit.


#7

@rapropos dude … if you are in NYC ill buy you a brew:D…

Downgraded the plugin to 3.4.4 and its working

onward and up…


#8

@disrupt Hey, looks like we were having the same issue. So i’ve tried rolling back to 3.4.4, but which way are you using this?

Im doing this:

this.file = this.media.create(this.url, this.onStatusUpdate)

I see the track loads in my network console, my problem now is getting the track to play.

console.log(this.file) after the audio load outputs:

t {__zone_symbol__state: null, __zone_symbol__value: Array(0)}

which doesnt appear to be a MediaObject reference.

And, apparently, this is the broken way of 3.5.0 that has the broken promise issue…

this.file = this.media.create(this.url).then((file)=>file.play())

How or when do I access this file MediaObject to play after it loads the track?

UPDATE: I figured out that after i downgraded to 3.4.4, the promise is working again, so I needed to subscribe to the observable with the .then syntax and it’s working


#9