使用 APlayer 实现音乐播放器

  最近写毕设，想要实现一个音乐播放功能。大概样子如下面的图所示：

  还有吸顶效果，吸顶在左下角：

  下面来说一下实现过程。

一、安装

npm install aplayer --save

yarn add aplayer

二、引入

import 'APlayer/dist/APlayer.min.css';
import APlayer from 'APlayer';

三、使用

  首先是<template></template>标签里的代码：

<div id="aplayer"></div>

  然后是 js 代码：

data() {
  return {
    // 音频列表
    audio: [
      {
        name: "",   // 音频名称
        artist: "", // 音频艺术家
        url: "",    // 音频链接
        cover: "",  // 音频封面
        lrc: "",    // 歌词
        theme: "",  // 播放这首歌曲时的主题色
      },
      {
        name: "",   // 音频名称
        artist: "", // 音频艺术家
        url: "",    // 音频链接
        cover: "",  // 音频封面
        lrc: "",    // 歌词
        theme: "",  // 播放这首歌曲时的主题色
      },
    ],
    info: {
      fixed: false, // 不开启吸底模式
      listFolded: false, // 折叠歌曲列表
      autoplay: false, // 是否自动播放
      preload: "auto", // 自动预加载歌曲
      loop: "all", // 播放循环模式，all全部循环 one单曲循环 none只播放一次
      order: "list", //  播放模式，list列表播放, random随机播放
      volume: 0.7, //默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
      mutex: true, //互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
    },
  };
},
mounted(){
    // 初始化播放器
  this.initAPlayer();
},
methods: {
    initAPlayer() {
    // 创建一个音乐播放器实例，并挂载到DOM上，同时进行相关配置
    const ap = new APlayer({
      container: document.getElementById("aplayer"),
      // 音乐信息
      audio: this.audio, 
      // 其他配置信息
      ...this.info, 
    });
  },
},

  如上即可。

  最后附上APlayer地址：https://aplayer.js.org/#/，上面有去github或者文档的按钮。