经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
【博客园使用小指南】DIY美化博客园指南
来源:cnblogs  作者:bigorangecc  时间:2020/5/21 23:56:25  对本文有异议

 

 

1、添加音乐播放器(例如 网易云音乐)

【html5 音乐播放器】

源码

GitHub - MoePlayer/APlayer: Wow, such a beautiful HTML5 music player

中文使用指南

https://aplayer.js.org/#/zh-Hans/?id=cdn

cdn链接

https://cdnjs.com/libraries/aplayer

(1)添加html代码 (事先需要申请并通过 博客园的JS 权限 )

【博客园后台管理】——【设置】——【页脚Html代码】——粘贴以下代码(下面的播放器 是 迷你版的,更多样式 可以参考 播放器源码文件)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<script src="https://blog-static.cnblogs.com/files/yjlaugus/APlayer.min.js"></script>
<div id="aplayer" class="aplayer"  data-id="3220493480" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F58EA8"></div>
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>

 

(2)获取歌单链接,修改上面代码的  data-id="3220493480" 

如何获取歌单 id 呢?

(现在网页版和PC版的网易云音乐 歌单界面 没有生成“外链播放器‘的功能了。。)

使用 移动端(手机)分享一个歌单,分享方式选为”复制链接“;

例如 我用手机 网易云APP 分享自己的一个歌单:

分享锦蝶生创建的歌单「老树花开锦蝶生」: http://music.163.com/playlist/3220493480/438654155/?userid=438654155 (来自@网易云音乐)

歌单 id 就是 playlist 后面的 3220493480,修改代码 data-id="3220493480"。保存后,重新进入博客园个人主页就可以听心爱的歌啦~

(3)最后效果

 

 

 

 

 

 

 

【参考阅读】

https://www.cnblogs.com/guanxiying/category/1652463.html

https://www.zhihu.com/question/37316681

 

原文链接:http://www.cnblogs.com/bigorangecc/p/12933932.html

 友情链接: NPS