如何在博客中添加Aplayer音乐播放器
前言
是否有一首音乐,前奏一响起,让你灵魂不自主的颤栗。音乐就像老胶卷,每个旋律,每句歌词,都承载着每个人的往事回忆和情愫感受。
我收藏了好多的音乐,奈何好多音乐受版权限制,需要购买VIP才能听,还有一些音乐一直是下架状态,办会员也听不了,所以只能自己搞个音乐播放器了。
在博客上的音乐播放器大多是那种Mini音乐播放器,虽然很便捷,但我一直觉得不够正式,音乐列表看起来也不够直观,所以我希望做到单独一个页面上。
本文讲解如何在博客中添加音乐播放器,播放自己的音乐,欢迎大家来我的音乐主页 echeverra,随时随地,想听就听。
Mini播放器效果:
单页面音乐效果:
教程
1.音乐插件
对比了几款音乐插件,我最终选定了Aplayer.js,因其界面美观,功能强大。音乐播放器的音乐信息,歌词,进度条,音量,顺序模式,循环模式都支持。可以使用三方音乐外链,也可以使用自己的音乐链接。
- 官网:https://aplayer.js.org/
- Github:https://github.com/MoePlayer/APlayer/
当然,由于一些限制,打开以上链接为概率性事件…
如果RP不足,您可以添加我的微信公众号 echeverra,回复"Aplayer"获取插件。
2.音乐资源
音乐资源可以从各大音乐平台下载,如果受会员或者下架限制,可以通过以下我常用的几个方式查找音乐。
- 小白盘:https://www.xiaobaipan.com/
- 魔方城堡:http://www.mfcb.net/wsyy/
- 23APE:http://www.23ape.net/
- HIFINI:https://www.hifini.com/
由于我会将下载的音乐上传到自己的服务器(WordPress后台媒体),音乐文件太大时我的服务器属实吃不消(渣渣服务器),只好转换成较小的MP3格式,推荐使用WORTHSEE:https://audio.worthsee.com/。
3.实现代码
将Aplayer插件APlayer.min.js
和APlayer.min.css
上传到服务器,如果博客使用WordPress
可上传到服务器wp-content
目录下,通过链接https://IP/wp-content/Aplayer.min.js ,就可以访问到。
当然你也可以直接使用jsdeliver CDN方式,更快更方便,但不稳定,偶尔抽风…
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
Aplayer主要参数说明:
参数 | 默认值 | 描述 |
---|---|---|
container | document.querySelector(‘.aplayer’) | 播放器容器元素 |
fixed | false | 开启吸底模式 |
mini | false | 开启迷你模式 |
autoplay | false | 音频自动播放,一般浏览器默认会阻止音频自动播放 |
theme | ‘#b7daff’ | 主题色 |
loop | ‘all’ | 音频循环播放,值:‘all’、‘one’、‘none’ |
order | ‘list’ | 音频循环顺序,值:‘list’,‘random’ |
preload | ‘auto’ | 音频预加载,值: ‘none’, ‘metadata’, ‘auto’ |
volume | 0.7 | 默认音量,播放器会记住用户设置,用户自己设置音量后默认音量将失效 |
showlrc | true | 歌词是否显示 |
audio | - | 音频,一个音频为对象格式,多个音频为数组格式 |
audio.name | - | 音频名称 |
audio.artist | - | 音频艺术家 |
audio.url | - | 音频链接 |
audio.cover | - | 音频封面 |
audio.lrc | - | 音频歌词 |
mutex | true | 防止同时播放多个播放器,当该播放器开始播放时暂停其他播放器 |
listFolded | false | 列表是否先折叠 |
listMaxHeight | - | 音频列表最大高度 |
3.1Mini播放器
Mini播放器会默认收起音乐列表,固定在界面左下角。
如果博客使用的是WordPress
,在使用的主题设置中找到脚本一项,将代码写在脚本中即可执行。
你也可以将代码直接粘贴到IDE(记得设置编码格式<meta charset="utf-8">
),在浏览器中打开也会可执行,代码实现如下:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><div id='aplayer'></div><script>var ap = new APlayer({element: document.getElementById('aplayer'),showlrc: false,fixed: true,mini: true,audio: {title: '半岛铁盒',author: '周杰伦',url: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒.mp3',pic: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒-mp3-image.png'}});ap.init();
</script>
多首音乐时,audio
值为数组形式,代码如下:
<script>var ap = new APlayer({element: document.getElementById('aplayer'),showlrc: false,fixed: true,mini: true,audio: [{title: '半岛铁盒',author: '周杰伦',url: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒.mp3',pic: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒-mp3-image.png'},{title: '给我一首歌的时间',author: '周杰伦',url: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间.mp3',pic: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间-mp3-image.png'}]});ap.init();
</script>
3.2单页面音乐
单页面音乐可以用更大的界面展示音乐列表等信息,实现也很简单,直接将代码块写在文章内容中,fixed
和mini
改为默认值false
,代码如下:
<link rel="stylesheet" href="https://echeverra.cn/wp-content/APlayer.min.css">
<script src="https://echeverra.cn/wp-content/APlayer.min.js"></script><div id='demo'></div><script>var demo = new APlayer({element: document.getElementById('demo'),showlrc: false,fixed: false,mini: false,audio: [{title: '半岛铁盒',author: '周杰伦',url: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒.mp3',pic: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒-mp3-image.png'},{title: '给我一首歌的时间',author: '周杰伦',url: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间.mp3',pic: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间-mp3-image.png'}]});demo.init();
</script>
在编辑器右侧可实时显示播放器效果。最终页面效果如下:
如果你想创建多个音乐播放器,就需要创建多个音乐播放器元素<div id="apalyer"></div>
,id
设为不同值,然后实例化new
多个Aplayer
播放器,再配置每个播放器的音乐列表audio
。参数mutex
默认值true
,即使多个播放器也不会冲突。
<div id='demo1'></div>
<div id='demo2'></div>
<script>var demo1 = new APlayer({element: document.getElementById('demo1'),showlrc: false,audio: {title: '半岛铁盒',author: '周杰伦',url: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒.mp3',pic: 'https://echeverra.cn/wp-content/uploads/2022/05/周杰伦-半岛铁盒-mp3-image.png'}});var demo2 = new APlayer({element: document.getElementById('demo2'),showlrc: false,audio: {title: '给我一首歌的时间',author: '周杰伦',url: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间.mp3',pic: 'https://echeverra.cn/wp-content/uploads/2021/06/周杰伦-给我一首歌的时间-mp3-image.png'}});demo1.init();demo2.init();
</script>
需要注意<script>
标签中的代码不能有空行,否则会报解析为<p>
标签,造成js代码无法正确执行。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OwYvDQTZ-1657098174745)(https://echeverra.cn/wp-content/static/article-img/aplayer/image-20220705205651915.png)]
通常fixed
和mini
需同时置为true
或false
,否则会有显示异常的问题。
单页面音乐相比Mini音乐播放器可以展示更多的音乐信息,更加正式,但同样存在弊端,当博客切换界面后,背景音乐仍在后台继续播放,只能回到音乐页面暂停,Mini音乐播放器就不会有这种问题,它始终固定在页面左下角,不会随着页面切换退出或重新加载。
4.Meting三方音乐
当然我们也可以使用第三方音乐,需要引入另外一款js插件Meting.js,它是基于Aplayer封装好的插件,开箱即用。
CDN链接:
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
Meting主要参数说明:
参数 | 默认值 | 描述 |
---|---|---|
id | require | 歌曲ID/播放列表ID/专辑ID/搜索关键字 |
server | require |
音乐平台: netease , tencent , kugou , xiami , baidu
|
type | require |
类型:song , playlist , album , search , artist
|
auto | options |
音乐链接,支持,支持: netease , tencent , xiami
|
fixed |
false
|
开启吸底模式 |
mini |
false
|
开启迷你模式 |
autoplay |
false
|
自动播放,一般浏览器默认会阻止音频自动播放 |
theme |
#2980b9
|
主题色 |
loop |
all
|
音频循环播放,值:‘all’、‘one’、‘none’ |
order |
list
|
音频循环顺序,值:‘list’,‘random’ |
preload |
auto
|
音频预加载,值: ‘none’, ‘metadata’, ‘auto’ |
volume |
0.7
|
默认音量,播放器会记住用户设置,用户自己设置音量后默认音量将失效 |
mutex |
true
|
防止同时播放多个播放器,当该播放器开始播放时暂停其他播放器 |
lrc-type |
0
|
歌词类型 |
list-folded |
false
|
列表是否先折叠 |
list-max-height |
340px
|
音频列表最大高度 |
可以看出Meting参数和Aplayer基本是相同的。
4.1单曲引入
我们使用网易云举例,单曲Blow Me a Kiss,链接:https://music.163.com/#/song?id=2526628
代码如下:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script><meting-js server="netease" type="song" id="2526628"></meting-js>
server="netease"
指定音乐平台为网易云,type="song"
指单曲类型,id="2526628"
为音乐的id,同链接上的id一致。
4.2歌单引入
我们使用网易云音乐里我创建的一个歌单,链接:https://music.163.com/#/playlist?id=7360465359
代码如下:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script><meting-js server="netease" type="playlist" id="7360465359"></meting-js>
同样的server="netease"
指定音乐平台为网易云,type="playlist"
指歌单类型,id="7360465359"
为歌单的id,同链接上的id一致。
4.3Mini播放器
我们用Meting实现一个随机播放的Mini播放器,代码如下:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script><meting-js server="netease" type="playlist" id="7360465359"fixed="true" mini="true"order="random"loop="all"preload="auto"list-folded="false">
</meting-js>
除了之前设置的server、type、id
参数外,还设置Mini播放器的必要参数fixed="true", mini="true"
,随机播放order="random"
。
4.4博客园音乐引入
博客园是为数不多的可定制的博客平台,我们先在博客后台->设置->申请JS权限,大概一个小时时间,成功后在博客后台->设置->页脚 HTML 代码中粘贴上面4.3的案例,就可以生成Mini音乐播放器啦,是不是很简单~
博客园 首页 播放器效果:
好啦,以上就是使用Aplayer在博客中添加音乐播放器的教程啦,是不是既强大又好用,非常Nice~ 希望对大家有所帮助~
你学“废”了么?
参考文章:
- Aplayer官方文档
- Aplayer搭配Metingjs音乐插件的使用
- MetingJS 是如何配合 Aplayer 加载歌单的
(完)
文章首发于我的博客 https://echeverra.cn/aplayer/,原创文章,转载请注明出处。
如何在博客中添加Aplayer音乐播放器相关推荐
- css怎样添加音乐,给博客空间添加CSS3音乐播放器的例子
CSS3音乐播放器可以实现加载外部音乐地址然后在博客或空间中直接播放音乐了,这个效果在许多个人博客会有看到,我们下面来看配置方法. 这是一个很简单的播放器效果,界面主要利用CSS3的一些属性,如ani ...
- Hexo全局添加APlayer音乐播放器
本人博客 相关站点 APlayer APlayer Github Hexo-Tag-Aplayer 音乐直链搜索工具 基于 Yilia 主题全局添加 APlayer 音乐播放器 编辑文件 hexo-t ...
- 博客园添加背景音乐以及播放器 或在左下方固定位置添加音乐播放器 给你的博文锦上添花,增姿添彩
官方教程:https://aplayer.js.org/#/zh-Hans/ 一.第一种样式 这种你想添加多少音乐就添加多少音乐! 将下方代码复制到博客侧边栏! 话不多说! 上代码! <!-- ...
- hexo博客中添加音乐播放器
1. 简介 本篇文章是介绍基于网易云iframe插件在hexo博客中加装音乐播放器的方法,无需安装任何额外插件. 2.安装步骤 在网易云音乐中打开你想要插入的音乐页面,点击 生成外联播放器. 在网页中 ...
- jekyll个人博客中添加音乐播放插件
方法一: 环境要求 jekyll 七牛 开始使用 step1 首先下载这个文件open-embed.html,右键,另存为Html;下面是源码,也可以复制保存下面的源码; <style> ...
- 个人博客的APlayer音乐播放器
大家好,今天看到的个人了博客音乐播放器,就想自己搞一个.弄了几个小时才搞懂.在网上找了好多资料,最后发现没用.出差各种问题,因为小编我一开始也不是很理解.我目前找到了三种方法,给大家分享一下,如果还有 ...
- 【转】在你的博客中添加Google地图(Use Google Map API On Your Bolg)
在你的博客中添加Google地图(Use Google Map API On Your Bolg) *+申请一组 Google Maps API Key 在使用 Google Maps API 之前, ...
- 2020-04-19-如何在博客中添加视频链接
layout title subtitle date author preview-img header-img catalog istop music-id music-idfull apserve ...
- hexo博客中添加categories分类
title: hexo博客中添加categories分类 date: 2020-04-01 16:45:16 tags: hexo categories: 学习 方法如下: 在根目录下scaffold ...
最新文章
- linux中查看日志技巧,日志查看技巧之筛选[linux命令集][排查篇]
- 斯坦福大学马腾宇:无法理解现有的深度学习算法?那就设计一个能理解的
- ssl charles 参数看不到_SSL证书=安全?小心,别错漏了TA……
- jQuery的选择器——可见性过滤选择器
- DLINK DES3828三层交换机配置实例
- maven 打包指定依赖包_[Maven]-Maven基础-01-基础概念
- CF935D Fafa and Ancient Alphabet 概率dp(递推)
- js中call()方法和apply方法的使用
- mysql 插入慢_记一次生产环境mysql数据库参数优化,值得收藏
- BAT转EXE 小程序
- 百度、Google 埋点统计(Vue篇)
- LeetCode Hard难度题目题解汇总(5/150)
- linux系统管理之系统优化(连载)
- 播放服务器视频文件卡顿,视频播放卡顿、无法播放,应该怎么办?
- java通过itextpdf实现pdf文件加水印
- 云服务器分割成虚拟主机销售,IDC行业为何兴起云虚拟主机业务
- Java 从word中提取文字信息(开发笔记)
- mpa和pis_有关压力单位pis
- 一万字长文解读中国的消费经济
- 智慧社区的现状分析及发展前景
热门文章
- 累积分布函数(CDF)
- hdu 2121 Ice_cream’s world II
- Laravel Service Provider 概念详解
- 使用Go语言来理解Tensorflow
- 证券从业资格考试考试心得
- Dex.top“50计划”牵手IOST,赋能公链生态经济
- intellij idea svn 修改文件后,文件夹路径也变为蓝色
- 内蒙古计算机四级网络工程师报名时间,2021内蒙古软考报名-信息系统项目管理师报名-系统集成项目管理工程师报名-报名简章-报名通知...
- [Microsoft][ODBC SQL Server Driver ]超时已过期的解决过程和方法
- SCI文章阅读及查询方法