Aplayer搭配MetingJS音乐插件的使用

Aplayer搭配MetingJS音乐插件的使用

小颜同学 Lv4

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

简单使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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 音乐平台:neteasetencentkugouxiamibaidu
type(类型) require songplaylistalbumsearchartist
auto(支持类种 类) options 音乐链接,支持:neteasetencentxiami
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的使用

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 引用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>
  • 标题: Aplayer搭配MetingJS音乐插件的使用
  • 作者: 小颜同学
  • 创建于: 2022-11-15 23:27:15
  • 更新于: 2024-02-07 14:23:20
  • 链接: https://www.wy-studio.cn/2022/11/15/Aplayer搭配MetingJS音乐插件的使用/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
 评论
此页目录
Aplayer搭配MetingJS音乐插件的使用