MIDI File not detected in assets

Ionic Framework ionic-v3
1

So I have a midi player. I’ve made use of Ionic’s Media plugin. Sadly it can’t find the midi I wanted to play. the error in XCode:

Unknown resource ‘file:///var/containers/Bundle/Application/289DCBB3-9EA3-4C5B-B14E-E696C1468D93/MobiHymn%20Beta.app/www/assets/midi/h1.mid’

and in my typescript code:

Cannot set property ‘successCallback’ of undefined
at MediaObject.set [as successCallback] (decorators.js:195)
at Observable._subscribe (index.js:31)
at Observable._trySubscribe (Observable.js:57)
at Observable.subscribe (Observable.js:45)
at ReaderPage.webpackJsonp.141.ReaderPage.initializePlayer (reader.ts:365)
at ReaderPage.webpackJsonp.141.ReaderPage.ionViewDidLoad (reader.ts:227)
at ViewController._lifecycle (view-controller.js:566)
at ViewController._didLoad (view-controller.js:439)
at Tab.NavControllerBase._didLoad (nav-controller-base.js:950)

Here’s my code in typescript:

  initializePlayer(){
    try{
      let path = this.midi.name;
      this.midiFile = this.media.create(path);
      this.midiFile.onSuccess.subscribe(() => {
        this.midi.duration = this.midiFile.getDuration();
      });
      this.midiFile.onStatusUpdate.subscribe(status => console.log(status));
    }
    catch(err){
      console.log(err);
    }
  }

where midi.name = file.applicationDirectory + "www/assets/midi/h1.mid"

my file structure is:

src/assets/midi/h1.mid

What did I miss?