本文最后更新于18 天前，其中的信息可能已经过时，如有错误请发送邮件到2213745848@qq.com
在header.php处引入三个文件
📎APlayer.min.css📎APlayer.min.js📎Meting.js
<link rel="stylesheet" href="/wp-content/themes/argon/argon/assets/css/APlayer.min.css">
<script src="/wp-content/themes/argon/argon/assets/js/APlayer.min.js"></script>
<script src="/wp-content/themes/argon/argon/assets/js/Meting.js"></script>APlayer的原始用法
<div id="aplayer01"></div>
<script type="text/javascript">
const ap = new APlayer({
//定义容器
container: document.getElementById('aplayer01'),
//关于音频的相关参数：
audio: [{
name: '迷途羔羊',//音频名称
artist: '张震岳',//艺术家
url: 'https://www.fishh.top/wp-content/uploads/2026/07/迷途羔羊-张震岳.mp3',//文件地址
cover: 'https://www.fishh.top/wp-content/uploads/2026/07/迷途羔羊-张震岳-mp3-image.jpg'//封面地址
}]
});
</script>
在js 代码中：
参数 container 值为 document.getElementById('aplayer01') 意思是定义当前播放器容器 id 为 aplayer01
参数 audio 中有 4 个子参数，定义关于音频的相关参数：
- 参数
name定义音频名称 - 参数
artist定义艺术家名 - 参数
url指向音频文件的地址 - 参数
url指向音频封面的地址
然后，在需要使用播放器的地方，将容器 <div> 的 id 设置为参数 container 中设定的值即可
meting-js用法:
在页脚处插入
<meting-js server="netease" type="song" id="454698657" fixed="true"></meting-js>| 选项 | 默认 | 描述 |
| 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键 |
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>musicPlay</title>
<!-- require APlayer -->
<link rel="stylesheet" href="./styles/APlayer.min.css">
<script src="./scripts/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="./scripts/Meting.min.js"></script>
<style>
</style>
</head>
<body>
<div id="player"></div>
<script>
var musicPlay = new APlayer({
element: document.getElementById('player'),//样式1
autoplay: false,
showlrc: true,
audio: [
{
name: 'name1',
artist: 'artist1',
url: './821F0EAEABF4B8C1FA932FC808BBD195.mp3',
cover: 'cover1.jpg',
lrc: 'lrc1.lrc',
theme: '#ebd0c2'
},
{
name: '迷途羔羊',
artist: '张震岳',
url: 'https://www.fishh.top/wp-content/uploads/2026/07/迷途羔羊-张震岳.mp3',
cover: 'https://www.fishh.top/wp-content/uploads/2026/07/迷途羔羊-张震岳-mp3-image.jpg',
lrc: 'https://www.fishh.top/wp-content/uploads/迷途羔羊 - 张震岳.lrc',
theme: '#46718b'
}
]
});
musicPlay.init();
</script>
</body>
</html>