最近写毕设,想要实现一个音乐播放功能。大概样子如下面的图所示:
还有吸顶效果,吸顶在左下角:
下面来说一下实现过程。
一、安装
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
或者文档的按钮。