Add Aplayer

Gridea 添加 Aplayer 音乐播放插件

在head.ejs中添加

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css">

在footer.ejs中添加

<script src="https://cdn.jsdelivr.net/npm/color-thief-don@2.0.2/src/color-thief.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.1.0/dist/Meting.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>

以下是相应的插入代码, 吸底模式可以在 body的任意地方 推荐顶部(效果可在本博客首页左下角查看) , 其他的就是在对应位置 可以在 md文件中插入使用 内联html 即 在文章中插入音乐

<!-- 吸底模式 默认播放表列隐藏 如需默认显示 删除 aplayer-narrow 即可 -->
  <div id="aplayer9" class="aplayer aplayer-fixed aplayer-narrow" data-id="" data-server=”netease" data-type="playlist" data-autoplay=”true” data-mode=”circulation”></div>
<!-- 迷你模式 -->
  <div id="aplayer6" class="aplayer aplayer-narrow" data-id="" data-server=”netease" data-type="playlist" data-autoplay=”true” data-mode=”circulation”></div>
<!-- 列表模式 -->
  <div id="aplayer5" class="aplayer aplayer-withlrc aplayer-withlist" data-id="" data-server=”netease" data-type="playlist" data-autoplay=”true” data-mode=”circulation”></div>

参数配置如下:

  1. data-id: 歌曲/专辑/歌单对应的id。注意这里需要是歌曲原本的id,不是你自己歌单中点击后显示的。 (必须)
  2. data-server: 音乐平台, 大致支持以下几个,我只测了一下网易音乐和虾米音乐。(必须)
  • netease(网易云音乐)
  • tecent(qq音乐)
  • xiami(虾米音乐)
  • kugou(酷狗音乐)
  1. data-type:请求类型(必须)
    • song(单曲)
    • album(专辑)
    • playlist(歌单)
    • search(搜索)
  2. data-mode: 播放模式(可选)
    • random(随即)
    • single(单曲)
    • circulation(列表循环)
    • order(列表)
  3. data-autoplay: 自动播放(可选)
    • false
    • true

歌曲id 参见下图

效果

																																																																 https://cloud.tencent.com/developer/support-plan?invite_code=3ddc7ex0dku8o

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Second python spider pro

    写完第二个爬虫之后,写了好几个,但是总归是因为技术原因,达不到自己想要的效果,在重写第二个爬虫时这种感觉尤为强烈,所以写完这个之后,回去继续看剩下的网课,充实自...

    BORBER
  • Third python spider

    这是我写的的第三个爬虫用来爬取 58同城上的招聘信息 也没有什么大用只是用来练手的,我觉得 编程是一个只有动手才能学会的东西.

    BORBER
  • Second python spider

    朋友( Miracoi )说自己的泡面板没漫画可看,我也正好昨天开始学爬虫 看看能不能爬些漫画给他看,我就找了一个漫画网站,开始了.

    BORBER
  • Python爬虫教程:爬取微博数据【附源码】

    3、将获得的两项内容填入到weibo.py中,替换代码中的YOUR_USER_ID和#YOUR_COOKIE,运行代码。

    python学习教程
  • 【学习】笨办法学R编程(三)

    看到各位对“笨办法系列”的东西还比较感兴趣,我也很乐意继续写下去。今天的示例将会用到数据框(data.frame)这种数据类型,并学习如何组合计算...

    小莹莹
  • python实现在线翻译

    砸漏
  • 直接扩频通信(中)Verilog 实现

    今天给大侠带来直接扩频通信,由于篇幅较长,分三篇。今天带来中篇,也是第二篇,系统的 verilog 实现 。话不多说,上货。

    FPGA技术江湖
  • 学习笔记 | 基于FPGA的伪随机数发生器(附代码)

    今天是画师本人第一次和各位大侠见面,执笔绘画FPGA江湖,本人写了篇关于FPGA的伪随机数发生器学习笔记,这里分享给大家,仅供参考。

    FPGA技术江湖
  • FPGA学习altera 系列 第二十三篇 二进制转BCD

    大侠好,欢迎来到FPGA技术江湖,江湖偌大,相见即是缘分。大侠可以关注FPGA技术江湖,在“闯荡江湖”、"行侠仗义"栏里获取其他感兴趣的资源,或者一起煮酒言欢。...

    FPGA技术江湖
  • 利用Phaser开发微信小游戏(排行榜小结)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明...

    bering

扫码关注云+社区

领取腾讯云代金券