我正在使用此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();
}
我只将我的大部分代码发布在构造函数中,并将其之外的函数或方法发布。我不会显示有关如何实现此插件的代码。
但是我的最终目标是一次只能播放一首曲目,并且当设备屏幕关闭时,除非我从设备的背景中删除该应用程序,否则曲目仍会继续播放。
反正有这样做吗?
感谢有人可以帮助您。 预先感谢。