码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-10-18 14:59:23      阅读:427      评论:0      收藏:0      [点我收藏+]

标签:embed   音乐   复制   选择   com   widget   css   为什么   alt   

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

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>

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

标签:embed   音乐   复制   选择   com   widget   css   为什么   alt   

原文地址:http://www.cnblogs.com/bndong/p/7686404.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!