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音乐插件的使用的更多相关文章

  1. Ubuntu 14.04 用户如何安装深度音乐播放器和百度音乐插件

    播放本地音乐或者收听国外的音乐电台,Ubuntu 14.04 自带的音乐播放器 Rhythmbox 完全能够满足,但是如果你想有像酷狗那样的国内播放器就需要折腾一下,还好有深度音乐播放器,这是一款完全 ...

  2. 主题博客添加 h5 贴边音乐插件

    前言: 前几日,在逛微博的时候,发现微博主页的左下角有一个贴边的音乐小插件,我顿时就想在自己博客上也弄一个玩玩.当时就想把微博那个移植过来,首先我用谷歌浏览器F12 查看页面源码,和检查元素代码,发现 ...

  3. 一段代码实现Aplayer+网易云音乐接口

    玩cnblogs的小伙伴可以将以下代码复制到页脚html当中哦 <!-- require APlayer --> <link rel="stylesheet" h ...

  4. WP-player——WordPress的一款好用的音乐插件

    作者的主页:http://webjyh.com/wp-player/ 安装:在WordPress后台搜索安装即可,或者去作者的主页下载安装. 使用方法:这个插件是通过短代码调用的,安装好插件之后便可以 ...

  5. DDD中 与Dto搭配的AutoMapper插件，摘自《NET企业级应用架构设计》

    AutoMapper插件 实现了 DTO与Model的互相映射.

  6. Reso | Noise 网易云音乐插件

    源码地址:https://github.com/Simpleyyt/noise-neteasemusic安装方法:sudo add-apt-repository ppa:simpleyyt/ppasu ...

  7. QQ Music 音乐插件DFX unable to open skin configration 的解决方法

    设置 C:\Program Files (x86)\Tencent\QQMusic\Plugins\Dfx\dfx_skin.txt  它的权限 允许程序读取执行

  8. hexo next中遇到的bug，引发出的关于jquery中click()函数和on("click",function())的区别

    个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 背景: 本人在维护博客的时候加入了aplaye ...

  9. Three.js + HTML5 Audio API 打造3D音乐频谱，Let’s ROCK!

    继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码 项目GitHub地址:https: ...

随机推荐

  1. win10执行Tensorflow，总是会报错“DLL load failed: 找不到指定的模块”的解决方式----终极版方式

    win10上运行tensorflow时报错,“DLL load failed: 找不到指定的模块”的解决方式 我只想说,当你们遇到这个问题的时候,以下终极版的方式出来了,非常感谢知乎 leo lv ! ...

  2. Redis（十一）：哨兵模式架构设计分析

    业务最初的应用场景中,我们也许使用单机redis就可以应付业务要求,但并非一直可行. 比如单机的读写能力问题,单机的可用性问题,单机的数据安全性问题.这些都是许多互联网应用经常会遇到的问题,也基本上都 ...

  3. Windows下安装虚拟机

    一.准备工作 1.下载centos7操作系统 阿里巴巴站点: http://mirrors.aliyun.com/centos/7/isos/x86_64/ 2.下载VMware虚假机 可以直接通过3 ...

  4. C#桌面开发的未来WebWindow

    目录 WebWindow 源码 作者博客 基于Chromium的Edge 体验 体验方式一: 体验方式二: 遗留的问题 WebWindow WebWindow是跨平台的库. Web Window的当前 ...

  5. 看完这篇 HTTPS，和面试官扯皮就没问题了

    下面我们来一起学习一下 HTTPS ,首先问你一个问题,为什么有了 HTTP 之后,还需要有 HTTPS ?我突然有个想法,为什么我们面试的时候需要回答标准答案呢?为什么我们不说出我们自己的想法和见解 ...

  6. 关于 服务器ip和域名进行一个绑定

    最近想让人访问我做个一个网站,但是我发现让服务器ip地址直接暴露不是很好 (做着玩) 于是就去阿里云买了一个5块1年的域名 先在网上百度了一下是怎么绑定域名的,发现全是含糊不清的信息,果然是垃圾百度 ...

  7. jmeter 性能测试基本过程及示例

    jmeter 为性能测试提供了一下特色: jmeter 可以对测试静态资源(例如 js.html 等)以及动态资源(例如 php.jsp.ajax 等等)进行性能测试jmeter 可以挖掘出系统最大能 ...

  8. Natas20 Writeup（Session登录，注入参数）

    Natas20: 读取源码,发现把sessionID存到了文件中,按键值对存在,以空格分隔,如果$_SESSION["admin"]==1,则成功登陆,得到flag.并且通过查询所 ...

  9. 会话（cookie的使用，路径和Session的工作原理，使用）

    1.状态管理----Cookie 1.1 为什么需要状态管理 HTTP协议是无状态的,不能保存每次提交的信息,即当服务器返回与请求相对应的应答之后,这次事务的所有信息就丢掉了. 如果用户发来一个新的请 ...

  10. Spring Boot入门系列（九）如何实现异步执行任务

    前面介绍了Spring Boot 如何整合定时任务,不清楚的朋友可以看看之前的文章:https://www.cnblogs.com/zhangweizhong/category/1657780.htm ...