博客园如何嵌入网易云音乐播放器

从网易云官网生成外链播放器

直接使用网易云官网生成的外链播放器是无法使用的,因为博客园是不支持 iframe 标签的。所以,你需要动动你的小脑筋。

我的思路是,对iframe关键字进行Unicode加密,然后使用Js的unescape方法进行解密,字符串拼接一下即可。完整代码如下:

<script type="text/javascript">
var s = unescape("\u0069\u0066\u0072\u0061\u006d\u0065");
var f = '<'+s+' frameborder="no" border="0" marginwidth="0" marginheight="0" width=300 height=330 src="//music.163.com/outchain/player?type=0&id=6980125705&auto=0&height=430 class="music" style="z-index: 0;left: 0PX;display: block;bottom: 0px;position: fixed;"></'+s+'>';
$("body").append(f); //网易云音乐
</script>

可以自己根据需要设置宽、高以及在固定在左边或是右边。

调用开源项目

开源项目:metowolf/MetingJS

将如下代码添加至页脚Html中即可:

<!-- 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
        id="594243151"
        lrc-type="0"
        server="netease"
        order="random"
        type="playlist"
        fixed="true"
        list-olded="true">
</meting-js>

id代表 歌单/歌曲 的id,可以从网易云官网获取。

posted @   Weisswire  阅读(520)  评论(18编辑  收藏  举报
编辑推荐:
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
点击右上角即可分享
微信分享提示