侧边栏壁纸
博主头像
勤奋的冬枣博主等级

只有把抱怨环境的情绪,化为上进的力量,才是成功的保证!

  • 累计撰写 273 篇文章
  • 累计创建 448 个标签
  • 累计收到 116 条评论
标签搜索

目 录CONTENT

文章目录

博客页面嵌入网易云音乐播放器

勤奋的冬枣
2020-02-16 / 2 评论 / 0 点赞 / 2,442 阅读 / 0 字

在自己博客页面嵌入网易云音乐播放器目前好像是最简单,也是最方便的!

1. 获取播放器代码

1.1 单曲播放音乐

我们再登录网易云播放音乐的时候,页面上会显示有生成外链播放器。

image.png

我们在点击的时候会生成,两种结果:

第一种,显示因为版权,无法生成外链。这种用正常的手段,是没有办法播放的。

image.png

第二种,如果没有版权保护,会直接进入生成代码页面。

image.png

这里面有两种选择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为自动播放

image.png

实际的效果图如下(不自动播放):

1.2 歌单播放音乐

歌单播放,和上面基本是一样的,点击歌单上方的生成外链播放器,会直接生成歌单代码。

image.png

image.png

<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。

image.png

也可以,使用电脑客户端在分享中,找到复制链接,地址中包含歌曲ID。

image.png

2.2 获取歌单ID

歌单ID和上面基本思路一样。

打开电脑客户端先找到要用的歌单,然后右键复制链接,链接中有歌单ID。

image.png

3. 嵌入代码

3.1 嵌入页面

嵌入博客的页面,我是用的halo博客系统,hexo系统也是一样的用法。

我以halo博客按理来讲,进入后台以后,进入主题编辑,点击选首页文件index.ftl。

image.png

image.png

然后,根据自己实际需求放到指定位置!我是直接放在通知模块底下了!

image.png

看着位置放,尽量不要放到模块里面及<#if>...</#if>中间,看看实际效果。

image.png

3.2 嵌入文章

嵌入文章,对于halo来说是非常简单的!

因为,halo是采用markdown编辑器,markdown编辑器又是支持直接使用HTML代码,因此,不要考虑其他,直接想放哪,就复制那快了!

具体效果,就是文章上面的播放器了。

提示:在使用markdown编辑器编辑表格,需要合并表格,可以直接使用HTML编写就可以了!

下载.jpg

0

评论区