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类

 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继续增加，我选择的是后者。