离子音频如何一次播放一个音轨

时间:2018-07-02 02:54:01

标签: javascript android typescript ionic-framework ionic3

我正在使用此ionic audio plugin来播放音频文件,而不是使用css和javascript创建html5音频或自定义音频播放器。

该插件的效果很好,但文档中却缺少有关如何处理一些额外方法或如何自定义其CSS的内容。

我的目标是一次播放一首曲目,并在设备关闭时停止播放该曲目。

这是我的 home.html

的示例代码
<ion-list>
            <audio-track #audio *ngFor="let track of myTracks"  [track]="track" (onFinish)="onTrackFinished($event)">
              <ion-item>
                <div class="from-me set-points">
                  <ion-thumbnail>
                      <audio-track-play dark [audioTrack]="audio"><ion-spinner></ion-spinner></audio-track-play>  
                  </ion-thumbnail>
                  <div item-content>
                    <audio-track-progress-bar dark duration progress [audioTrack]="audio"></audio-track-progress-bar>
                  </div>
                </div>  
              </ion-item>    
            </audio-track>
          </ion-list>

这是我 home.ts

中的代码
this.myTracks = [{
      src: 'https://archive.org/download/JM2013-10-05.flac16/V0/jm2013-10-05-t12-MP3-V0.mp3',
      artist: 'John Mayer',
      title: 'Why Georgia',
      art: 'assets/img/johnmayer.jpg',
      preload: 'metadata' // tell the plugin to preload metadata such as duration for this track, set to 'none' to turn off
    },
    {
      src: 'https://archive.org/download/JM2013-10-05.flac16/V0/jm2013-10-05-t30-MP3-V0.mp3',
      artist: 'John Mayer',
      title: 'Who Says',
      art: 'assets/img/johnmayer.jpg',
      preload: 'metadata' // tell the plugin to preload metadata such as duration for this track,  set to 'none' to turn off
    },

    {
      src: 'https://archive.org/download/swrembel2010-03-07.tlm170.flac16/swrembel2010-03-07s1t05.mp3',
      artist: 'Stephane Wrembel',
      title: 'Stephane Wrembel Live',
      art: 'assets/img/Stephane.jpg',
      preload: 'metadata' // tell the plugin to preload metadata such as duration for this track,  set to 'none' to turn off
    }];
  }

  ionViewWillEnter() {
    this.getAudioList();
    console.log('This is the audio lists', this.audioList)
    this.allTracks = this._audioProvider.tracks;
  }

  ionViewWillLeave() {
    this.pauseAudioProvider();
  }

  onTrackFinished(track: any) {
    console.log('Track finished', track)
  }

pauseAudioProvider(){
    this._audioProvider.stop();
  }

我只将我的大部分代码发布在构造函数中,并将其之外的函数或方法发布。我不会显示有关如何实现此插件的代码。

但是我的最终目标是一次只能播放一首曲目,并且当设备屏幕关闭时,除非我从设备的背景中删除该应用程序,否则曲目仍会继续播放。

反正有这样做吗?

感谢有人可以帮助您。 预先感谢。

0 个答案:

没有答案