Ionic2 播放mp3功能实现

在开发app的过程中有需要播放mp3的功能，一直想实现，但苦于具体的困难一直未能实现，经过一段时间的资料查询和测试，最终摸索出来，现记录如下：

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

  第一，cd D:DevsourcecodeIonicAppFlexAppIonicEnglish 目录下

  

  第二，安装插件到本地： 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继续增加，我选择的是后者。