前言

Aplayer官方文档:https://aplayer.js.org/#/zh-Hans/,有兴趣的可以查看一下官方文档,解锁更多玩法。

本文介绍的方法参考https://github.com/metowolf/MetingJS

此方法好处是比较简单,坏处是页面有局限性,如果需要全局播放且切换页面继续播放的话,请自行百度,我不会(没研究)。

开始

引用文件

首先在你网站的head标签里面添加如下代码:
注意:连接可能抽风,建议下载下面代码放到本地。

1
2
3
4
5
<!-- 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/dist/Meting.min.js"></script>

添加标签

然后在body标签的任意位置增加如下代码:

1
2
<!-- 其中的Id是QQ音乐歌单id -->
<meting-js server="tencent" type="playlist" autoplay="true" id="7903334636" volume=0.5 fixed="true"></meting-js>

参数表

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