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（cpu）+keras+jupyter notebook运行环境

    记录,自用 1.安装Anaconda(这里安装的是python3.6版本) 2.创建tensorflow的conda环境 conda create -n tensorflow python=3.6 3 ...

  2. 304 Not Modified

    304 Not Modified,不是服务器发出的错误,是服务器所承载的业务系统在开发时为了节省带宽和提升浏览器的体验,对GET/js,css,image等执行了缓存机制.客户端第一次对服务器发出GE ...

  3. [IOI1994] 时钟 - 搜索

    考虑九个安排在 \(3 \times 3\) 矩阵中的时钟,每个时钟只会指向 \(3,6,9,12\) 点.有 \(9\) 种操作方式,每种操作方式规定了其固定的操作对象集合,将这几个时钟都往后拨 \ ...

  4. 什么是SSH与SSH客户端

    1.什么是SSH? SSH 为 Secure Shell 的缩写,由 IETF 的网络工作小组(Network Working Group)所制定:SSH 为建立在应用层和传输层基础上的安全协议.SS ...

  5. Lake Counting（POJ No.2386）

    题目描述:有一个大小为N*M的园子,八连通的积水被认为是连接在一起的.请求出园子里总共有多少水洼?(八连通指的是下图中相对w的*部分) *** *w* *** 限制条件 N,M<=100 样例 ...

  6. Block详解一(底层分析)

    本篇博客不再讲述Block的基本定义使用,最近而是看了很多的block博客讲述的太乱太杂,所以抽出时间整理下block的相关底层知识,在讲述之前,提出几个问题,如果都可以回答出来以及知道原理,大神绕过 ...

  7. CentOS安装docker ce的三种方式

    参考文章: CentOS安装docker ce的三种方式: 1.环境 CentOS Linux release 7.6.1810 (Core) 2.卸载旧版本 sudo yum remove dock ...

  8. python基础学习day4

    列表的初识 why:int bool str str: 存储少量的数据. str:切片还是对其进行任何操作,获取的内容全都是str类型.存储的数据单一. what:list list = [66, ' ...

  9. [组件封装]微信小程序-图片批量上传照片墙

    描述 批量上传图片, 可设置最大上传个数, 可删除, 可设置默认值. 效果 源码 pictures-wall.wxml <view class="picturesWall"& ...

  10. 手把手教你用GoEasy实现Websocket IM聊天

    经常有朋友问起GoEasy如何实现IM,今天就手把手的带大家从头到尾用GoEasy实现一个完整IM聊天,全套代码已经放在了github. 今日的前端技术发展可谓百花争鸣,为了确保本文能帮助到使用任何技 ...