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. 论nw.js的坑~~~感觉我所有的前端能遇到的坑都踩了一遍

    先总结:nw.js 真特么的...难用...文档,我得先百度才能看的稍微明白点文档......!!!!!!我感觉我所有的前端能遇到的坑都踩了一遍,此文针对前后端分离项目,别的先不说 一.不需要在项目里 ...

  2. 数据结构之HashMap

    前言 在我们开发中,HashMap是我们非常常用的数据结构,接下来我将进一步去了解HashMap的原理.结构. 1.HashMap的实现原理 HashMap底层是基于Hash表(也称“散列”)的数据结 ...

  3. C++ 标准模板库(STL)-stack

    主要介绍一下C++11版本中标准模板库中栈的用法,希望可以帮到需要用的人. #include <iostream> #include <stack> #include < ...

  4. Vue2.0 【第一季】第8节 v-pre & v-cloak & v-once

    目录 Vue2.0 [第一季] 第8节 v-pre & v-cloak & v-once v-pre 指令 v-cloak 指令 v-once 指令 Vue2.0 [第一季] 第8节 ...

  5. Redux的createStore实现

    Redux的createStore实现   使用过react的同学应该对Redux这个东西有所了解.他是一种全局状态管理的思想(对, 这里我觉得它是一种思想, 因为对于React来说, 其实Redux ...

  6. File判断功能(新手)

    //导入的一个类.import java.io.File;/* File判断功能*///创建的一个类.public class zylx3 { //公共静态的主方法. public static vo ...

  7. Linux命令进阶篇-文件查看与查找

    上一篇的博客对于Linux如何在不同目录下跳转和查看目录下内容做出了总结,主要靠cd和ls,很常见也很实用.但是你看到目录下面那么多不同花花绿绿的文件,心里是不是痒痒,是不是想进去一探究竟,有办法! ...

  8. Linux软件安装之JDK的安装

    JDK的安装 1.1. 下载JDK,此处版本是1.8u131,实际操作以自己具体版本为准 先查看Linux系统是多少位(32位/64位):getconf LONG_BIT 然后去官网下载JDK [jd ...

  9. 动态规划-Maximum Subarray-Maximum Sum Circular Subarray

    2020-02-18 20:57:58 一.Maximum Subarray 经典的动态规划问题. 问题描述: 问题求解: public int maxSubArray(int[] nums) { i ...

  10. 装numpy 环境：python3.4+ windows7 +64位系统

    机器学习实战python 因为图像处理的原因,初步学习机器学习,选用语言python,参考书籍<机器学习实战> 环境:python3.4+ windows7 +64位系统 首先,今天解决的 ...