So I tried using Ionic Audio for Angular 4. I tried playing midi from local file but I get this error:
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:
Pls. help thanks