В настоящее время я разрабатываю новое мобильное музыкальное приложение
Мне нужна помощь
Как установить функцию следующей / предыдущей кнопки в платформе ionic3
Когда пользователь нажимает кнопку «Далее», то должна воспроизводиться следующая песня. Точно так же, если пользователь нажимает предыдущую кнопку, тогда должны воспроизводиться «Песни».
Здесь я добавил мой код
albumname.html
<ion-footer>
<audio-track #audioTrack [track]="currentTrack" [autoplay]="true"
(onFinish)="onTrackFinished($event)">
<div style="display: flex;position: relative;top: 27px;">
<button clear (click)="change()">
<ion-icon name="pause" *ngIf="!visible" (click)="audioTrack.pause()"></ion-
icon>
<ion-icon name="play" *ngIf="visible" (click)="audioTrack.canPlay ?
audioTrack.play() : next()"></ion-icon>
</button>
<audio-track-progress-bar duration progress [audioTrack]="audioTrack"
style="width: 100%; margin: 0 10px;color: white"></audio-track-progress-bar>
</div>
<div style="display: flex; justify-content: center; height: 50px;">
<div *ngIf="audioTrack">
<h4>{{ audioTrack?.artist }}</h4>
</div>
<ion-spinner *ngIf="audioTrack && audioTrack.isLoading"></ion-spinner>
</div>
</audio-track>
<ion-icon name="ios-fastforward-outline" (click)="next()"></ion-
icon>
<ion-icon name="ios-rewind-outline"></ion-icon>
</ion-footer>
albumname.ts
import { Component, ChangeDetectorRef } from '@angular/core';
import { ModalController, Platform, IonicPage, NavController, NavParams,
ActionSheetController } from 'ionic-angular';
import { StreamingMedia, StreamingVideoOptions } from '@ionic-
native/streaming-media';
import { TabsnewPage } from '../tabsnew/tabsnew';
import { ITrackConstraint } from 'ionic-audio';
import { AlbumPage } from '../album/album'
import { SocialSharing } from '@ionic-native/social-sharing';
@IonicPage()
@Component({
selector: 'page-albumname',
templateUrl: 'albumname.html',
})
export class AlbumnamePage {
myTracks: ITrackConstraint[];
playlist: ITrackConstraint[] = [];
currentIndex: number = -1;
currentTrack: ITrackConstraint;
visible = false;
constructor(public navCtrl: NavController, public navParams: NavParams,
public actionSheetCtrl: ActionSheetController, private streamingMedia:
StreamingMedia, public platform: Platform, private _cdRef:
ChangeDetectorRef, public modalCtrl: ModalController,private socialSharing:
SocialSharing) {
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/imgs/banner1.jpeg',
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-
t12-MP3-V0.mp3',
artist: 'Mercy-Badshah Feat',
title: 'Lauren Gottlieb',
art: 'assets/imgs/banner1.jpeg',
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-
t12-MP3-V0.mp3',
artist: 'Ahmed Chawki fest',
title: 'Pitbull',
art: 'assets/imgs/banner1.jpeg',
preload: 'metadata' // tell the plugin to preload metadata such as
duration for this track, set to 'none' to turn off
}];
}
change() {
this.visible = !this.visible;
}
play(track: ITrackConstraint, index: number) {
this.currentTrack = track;
this.currentIndex = index;
}
next() {
if (this.playlist.length > 0 && this.currentIndex >= 0 ) {
let i = this.currentIndex + 1;
let track = this.playlist[i];
this.play(track, i);
this._cdRef.detectChanges();
} else if (this.currentIndex == -1 && this.playlist.length > 0) {
this.play(this.playlist[0], 0);
}
}
onTrackFinished(track: any) {
this.next();
}
clear() {
this.playlist = [];
}
}