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音乐创建歌单,获取链接

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 %}

个人博客:https://deletelibrary.com/

上一篇下一篇

猜你喜欢

热点阅读