Cordova-plugin-media and ionic-native/media will not play mp3 from the assets/ filesystem

[pixel1010]

@VictorNorman

import { Component } from '@angular/core';
import { Media, MediaObject } from '@ionic-native/media/ngx';
import { File } from '@ionic-native/file/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  private file: MediaObject;

  constructor(
    private media: Media,
    private f: File,
  ) {}

  play() {
    console.log('---------xxx------------ Using f.applicationDirectory + 1.mp3: ', this.f.applicationDirectory + '1.mp3');
    // this.file = this.media.create('file:///assets/1.mp3');
    this.file = this.media.create(this.f.applicationDirectory + '1.mp3');
    this.file.play();
  }
}

From my experience, using HTML5 tag for playing audio file on native device (especially) on ios is a terrible idea. Because some other plugins like wavesurfer, won’t play the audio the same way, hence your app won’t start playing file is you start mixing native and HTML5 audio controls.

Also by using HTML5 tag you will see an audio controls pop-up on the lock-screen on ios which is really unnecessary if you are just playing short audio.

I have to admit that it took me quite a long time to use the media plugin on native device.

For your problem I think the media is not playing because the path is incorrect.
You can check it using the checkFile function.

this.file.checkFile(path, fileName).then(
  res => {
    console.log('file exist', res);
    playMp3(path + fileName);
  },
  err => {
    console.log('file doesnt exist',err);
  }
);

It seems that your mp3 file are saved in the assets directory, you should use the nativeUrl with the media plugin in order to play your file.
Here is the path to the assets folder :

const path = this.file.applicationDirectory + "www/assets/" + fileName;

When creating the media don’t forget to change the format of the path (as recommended on the media plugin doc) cause its kinda buggy.

let myFile = this.media.create(path.replace(/^file:\/\//, ''));
myFile.play();

Also don’t forget to release the media when you are done, on Android after creating around 20 media, the plugin will stop working if you don’t clean that mess.

myFile.onStatusUpdate.subscribe((status : number) => {
  console.log('Media_status :', status);
  if (status === 4) {//Media.MEDIA_STOPPED = 4;
    myFile.release();
  }
});

Even if it’s a bit late, i hope this will help you