APlayer播放器+MetingJ是一个强大的存在，可在我们的网站播放各大平台的音乐,音乐播放器也有多种模式，现在几乎所有网页使用音乐播放器的网站都在使用他，下面看看播放器样式，音乐播放器等源码项目下载，请继续阅读下面文章废话不多说直接进入主题，先看播放器方式，截图很丑，演示就强大了，可复制实例代码1到自己的网站看看效果。
实例代码一：（固定展示在网页左下角）
1.复制下面代码至网站公共底部文件，一般为“footer”命名的文件，理论“</body>”标签前均可。
<!--音乐插件--><link rel="stylesheet" href="//cdn.staticfile.org/aplayer/1.10.1/APlayer.min.css"><script src="//cdn.staticfile.org/aplayer/1.10.1/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script><meting-js server="netease" type="playlist" id="4902606135" autoplay="false" fixed ="true" </meting-js><!--音乐插件-->
2.上述代码中，1、2、3行代码为调用远程js文件（CDN加速），我们一般不用修改，如果你需要下载到本地，同步一下即可。
3.最重要的是第四行代码，我们需要知道各个标签表示的是什么,下面我们就来简单解释一下
<meting-js server="netease" type="playlist" id="4902606135" autoplay="false" fixed ="true" </meting-js>
server="netease" 表示：平台名称=> （netease:网易；tencent:腾讯；xiami:虾米 kugou:酷狗；baidu:百度）
type="playlist" 表示：类型=> （playlist:歌单；song:单曲；专辑:album；关键词:search；歌手:artist）
id="4902606135" 表示：网易云音乐的歌单id为“4902606135”
autoplay="false" 表示：自动播放（自动播放：true；不自动播放：false）
fixed ="true" 表示：固定模式 （是：true；不是：false）
实例代码二：（页面插入暂时）
1.在头部文件header上添加如下代码，一般为<head>标签与</head>标签直接直接：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.css"><script src="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.js"></script>
2.在底部文件</body>标签之前上添加下述代码，一般为“footer”命名的文件
<script src="https://cdn.jsdelivr.net/npm/meting@1.1.0/dist/Meting.min.js"></script>
3.在使用的地方上添加如下代码;
<div class="aplayer" data-id="60198" data-server="netease" data-type="playlist"></div>
或者，喜欢哪一个添加哪一个
<div class="aplayer" data-id="002QE24W26baEy" data-server="tencent" data-type="album" data-fixed="true" data-autoplay="false" data-volume="1.0" data-list-max-height="200px" data-list-folded="true"></div>
4.上述第3步在使用时，我们可以用自己模板的css样式包裹起来，这样才更好看
注：上述1、2步还是一样不用管，还是修改第三步，标签就不再重述了，参考实例一和下面的标签，写得很详细了！
标签说明:
| 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 |
翻译中文参考：
| 选项 | 默认 | 描述 |
|---|---|---|
| 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键 |
应客B2C电商系统商城源码支持PC+小程序+公众号+H5可打包Ap...
原生开发淘宝客App，Android+ios独立开发，全开源支持二...
应客知识付费系统在线教育平台源码+题库系统源码，PC+公众号商业授...
单商户电商系统源码部署小程序+公众号+H5+App源码...
应客教育知识付费系统源码带题库功能商业授权公众号+H5源码...
陕公网安备61019602000396 方烜律师事务所提供法律服务 | Copyright 2025 源码码网 版权所有
