Aplayer搭配MetingJS音乐插件的使用

Aplayer搭配MetingJS

Aplayer官网文档：https://aplayer.js.org/#/

Metingjs官网文档：https://github.com/metowolf/MetingJS

Aplayer是一个功能强大的HTML5音乐播放器，Metingjs基于Aplayer插件封装好的插件，开箱即用。

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="7727259103"></meting-js>
	
	</body>
</html>

注意：server=”netease” type=”playlist” id=”7727259103” 你可以设置”netease“为网易云音乐，”tencent“为QQ音乐平台，id当你创建一个歌单之后右键分享歌单会出现一串数字（网易云），字母（QQ音乐）

Aplayer参数选择

选项	默认	描述
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键

Aplayer的使用

将这行代码复制进你的网页，调整好参数，就可以开始自定义化你的播放器啦！

我的博客网页播放器配置示例：

<!-- 引用Aplayer和metingjs -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js"></script>
<div id="my-aplayer"
	class="aplayer" 
	data-id="7727259103" 
	data-server="netease" 
	data-type="playlist" 
	data-fixed="false"
	data-autoplay="false" 
	data-order="list" 
	data-volume="0.1" 
	data-theme="#2EA7E0" 
	data-preload="auto" 
    data-listFolded="ture"
></div>