前言
想给博客添加一个播放器,于是百度了一下就有了思路
简介
APlayer是一款嵌入页面的音乐播放器。
步骤一
访问Aplayer的github源码,下载源码并解压
步骤二
安装npm包 npm install aplayer –save
步骤三
将第一步骤解压后的dist文件夹拷贝到你博客themes/next/source下
步骤四
在dist文件夹新增music.js,并添加如下代码
1
2
3
4
5
6
7
8
9 const ap = new APlayer({
container: document.getElementById('aplayer'),
audio: [{
name: 'name',
artist: 'artist',
url: 'url.mp3',
cover: 'cover.jpg'
}]
});
name:歌曲名称
artist:唱歌的人
url:音乐的地址
cover:音乐的封面
步骤5
在themes/next/layout/_layout.swig中的body文件里添加如下代码块1
2
3
4<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/music.js"></script>
结束
开始你的音乐之旅吧!