Ionic 4 通过一键事件播放带有嚎叫的单个音频

Question

在这里，我单击两个或多个音频文件，它会同时播放所有文件 这是我的代码

在 audio-player.page.ts 中

import {
  Component,
  OnInit,
  ViewChild
} from "@angular/core";
import {
  Howl
} from "howler";
import {
  IonRange
} from "@ionic/angular";
import {
  Storage
} from "@ionic/storage";
import {
  HttpClient
} from "@angular/common/http";
import {
  ApiService
} from "src/app/Service/api.service";
import {
  LikeService
} from "src/app/Service/like.service";
import {
  AudioHelper
} from "src/app/Helper/AudioHelper";
import {
  ActivatedRoute
} from "@angular/router";
import {
  FileTransfer,
  FileUploadOptions,
  FileTransferObject
} from "@ionic-native/file-transfer/ngx";
import {
  File
} from "@ionic-native/file/ngx";
import {
  FilePath
} from "@ionic-native/file-path/ngx";​
export interface Track {
  intId: string;
  varPackageName: string;
  varSongURI: string;
  varThumbImage: string;
  isFav: string;
}​
@Component({
  selector: "app-audio-player",
  templateUrl: "./audio-player.page.html",
  styleUrls: ["./audio-player.page.scss"]
})
export class AudioPlayerPage implements OnInit {
  playlist: Track[] = [];​
  playNewList: Track[] = [];​
  STORAGE_KEY = "AK_INFINITY_";
  userAKID: any = null;
  isPlaying = false;
  player: Howl;
  activeTrack: Track = null;
  progress = 0;
  title: any = null;​
  downloadImageArray: Array < any > = [];
  arrayObject: any = null;​
  BASE_AUDIO_API = "https://www.ksmps.com/akfc/music/movie_songs/";​
  @ViewChild("range", {
    static: false
  }) range: IonRange;​
  constructor(
    private activatedRoute: ActivatedRoute,
    public storage: Storage,
    private http: HttpClient,
    private apiService: ApiService,
    private likeservice: LikeService,
    private audioHelper: AudioHelper,
    private transfer: FileTransfer,
    private file: File,
    public filePath: FilePath
  ) {
    this.storage.get(this.STORAGE_KEY + "DL_SONG_DATA").then(val => {
      if (val == null || val == undefined) {
        this.downloadImageArray = [];
      } else {
        this.downloadImageArray = JSON.parse(val);
      }
      console.log("download array", this.downloadImageArray);
    });​
    this.getLocalStorageData();
  }​
  ngOnInit() {
    this.activeTrack = this.audioHelper.track();
    if (this.activeTrack != null) {
      this.updateProgress();
      this.isPlaying = this.audioHelper.getPlayerState();
    }
    console.log("ng activ track", this.activeTrack);
    this.title = this.activatedRoute.snapshot.paramMap.get("keyword");
    this.getLocalStorageData();
  }​
  ionViewWillEnter() {
    this.storage.get(this.STORAGE_KEY + "userAKId").then(userAKId => {
      this.userAKID = userAKId;
      this.GetMusic(true);
    });
    this.getLocalStorageData();
  }​
  setCurrentTrack(track) {
    this.activeTrack = track;
  }​
  getLocalStorageData() {
    this.storage.get(this.STORAGE_KEY + "userAKId").then(userAKId => {
      this.userAKID = userAKId;
    });
  }​
  GetMusic(refresh = false, refresher ? ) {
    this.apiService
      .getMusicList(refresh, this.userAKID, this.title)
      .subscribe(res => {
        console.log(res);​
        this.playlist = res.result;
        this.activeTrack = this.audioHelper.track();
        console.log("active track", this.activeTrack);
        if (refresher) {
          refresher.target.complete();
        }
      });
  }​
  start(track: Track) {
    this.isPlaying = true;
    this.audioHelper.setPlayList(this.playlist);
    this.activeTrack = track;
    this.audioHelper.start(track);
    this.updateProgress();
  }​
  updateProgress() {
    this.progress = this.audioHelper.updateProgress();
    setTimeout(() => {
      this.updateProgress();
    }, 500);
  }​
  togglePlayer(isPause) {
    this.audioHelper.togglePlayer(this.isPlaying);
    this.isPlaying = !this.isPlaying;
    console.log(this.isPlaying);
  }​
  seek() {
    let newVal = +this.range.value;
    console.log(newVal);
    this.audioHelper.seek(newVal);
  }​
  prev() {
    this.audioHelper.prev();
    this.activeTrack = this.audioHelper.changeActiveTrack();
  }​
  next() {
    this.audioHelper.next();
    this.activeTrack = this.audioHelper.changeActiveTrack();
  }​
  fav(item: any) {
    if (item.isFav) {
      item.isFav = false;
    } else {
      item.isFav = true;
    }
    console.log("akid", this.userAKID);
    console.log("id", item.intId);
    this.likeservice
      .modifyFeedLike(this.userAKID, "music", item.intId, null)
      .subscribe(res => {
        console.log(res);
      });
  }​
  shufflePlayList() {
    this.playNewList = this.shuffle(this.playlist);
    this.playlist = this.playNewList;
    this.audioHelper.setPlayList(this.playlist);
  }​
  shuffle(array) {
    let currentIndex = array.length,
      temporaryValue,
      randomIndex;
    while (0 !== currentIndex) {
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }
    return array;
  }​
  download(activeTrack: any) {
    console.log("SONG URI ", this.BASE_AUDIO_API + activeTrack.varSongURI);
    alert("Download Started");
    this.file
      .checkDir(this.file.dataDirectory, "AKFC/MUSIC")
      .then(_ => console.log("Directory exists"))
      .catch(err =>
        this.file
        .createDir(this.file.dataDirectory, "AKFC/MUSIC", true)
        .then(response => {})
        .catch(err => {
          console.log('Could not create directory "AKFC" ', err);
        })
      );
    console.log("download started");​
    const fileTransfer: FileTransferObject = this.transfer.create();​
    fileTransfer
      .download(
        this.BASE_AUDIO_API + activeTrack.varSongURI,
        this.file.dataDirectory + "AKFC/MUSIC/" + activeTrack.varSongURI
      )
      .then(
        entry => {
          console.log("download complete: " + entry.toURL());
          this.arrayObject = {
            file: activeTrack.varSongURI,
            fileType: "Image",
            extension: ".mp3",
            path: this.file.dataDirectory + "AKFC/MUSIC/"
          };
          this.downloadImageArray.push(this.arrayObject);
          console.log(this.downloadImageArray);
          this.storage.set(
            this.STORAGE_KEY + "DL_SONG_DATA",
            JSON.stringify(this.downloadImageArray)
          );
          //  alert(this.file.dataDirectory + "AKFC/MUSIC/");
          alert(activeTrack.varSongURI + "Download Completed");
        },
        error => {}
      );
  }
}

在 AudioHelper.ts 文件中

import {
  Injectable
} from "@angular/core";
import {
  Howl
} from "howler";
import {
  AudioPlayerPage
} from "../Page/audio-player/audio-player.page";​
export interface Track {
  intId: string;
  varPackageName: string;
  varSongURI: string;
  varThumbImage: string;
  isFav: string;
}​
@Injectable({
  providedIn: "root"
})
export class AudioHelper {
  BASE_AUDIO_API = "https://www.ksmps.com/akfc/music/movie_songs/";​
  playlist: Track[] = [];​
  isPlaying = false;
  player: Howl;
  activeTrack: Track = null;
  progress: number = 0;​
  userAKID: any = null;
  title: any = null;​
  constructor() {}​
  track() {
    console.log("servicetrack", this.activeTrack);
    return this.activeTrack;
  }​
  start(track: Track) {
    console.log("isPlaying", this.isPlaying);​
    if (this.isPlaying) {
      this.player.stop();
      this.isPlaying = false;
      this.player = null;
      this.player = Howl({
        onload: () => {
          this.player.stop();
        },
        onloaderror: () => {
          this.player.stop();
        },
        onplayerror: () => {
          this.player.stop();
        },
        onplay: () => {
          this.player.stop();
        }
      });
    }​
    this.player = new Howl({
      src: [this.BASE_AUDIO_API + track.varSongURI],
      html5: true,
      onplay: () => {
        this.activeTrack = track;
        this.isPlaying = true;
        // this.activeTrack = null;
        this.updateProgress();
      },
      onload: () => {},
      onend: () => {
        this.isPlaying = false;
        this.next();
      }
    });
    this.player.play();
  }​
  setPlayList(playList) {
    this.playlist = playList;
  }​
  updateProgress() {
    let seek: any = this.player.seek();
    return (seek / this.player.duration()) * 100 || 0;
  }​
  togglePlayer(pause) {
    console.log("pause", pause);
    this.isPlaying = !pause;
    if (pause) {
      this.player.pause();
    } else {
      this.player.play();
    }
    return !pause;
  }​
  seek(range) {
    let duration = this.player.duration();
    this.player.seek(duration * (range / 100));
  }​
  prev() {
    let index = this.playlist.indexOf(this.activeTrack);
    if (index > 0) {
      this.activeTrack = this.playlist[index - 1];
      this.start(this.playlist[index - 1]);
    } else {
      this.activeTrack = this.playlist[this.playlist.length - 1];
      this.start(this.playlist[this.playlist.length - 1]);
    }
    console.log("preAT", this.activeTrack);
    // this.changeActiveTrack();
  }​
  stopPlayer() {
    if (this.isPlaying) {
      this.player.stop();
    } else {
      this.player.start();
    }
  }​
  next() {
    let index = this.playlist.indexOf(this.activeTrack);
    if (index != this.playlist.length - 1) {
      this.activeTrack = this.playlist[index + 1];
      this.start(this.playlist[index + 1]);
    } else {
      this.activeTrack = this.playlist[0];
      this.start(this.playlist[0]);
    }
    console.log("nextAT", this.activeTrack);
    //  this.changeActiveTrack();
  }​
  getPlayerState() {
    return this.isPlaying;
  }​
  changeActiveTrack() {
    return this.activeTrack;
  }
}

我正在寻找音频播放器，单击它播放文件的文件。 但是我单击多个文件，它同时播放所有文件。 我想播放我最后点击的内容。

请帮我解决这个问题...

Answer 1

将this.player.unload(); 用于销毁

start(track: Track) {
    console.log("isPlaying", this.isPlaying);​
    if (this.player) {
        this.player.unload();
        this.player.stop();
    }​
    this.player = new Howl({
        src: [this.BASE_AUDIO_API + track.varSongURI],
        html5: true,
        onplay: () => {
            this.activeTrack = track;
            this.isPlaying = true;
            // this.activeTrack = null;
            this.updateProgress();
        },
        onload: () => {},
        onend: () => {
            this.isPlaying = false;
            this.next();
        }
    });
    this.player.play();
}​