Ionic-audio

Demo

Usage

• Install module from NPM:

  npm install ionic-audio --save

  Alternatively, add ionic-audio to package.json

  
  "dependencies": {
      "@angular/common": "4.1.3",
      "@angular/compiler": "4.1.3",
      "@angular/compiler-cli": "4.1.3",
      "@angular/core": "4.1.3",
      "@angular/forms": "4.1.3",
      "@angular/http": "4.1.3",
      "@angular/platform-browser": "4.1.3",
      "@angular/platform-browser-dynamic": "4.1.3",
      "@ionic-native/core": "3.4.2",
      "@ionic-native/splash-screen": "3.4.2",
      "@ionic-native/status-bar": "3.4.2",
      "@ionic/storage": "2.0.1",
      "ionic-angular": "3.4.2",
      "ionicons": "3.0.0",
      "rxjs": "5.4.0",
      "sw-toolbox": "3.6.0",
      "zone.js": "0.8.12",
      "ionic-audio": "^3.2.0"
  }
   

• Add IonicAudioModule to your app's app.module.ts.
  Pass a factory function to IonicAudioModule.forRoot() to inject an audio provider in real-time based on the current environment (native audio requires the cordova-plugin-media to be installed). You can use the defaultAudioProviderFactory function or write your own one as shown below.

  
  import { IonicAudioModule, AudioProvider, WebAudioProvider, defaultAudioProviderFactory } from 'ionic-audio';
  
  /**
   * Sample custom factory function to use with ionic-audio
   */
  export function myCustomAudioProviderFactory() {
    return (window.hasOwnProperty('cordova')) ? new CordovaMediaProvider() : new WebAudioProvider();
  }
  
  
  @NgModule({
    declarations: [
      MyApp,
      AboutPage,
      ContactPage,
      HomePage,
      TabsPage
    ],
    imports: [
      BrowserModule,
      IonicModule.forRoot(MyApp),
      IonicAudioModule.forRoot(defaultAudioProviderFactory)
    ],
    bootstrap: [IonicApp],
    entryComponents: [
      MyApp,
      AboutPage,
      ContactPage,
      HomePage,
      TabsPage
    ],
    providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
  })
  export class AppModule {}
  
    

• Import and inject AudioProvider where needed (optional):

  
  import {Component, Provider} from '@angular/core';
  import { AudioProvider } from 'ionic-audio';
  
  @Component({
    templateUrl: 'build/pages/page1/page1.html'
  })
  export class Page1 {
    myTracks: any[];
    allTracks: any[];
    selectedTrack: any;
    
    constructor(private _audioProvider: AudioProvider) { 
      // plugin won't preload data by default, unless preload property is defined within json object - defaults to 'none'
      this.myTracks = [{
        src: 'https://archive.org/download/JM2013-10-05.flac16/V0/jm2013-10-05-t12-MP3-V0.mp3',
        artist: 'John Mayer',
        title: 'Why Georgia',
        art: 'img/johnmayer.jpg',
        preload: 'metadata' // tell the plugin to preload metadata such as duration for this track, set to 'none' to turn off
      },
      {
        src: 'https://archive.org/download/JM2013-10-05.flac16/V0/jm2013-10-05-t30-MP3-V0.mp3',
        artist: 'John Mayer',
        title: 'Who Says',
        art: 'img/johnmayer.jpg',
        preload: 'metadata' // tell the plugin to preload metadata such as duration for this track,  set to 'none' to turn off
      }];
    }
    
    ngAfterContentInit() {     
      // get all tracks managed by AudioProvider so we can control playback via the API
      this.allTracks = this._audioProvider.tracks; 
    }
    
    playSelectedTrack() {
      // use AudioProvider to control selected track 
      this._audioProvider.play(this.selectedTrack);
    }
    
    pauseSelectedTrack() {
       // use AudioProvider to control selected track 
       this._audioProvider.pause(this.selectedTrack);
    }
           
    onTrackFinished(track: any) {
      console.log('Track finished', track)
    } 
  }
    

• Add components to views:

  
  <ion-list>
    <audio-track #audio *ngFor="let track of myTracks"  [track]="track" (onFinish)="onTrackFinished($event)">
      <ion-item>  
        <ion-thumbnail item-left>
          <img src="{{audio.art}}">
          <audio-track-play dark [audioTrack]="audio"><ion-spinner></ion-spinner></audio-track-play>  
        </ion-thumbnail>
        <div item-content style="width:100%">
          <p><strong>{{audio.title}}</strong> ⚬ <em>{{audio.artist}}</em></p>
          <audio-track-progress-bar dark duration progress [audioTrack]="audio" [ngStyle]="{visibility: audio.completed > 0 ? 'visible' : 'hidden'}"></audio-track-progress-bar>
        </div>
      </ion-item>    
    </audio-track>
  </ion-list>
  
  <ion-label>Select track to play</ion-label>
        <ion-select [(ngModel)]="selectedTrack">
          <ion-option *ngFor="let track of allTracks" value="{{track.id}}">{{track.title}}</ion-option>
        </ion-select>