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键 |
1.使用本站下载的源码仅限于个人学习和非商业用途。
2.禁止将本站下载的源码用于搭建或支持任何违法、淫秽、暴力或侵犯他人合法权益的网站或应用。
3.使用本站下载的源码需遵守国家法律法规及相关规定，不得从事任何违法活动。
4.如若本站内容侵犯了原著者的合法权益，请联系我们进行处理。
评论(0)