博客美化：为你的博客添加音乐插件

Posted 2020-10-11

无意中发现，心血来潮就试着放到博客里。以网易云音乐为例，其他播放器插件大同小异。

1. 效果

2. 添加到博客

2.1 播放器插件

　　主流的都可以，官方都提供外链：网易云、虾米

 

　　拿网易云来说：

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="//music.163.com/outchain/player?type=1&id=1678955&auto=1&height=430"></iframe>

 

　　网易云提供的是iframe标签，而博客园不能添加iframe，所以把此标签替换成embed就可以了

<embed frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="//music.163.com/outchain/player?type=1&id=1678955&auto=1&height=430"></embed>

 

 　　参数中：id可以换成自己喜欢的歌单id，auto代表是否自动播放

网易云的插件感觉好久没更新了：
   1. 无论放什么歌，专辑封面永远是第一首的
   2. 歌名位置显示的为什么不是当前播放的歌名啊喂~
   3. 如果有一首歌涉及版权，播放到这首歌就会停止，而且也不能选择播放这首歌
ヽ(｀⌒´)?┻━┻︵ ┻━┻  

2.2 Code

　　将下面代码复制到页脚html代码中，大家可以引用我的样式文件，有需要的可以下载自己修改

 

<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/bndong/menu_cornermorph.css" />

<div class="menu-wrap">
    <embed frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=355 src="//music.163.com/outchain/player?type=0&id=316722029&auto=0&height=430"></embed>
</div>

<button class="menu-button" id="open-button"><img class="menu-rotation" src="https://files.cnblogs.com/files/bndong/music.gif"><span>Open Menu</span></button>
<div class="content-wrap"></div>

<script src="https://files.cnblogs.com/files/bndong/classie.js"></script>
<script src="https://files.cnblogs.com/files/bndong/main.js"></script>