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

使用 APlayer 实现音乐播放器相关推荐

aplayer.js音乐播放器插件使用
aplayer.js音乐播放器插件使用闲来无事,想把自己的博客园正酷炫点,平时也有收藏癖,见到好玩的有趣的酷炫的都收藏起来了,比较漂亮的博客园都保存了今天的目的:弄一个左下角的音乐播放器插件不会就 ...
小型音乐播放器插件APlayer.js的简单使用例子
本篇博客将会给出一个小型音乐播放器插件APlayer.js的使用例子.关于APlayer.js的具体介绍和Github地址,可以参考: https://github.com/MoePlayer/. ...
Hexo全局添加APlayer音乐播放器
本人博客相关站点 APlayer APlayer Github Hexo-Tag-Aplayer 音乐直链搜索工具基于 Yilia 主题全局添加 APlayer 音乐播放器编辑文件 hexo-t ...
小型音乐播放器插件APlayer.js的简单使用例子 1
本篇博客将会给出一个小型音乐播放器插件APlayer.js的使用例子.关于APlayer.js的具体介绍和Github地址,可以参考: https://github.com/MoePlayer/A ...
开源html5在线音乐网站,一个漂亮的开源HTML5音乐播放器——APlayer
介绍 APlayer是一个简约且漂亮的html5音乐播放器,支持多种模式,包括播放列表模式.吸底模式 .迷你模式.MSE模式.HLS模式. Github https://github.com/diyg ...
个人博客的APlayer音乐播放器
大家好,今天看到的个人了博客音乐播放器,就想自己搞一个.弄了几个小时才搞懂.在网上找了好多资料,最后发现没用.出差各种问题,因为小编我一开始也不是很理解.我目前找到了三种方法,给大家分享一下,如果还有 ...
如何在博客中添加Aplayer音乐播放器
前言是否有一首音乐,前奏一响起,让你灵魂不自主的颤栗.音乐就像老胶卷,每个旋律,每句歌词,都承载着每个人的往事回忆和情愫感受. 我收藏了好多的音乐,奈何好多音乐受版权限制,需要购买VIP才能听,还有 ...
React + Vite 实现一个音乐网站（aplayer音乐播放器）
众所周知,音乐网站需要能播放音乐 1.页面搭建我们需要搭建这样一个部分那么秉承一分为二的原则,左边音乐列表,右边显示cd图片.理所应当我们得让cd运动起来. components里面建立文件夹Mu ...
php加本地音乐代码,WordPress添加音乐播放器（纯代码实现）
一.前言为WordPress网站添加一个音乐播放器,网上大部分的教程都是使用各种插件,有的插件还需要花钱买授权,用着不爽.本文用纯代码为网站添加音乐播放器,安全可靠,可以任意修改. 二.效果图三. ...

使用 APlayer 实现音乐播放器

一、安装

二、引入

三、使用

使用 APlayer 实现音乐播放器相关推荐

最新文章

热门文章