Aplayer搭配Metingjs音乐插件的使用
Aplayer搭配MetingJS音乐插件的使用
1. Aplayer和MetingJ的介绍
Aplayer官网文档:https://aplayer.js.org/#/
Metingjs官网文档:https://github.com/metowolf/MetingJS
Aplayer是一个功能强大的HTML5音乐播放器,Metingjs基于Aplayer插件封装好的插件,开箱即用。
2. MetingJS的简单使用
MetingJS支持Aplayer版本
Version | API Status | APlayer |
---|---|---|
1.2.x | Supported | 1.10.0 |
2.0.x | Latest | 1.10.0 |
支持的浏览器
- Chrome
- Firefox
- Safari
- Internet Explorer 11
- Microsoft Edge
简单使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- require APlayer -->
<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>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
</head>
<body>
<meting-js server="netease" type="playlist" id="60198"></meting-js>
</body>
</html>
解析:server="netease" type="playlist" id="60198"
server指音乐平台,netease指网易云音乐, type类型,playlist列表,id指歌曲的i或者专辑或列表外链id
因此重点在于指定平台,指定外链id
效果:
中文版选项
选项 | 默认 | 描述 |
---|---|---|
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 |
启用固定模式,默认false |
mini(迷你模式) | false |
启用迷你模式,默认false |
autoplay(自动播放) | false |
音频自动播放,默认false |
theme(主题颜色) | #2980b9 |
默认#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 |
列出最大高度 |
storage-name(储存名称) | metingjs |
存储播放器设置的localStorage键 |
英文版选项
option | default | description |
---|---|---|
id | require | song id / playlist id / album id / search keyword |
server | require | music platform: netease , tencent , kugou , xiami , baidu |
type | require | song , playlist , album , search , artist |
auto | options | music link, support: netease , tencent , xiami |
fixed | false |
enable fixed mode |
mini | false |
enable mini mode |
autoplay | false |
audio autoplay |
theme | #2980b9 |
main color |
loop | all |
player loop play, values: 'all', 'one', 'none' |
order | list |
player play order, values: 'list', 'random' |
preload | auto |
values: 'none', 'metadata', 'auto' |
volume | 0.7 |
default volume, notice that player will remember user setting, default volume will not work after user set volume themselves |
mutex | true |
prevent to play multiple player at the same time, pause other players when this player start play |
lrc-type | 0 |
lyric type |
list-folded | false |
indicate whether list should folded at first |
list-max-height | 340px |
list max height |
storage-name | metingjs |
localStorage key that store player setting |
3. 迷你版背景音乐
根据以上参数,写好了迷你版背景音乐,默认在左下角显示,默认列表折叠,默认不显示歌词
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- require APlayer -->
<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>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
</head>
<body>
<meting-js
server="netease"
type="playlist"
id="60198"
fixed="true"
autoplay="true"
loop="all"
order="random"
preload="auto"
list-folded="ture"
list-max-height="500px"
lrc-type="1">
</meting-js>
</body>
</html>
抽取出来
<!--css-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<!--js-->
<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="60198"
fixed="true"
autoplay="true"
loop="all"
order="random"
preload="auto"
list-folded="ture"
list-max-height="500px"
lrc-type="1">
</meting-js>
4. 网易云音乐外链获取方法
1、打开网页版网易云音乐:https://music.163.com/#
2、选择想要添加到音乐列表去的音乐,由于部分歌曲限制外链,只能另辟蹊径
3、打开网页控制台
4、选中外链元素
5、复制该行代码
<a data-action="outchain" data-rt="" data-href="/outchain/2/1400256289/" class="des s-fc7">生成外链播放器</a>
6、取data-href的链接,前面加上https://music.163.com/#进行拼接
https://music.163.com/#/outchain/2/1400256289/
7、访问:https://music.163.com/#/outchain/2/1400256289/,获取id成功
5. 网易云音乐个人歌单id获取
登陆个人网易云音乐,打开歌单,查看浏览器地址,id后面就是歌单
6. 博客园引用背景音乐
页脚区
<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>
<div>
<meting-js
server="netease"
type="playlist"
id="60198"
fixed="true"
autoplay="true"
loop="all"
order="random"
preload="auto"
list-folded="ture"
list-max-height="500px"
lrc-type="1">
</meting-js>
</div>
Aplayer搭配Metingjs音乐插件的使用的更多相关文章
- Ubuntu 14.04 用户如何安装深度音乐播放器和百度音乐插件
播放本地音乐或者收听国外的音乐电台,Ubuntu 14.04 自带的音乐播放器 Rhythmbox 完全能够满足,但是如果你想有像酷狗那样的国内播放器就需要折腾一下,还好有深度音乐播放器,这是一款完全 ...
- 主题博客添加 h5 贴边音乐插件
前言: 前几日,在逛微博的时候,发现微博主页的左下角有一个贴边的音乐小插件,我顿时就想在自己博客上也弄一个玩玩.当时就想把微博那个移植过来,首先我用谷歌浏览器F12 查看页面源码,和检查元素代码,发现 ...
- 一段代码实现Aplayer+网易云音乐接口
玩cnblogs的小伙伴可以将以下代码复制到页脚html当中哦 <!-- require APlayer --> <link rel="stylesheet" h ...
- WP-player——WordPress的一款好用的音乐插件
作者的主页:http://webjyh.com/wp-player/ 安装:在WordPress后台搜索安装即可,或者去作者的主页下载安装. 使用方法:这个插件是通过短代码调用的,安装好插件之后便可以 ...
- DDD中 与Dto搭配的AutoMapper插件,摘自《NET企业级应用架构设计》
AutoMapper插件 实现了 DTO与Model的互相映射.
- Reso | Noise 网易云音乐插件
源码地址:https://github.com/Simpleyyt/noise-neteasemusic安装方法:sudo add-apt-repository ppa:simpleyyt/ppasu ...
- QQ Music 音乐插件DFX unable to open skin configration 的解决方法
设置 C:\Program Files (x86)\Tencent\QQMusic\Plugins\Dfx\dfx_skin.txt 它的权限 允许程序读取执行
- hexo next中遇到的bug,引发出的关于jquery中click()函数和on("click",function())的区别
个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 背景: 本人在维护博客的时候加入了aplaye ...
- Three.js + HTML5 Audio API 打造3D音乐频谱,Let’s ROCK!
继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码 项目GitHub地址:https: ...
随机推荐
- 纯CSS实现带返回顶部右侧悬浮菜单
这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果,如下图, 使用工具是Hbuilder. 代码如下: <!DOCTYPE html> <html> <head> ...
- 基于 Redis 实现 CAS 操作
基于 Redis 实现 CAS 操作 Intro 在 .NET 里并发情况下我们可以使用 Interlocked.CompareExchange 来实现 CAS (Compare And Swap) ...
- 一起了解 .Net Foundation 项目 No.14
.Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. .NET Core .NE ...
- Function.prototype.call.apply()方法
在看uncurrying化函数时候,碰到了Function.prototype.call.apply()的用法: 先说说uncurrying()函数: Function.prototype.uncur ...
- JVM系列八(虚拟机性能监控命令).
jps JVM Process Status Tool,显示指定系统内所有的 HotSpot 虚拟机进程.显示信息包括虚拟机执行主类名称以及这些进程的本地虚拟机唯一ID(Local Virtual M ...
- Simulink仿真入门到精通(一) Simulink界面介绍
Simulink提供了一个动态系统建模.仿真和综合分析的集成环境,是MATLAB最重要的组件之一. 以模块为功能单位,通过信号线进行连接 通过GUI调配每个模块的参数 仿真结果以数值和图像等形象化方式 ...
- 转:标签中的href如何调用js
在HTML中,<a>标签的href属性用于指定超链接的目标的URL.在所有浏览器中,链接的默认外观是: 未被访问的链接带有下划线而且是蓝色的 已被访问的链接带有下划线而且是紫色的 活动 ...
- JAVAEE学习day05学习,数组
容器及元素的概念 容器:是将多个数据存储到一起 元素:每个数据称为该容器的元素 数组的概念 数组:数组是长度固定,存储数据的容器,保证多个数据的类型要一致 数组定义格式及其描述 动态定义: 数据类型 ...
- frida(hook工具)的环境搭建
一.简介 frida 是一款基于 python+javascript 的 hook 框架,可运行在 android.ios.linux.win等各个平台,主要使用的动态二进制插桩技术. Frida官网 ...
- What is the difference between shades and shadows?
Shade is the darkness of an object not in direct light, while shadows are the silhouette of an objec ...