在开发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类
import { Component } from '@angular/core';
import { NavController, NavParams,LoadingController } from 'ionic-angular';
import { URLSearchParams } from '@angular/http';
import { CommonService } from '../../providers/baseService/CommonService';
import { AudioProvider } from 'ionic-audio';
/*
Generated class for the English page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Component(
{
selector: 'page-english',
templateUrl: 'english.html'
})
export class EnglishPage
{
private groupEnglish ;
private shownGroup ;
public englishWord:string;
public loading;
public startIndex: number;
constructor(public navCtrl: NavController, public navParams: NavParams,private loadCtrl:LoadingController,private audioProvider: AudioProvider,private service:CommonService)
{
this.groupEnglish = [];
this.shownGroup = {};
this.startIndex = 0;
}
ionViewDidLoad()
{
console.log('ionViewDidLoad EnglishPage');
}
search()
{
let url = 'XXXXX';
let val = this.englishWord;
let searchParams = new URLSearchParams()
searchParams.set('key', val);
this.loading = this.loadCtrl.create({ content: '加载中...'});
this.loading.present();
this.service.getJsonDataParameter(url,searchParams).then(result =>
{
//this.groupEnglish = result.Data;
this.groupEnglish = [];
for(var i = 0; i< result.Data.length; i++)
{
let ele = {
src: 'url'+result.Data[i].Word+'.mp3',
item : result.Data[i]
};
this.groupEnglish.push(ele);
}
this.loading.dismiss();
},
err =>
{
});
}
onTrackFinished(track: any)
{
if(this.audioProvider.tracks.length > this.startIndex )
{
this.startIndex = this.startIndex + 1;
this.autoPlay();
}
else
{
this.startIndex = 0;
this.audioProvider.stop();
}
}
autoPlay()
{
this.audioProvider.play(this.startIndex);
}
toggleGroup(group,id)
{
if (this.isGroupShown(group))
{
this.shownGroup = null;
}
else
{
this.shownGroup = group;
this.startIndex = id;
this.autoPlay();
}
}
isGroupShown(group)
{
return this.shownGroup === group;
}
}
播放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数组绑定到对应的网页上，
<ion-content> <ion-list>
<audio-track #audio *ngFor="let item of groupEnglish" [track]="item" (onFinish)="onTrackFinished($event)">
<ion-item>
<ion-item class="rectangle" (click)="toggleGroup(item.item,audio.id)">
<i class="ion-icon" >
{{item.item.Word}}
</i>
<i style="color:green;font-size:14px"> {{item.item.Accent}}</i>
<i style="font-size:10px">词频</i>
<i style="color:red;font-size:10px"> {{item.item.Index}}</i>
<i style="font-size:10px">{{item.item.Source}}</i>
</ion-item >
<div *ngIf="isGroupShown(item.item)">
<ion-item text-wrap class="rectangle" *ngFor="let it of item.item.Items" >
<div [innerHTML]="it.Sentence">
</div>
</ion-item>
</div>
</ion-item>
</audio-track>
</ion-list>
</ion-content>
其中的audio-track节点是必须的，数据绑定之后的#audio 是一个类，包含了前面的数据源数据A和我们自己的数据item
这里尤其强调的是audio其中的id字段，播放mp3的时候是根据这个id来确定的，这个id基本上是按顺序从0开始的。
基本都这里就实现了mp3的播放。
4.实现自动的播放mp3功能。
基本思路是每一个mp3播放完毕之后都会调用onTrackFinished事件，在这里，调用下一个mp3的开始。
这里一个有意思的事情是，每次查询之后将groupEnglish清零，下标也清零，重新开始从头播放。如果是第一次查询出来的结果，这样一个个的播放是没问题的，但第二次查询出来之后播放的还是第一次的数据，经排查原因是this.audioProvider.tracks还是保留了上一次的数据，所以要么清除上次的数据，要么在原来的基础上id继续增加，我选择的是后者。