在開發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繼續增加，我選擇的是后者。