在自己博客页面嵌入网易云音乐播放器目前好像是最简单,也是最方便的!
1. 获取播放器代码
1.1 单曲播放音乐
我们再登录网易云播放音乐的时候,页面上会显示有生成外链播放器。
我们在点击的时候会生成,两种结果:
第一种,显示因为版权,无法生成外链。这种用正常的手段,是没有办法播放的。
第二种,如果没有版权保护,会直接进入生成代码页面。
这里面有两种选择iframe插件和flash插件。
iframe插件
- 优点:可以自己调整插件的高度、宽度
- 缺点:很多博客网站不支持嵌入iframe,请试一下您的网站是否支持
flash插件
- 优点:可以适用大部分的博客,如网易、新浪博客等
- 缺点:无法自己调整插件的高度、宽度
对于上面两种,我建议不要使用flash插件!这个flash插件现在越来越多的浏览器已经抛弃了,尤其是chrome浏览器,但这不是主要原因。如果使用flash插件,就意味着客户端电脑就要安装flash,但是自从flash被国内公司代理以后,就开始投放弹窗广告,极其恶心!
然后,调整代码参数
在调整代码参数,主要是调整尺寸,但是如果我们是放入页面的框架中,将下面的代码width的值,改成100%,就可以了。
其他的除了高和宽,调整也不起作用!
嵌入代码:
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=541131&auto=1&height=66"></iframe>
参数说明
width=100% # 嵌入框架内建议自适应宽度100%,其他的自己修改
height=86 # 根据自己喜好修改高度,因为里面没啥显示的,太高没意义!
id=541131 # 为歌曲的ID
auto=0 # 0为不自动播放,1为自动播放
实际的效果图如下(不自动播放):
1.2 歌单播放音乐
歌单播放,和上面基本是一样的,点击歌单上方的生成外链播放器,会直接生成歌单代码。
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="100%" height="450" src="//music.163.com/outchain/player?type=0&id=3238049584&auto=1&height=430"></iframe>
控制的参数和上面单曲播放的一模一样!
实际效果如下(不自动播放):
上面,有的歌曲无法播放那是因为版权的问题,无法外链!
2. 获取歌曲ID
2.1 获取单曲ID
在网页端,播放任意歌曲,网址都会显示歌曲ID。
也可以,使用电脑客户端在分享中,找到复制链接,地址中包含歌曲ID。
2.2 获取歌单ID
歌单ID和上面基本思路一样。
打开电脑客户端先找到要用的歌单,然后右键复制链接,链接中有歌单ID。
3. 嵌入代码
3.1 嵌入页面
嵌入博客的页面,我是用的halo博客系统,hexo系统也是一样的用法。
我以halo博客按理来讲,进入后台以后,进入主题编辑,点击选首页文件index.ftl。
然后,根据自己实际需求放到指定位置!我是直接放在通知模块底下了!
看着位置放,尽量不要放到模块里面及<#if>...</#if>中间,看看实际效果。
3.2 嵌入文章
嵌入文章,对于halo来说是非常简单的!
因为,halo是采用markdown编辑器,markdown编辑器又是支持直接使用HTML代码,因此,不要考虑其他,直接想放哪,就复制那快了!
具体效果,就是文章上面的播放器了。
提示:在使用markdown编辑器编辑表格,需要合并表格,可以直接使用HTML编写就可以了!
评论区