Ionic Audio Demuxer Error

So I tried using Ionic Audio for Angular 4. I tried playing midi from local file but I get this error:

image

In my app.module.ts

import { IonicAudioModule, WebAudioProvider, CordovaMediaProvider, defaultAudioProviderFactory } from 'ionic-audio';

export function myCustomAudioProviderFactory() {
  return (window.hasOwnProperty('cordova')) ? new CordovaMediaProvider() : new WebAudioProvider();
}

@NgModule({
  declarations: [
   ...
  ],
  imports: [
    ..
    IonicAudioModule.forRoot(myCustomAudioProviderFactory)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
  ....
  ],
  providers: [
  ....
  ]
})

In my html file

<ion-footer #footerReader>
    <ion-toolbar>
        <audio-track #myAudio [track]="track">
            <div class="controls">
                <audio-track-play dark [audioTrack]="myAudio">
                    <ion-spinner></ion-spinner>
                </audio-track-play>
            </div>
            <div class="progress">
                <audio-track-progress-bar duration progress [audioTrack]="myAudio">
                </audio-track-progress-bar>
            </div>
        </audio-track>
    </ion-toolbar>
</ion-footer>

In my ts file:

  import { AudioProvider } from 'ionic-audio';

  initializePlayer(){
    this.track = {
      src: "http://localhost:8100/assets/midi/h1.mid",
      preload: 'metadata'
    }
    this.allTracks = this.audioProv.tracks;
  }

  playTrack(){
    this.audioProv.play(this.track);
  }

  pauseTrack(){
    this.audioProv.pause(this.track);
  }

My directory:
image

Pls. help thanks