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>