前言

很久很久以前(3个月前吧),我的PHP博客炸了,于是我迁移到了hexo+github,当时用的一个主题,叫Suka,我觉得很好看,但是有有些过于单调,于是我给他改了一下。
再后来,我魔改文件丢失了,留下的只有在GitHub的那个html文件们,他们将会成为我的回忆。

文章灵感

在魔改途中,我想给页面加上一个音乐播放器。
起初,我是想在左下角加一个类似与这样的播放器。
123
大概可以这样
123
但是咱不会,也找不到这个项目,所以准备曲线救国

Start

首先

让我们准备好一个html文件,以便我们调整参数。
然后往这个html文件里面输入(或者把这些东西塞你的头部文件)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
<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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script>
  • 这是引用所需要的js和css

然后

按下你的ctrl+s保存,紧接着再你需要放置的地方引用下面的代码
<meting-js server="netease" type="playlist" id="746895318" list-folded="true"></meting-js>

这时候你会在html里发现,这个播放器tm的怎么这么宽!

别慌,让我们给他套个div

<div style="width:400px;margin:0 auto">
<meting-js server="netease" type="playlist" id="746895318" list-folded="true"></meting-js>
<div/>

真他妈刺激

最后

把这段玩意插入你需要插入的地方就好了,顺带个快速插入:

<div style="width:400px;margin:0 auto">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
<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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js""></script>
<meting-js server="netease" type="playlist" id="746895318" list-folded="true"></meting-js>
<div/>

附赠:播放器参数说明

仔细观察一下这个
<meting-js server="netease" type="playlist" id="746895318" list-folded="true"></meting-js>
你会发现有

  • server="netease" (云音乐平台)
  • type="playlist" (没卵用删掉也可)
  • id="746895318" (歌单名)
  • list-folded="true" (播放列表是否折叠)
    云音乐好像有些麻烦?没事,直接auto!
<meting-js
    auto="http://你的歌单链接">
</meting-js>

(所以为什么不访问一下作者的git呢?)

我顺便带上参数解析吧,就不翻译了,

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
Last modification:January 28th, 2020 at 11:25 am
如果觉得我的文章对你有用,请随意赞赏