Ionic2 播放mp3功能實現

在開發app的過程當中有須要播放mp3的功能，一直想實現，但苦於具體的困難一直未能實現，通過一段時間的資料查詢和測試，最終摸索出來，現記錄以下：

1.最重要的是安裝第三方插件ionic-audio,開源地址是 https://github.com/arielfaur/ionic-audio

  第一，cd D:\Dev\sourcecode\IonicApp\FlexApp\IonicEnglish 目錄下

  

  第二，安裝插件到本地： npm install ionic-audio --save， 安裝完成後的效果圖以下

  

2.在src/app/app.module.ts文件中加入  IonicAudioModule.forRoot(),如圖

  

3.在咱們本身的頁面中引入AudioProvider類

  1 import { Component } from '@angular/core';
  2 import { NavController, NavParams,LoadingController } from 'ionic-angular';
  3 import { URLSearchParams } from '@angular/http';
  4 import { CommonService } from '../../providers/baseService/CommonService';
  5 import { AudioProvider } from 'ionic-audio';
  6 
  7 /*
  8   Generated class for the English page.
  9 
 10   See http://ionicframework.com/docs/v2/components/#navigation for more info on
 11   Ionic pages and navigation.
 12 */
 13 
 14 @Component(
 15 {
 16   selector: 'page-english',
 17   templateUrl: 'english.html'
 18 })
 19 
 20 export class EnglishPage
 21 {
 22   private groupEnglish ;
 23   private shownGroup ;
 24   public englishWord:string;
 25   public loading;
 26 
 27   public startIndex: number;
 28 
 29   constructor(public navCtrl: NavController, public navParams: NavParams,private loadCtrl:LoadingController,private audioProvider: AudioProvider,private service:CommonService)
 30   {
 31       this.groupEnglish = [];
 32       this.shownGroup = {};
 33       this.startIndex = 0;
 34   }
 35 
 36   ionViewDidLoad()
 37   {
 38       console.log('ionViewDidLoad EnglishPage');
 39   }
 40 
 41   search()
 42   {
 43       let url = 'XXXXX';
 44       let val = this.englishWord;
 45       let searchParams = new URLSearchParams()
 46       searchParams.set('key', val);
 47 
 48       this.loading = this.loadCtrl.create({ content: '加載中...'});
 49       this.loading.present();
 50       this.service.getJsonDataParameter(url,searchParams).then(result =>
 51       {
 52                     //this.groupEnglish = result.Data;
 53                     this.groupEnglish = [];
 54                     for(var i = 0; i< result.Data.length; i++)
 55                     {
 56                        let ele = {
 57                                       src: 'url'+result.Data[i].Word+'.mp3',  58                                       item : result.Data[i]
 59                                  };
 60                        this.groupEnglish.push(ele);
 61                     }
 62                     this.loading.dismiss();
 63       },
 64       err =>
 65       {
 66 
 67       });
 68   }
 69 
 70  onTrackFinished(track: any)  71  {  72       if(this.audioProvider.tracks.length > this.startIndex )  73  {  74          this.startIndex = this.startIndex + 1;  75          this.autoPlay();  76  }  77       else
 78  {  79          this.startIndex = 0;  80          this.audioProvider.stop();  81  }  82  }  83 
 84   autoPlay()
 85   {
 86      this.audioProvider.play(this.startIndex);  87   }
 88 
 89   toggleGroup(group,id)
 90   {
 91                 if (this.isGroupShown(group))
 92                 {
 93                     this.shownGroup = null;
 94                 }
 95                 else
 96                 {
 97                     this.shownGroup = group;
 98                     this.startIndex = id;
 99                     this.autoPlay();
100                 }
101   }
102 
103   isGroupShown(group)
104   {
105          return this.shownGroup === group;
106   }
107 }

播放mp3的數據格式是A：

{
      src: 'mp3數據源，本地的或網絡的均可以,必須的字段',
      artist: '做者名稱',
      title: '標題',
      art: '圖片',
      preload: 'metadata' // tell the plugin to preload metadata such as duration for this track, set to 'none' to turn off
},

我這裏就根據本身的須要就只用了src數據源字段，同時添加了本身的一個類字段item .

將得到的數據groupEnglish數組綁定到對應的網頁上，

 1 <ion-content>
 2 
 3   <ion-list>
 4     <audio-track #audio *ngFor="let item of groupEnglish" [track]="item" (onFinish)="onTrackFinished($event)">
 5         <ion-item>
 6             <ion-item class="rectangle" (click)="toggleGroup(item.item,audio.id)">
 7               <i class="ion-icon" >
 8                 {{item.item.Word}}
 9               </i>
10               <i style="color:green;font-size:14px"> {{item.item.Accent}}</i>
11               <i style="font-size:10px">詞頻</i>
12               <i style="color:red;font-size:10px"> {{item.item.Index}}</i>
13               <i style="font-size:10px">{{item.item.Source}}</i>
14             </ion-item >
15           <div *ngIf="isGroupShown(item.item)">
16             <ion-item text-wrap class="rectangle" *ngFor="let it of item.item.Items" >
17               <div [innerHTML]="it.Sentence">
18               </div>
19             </ion-item>
20           </div>
21         </ion-item>
22     </audio-track>
23   </ion-list>
24 </ion-content>

其中的audio-track節點是必須的，數據綁定以後的#audio 是一個類，包含了前面的數據源數據A和咱們本身的數據item

這裏尤爲強調的是audio其中的id字段，播放mp3的時候是根據這個id來肯定的，這個id基本上是按順序從0開始的。

基本都這裏就實現了mp3的播放。

4.實現自動的播放mp3功能。

   基本思路是每個mp3播放完畢以後都會調用onTrackFinished事件，在這裏，調用下一個mp3的開始。

   這裏一個有意思的事情是，每次查詢以後將groupEnglish清零，下標也清零，從新開始從頭播放。若是是第一次查詢出來的結果，這樣一個個的播放是沒問題的，但第二次查詢出來以後播放的仍是第一次的數據，經排查緣由是this.audioProvider.tracks仍是保留了上一次的數據，因此要麼清除上次的數據，要麼在原來的基礎上id繼續增長，我選擇的是後者。