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

时间：2024-04-16 17:34:04

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

直接使用网易云官网生成的外链播放器是无法使用的，因为博客园是不支持 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，可以从网易云官网获取。

相关文章