hexo添加音乐
2019-06-11 本文已影响0人
呦呵呵呵呵呵
前言:网易云音乐上有很多不错的歌曲,但是因为版权问题部分不能生成外链接。aplayer是github上的开源项目,最新的支持了MetingJS,强力推荐aplayer+MetingJS,支持多个平台。
网易云
生成音乐链接
打开🎧网易云音乐搜索想要的音乐,点击生成外部链接播放器
网易云音乐
获取html代码
网易云音乐
html代码:
<iframe frameborder="no" ... 0&height=66"></iframe>
添加到文章中
找到下面位置粘贴代码
{% endif %}
{% include '../_custom/sidebar.swig' %}
+ <iframe frameborder="no" ... height=66"></iframe>
</div>
</section>
{% if display_toc and toc(page.content).length > 1 %}
Aplayer+MetingJS
使用 hexo-tag-aplayer 插件
hexo-tag-aplayer 是Aplayer在hexo上的插件,这里的配置参考的是官方文档
,第一步安装 hexo-tag-aplayer:
npm install --save hexo-tag-aplayer
去MetingJS复制以下代码
<!-- 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>
<meting-js
server="netease"
type="playlist"
id="60198">
</meting-js>
根据MetingJS文档修改
建议直接用auto这个参数,这样不用设置id
参数 | 默认 | 描述 |
---|---|---|
id | 可选 | 歌曲ID /播放列表ID /专辑ID /搜索关键字 |
server | 可选 | 音乐平台:netease,tencent,kugou,xiami,baidu |
type | 可选 | 歌曲风格:song,playlist,album,search,artist |
auto | 可选 | 音乐链接,支持:netease,tencent,xiami |
fixed | false | 固定模式 |
mini | false | 迷你模式 |
autoplay | false | 自动播放 |
theme | #2980b9 | 播放器颜色 |
loop | all | 循环播放: 'all', 'one', 'none' |
order | list | 播放顺序: 列表'list', 随机'random' |
volume | 0.7 | 默认音量,注意播放器会记住用户设置 |
lrc-type | 0 | 歌词 |
list-folded | false | 列表是否首先折叠 |
list-max-height | 340px | 列表最大高度 |
我这里以QQ音乐为一个例子:
1.去qq音乐创建歌单,获取链接
找到下面位置粘贴代码
{% endif %}
{% include '../_custom/sidebar.swig' %}
+ <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/meting@2/dist/Meting.min.js"></script>
+<meting-js
+ auto="https://y.qq.com/n/yqq/playlist/6916535054.html#stat=y_new.profile.create_playlist.click&dirid=5"
+ list-folded= "true"
+</meting-js>
</div>
</section>
{% if display_toc and toc(page.content).length > 1 %}