使用 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或者文档的按钮。

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值