博客园背景音乐调用,让音乐为你的博文加点料

  单调的文字怎么行,让音乐为你的博文加点料。什么?你写的是技术型博客不搞这么多文艺,大叔,技术型博客也可以很文艺的诶。

  今天下三分,网易云、虾米、所有的XX音乐各占据了国内的音乐市场,不过要论曲库哪家全,网易云虾米撕破脸。所以呢,要想博客加上稳定的音乐外链,就在这两者之间选择吧。

在网站上选择合适的背景音乐并外链

  何为“合适的背景音乐”呢?首先是前奏不要太唐突,不然网友一打开你的博客就是“咚咚咚”的声音,撸管到一半犯心脏病怎么办?其次就是曲调柔和,柔和的曲调可以使听众最大化,因为大部分人对这种音乐都不反感。做到这两点,就可以去网易云\虾米上搜索选定歌曲了,当然也可以外链歌单。

  在歌曲/歌单页面下,点击“生成外链播放器”(网易)、“转帖”(虾米)就可以看到歌曲的HTML代码了。这里以歌曲 Echo 为例,展示下两种不同播放器的区别。

<embed src="http://www.xiami.com/widget/0_1770124689/singlePlayer.swf"
 type="application/x-shockwave-flash"
 width="257"
 height="33"
 wmode="transparent">
</embed>

<iframe frameborder="no"
 border="0"
 marginwidth="0"
 marginheight="0"
 width=330 height=86
 src="http://music.163.com/outchain/player?type=2&id=18607260&auto=0&height=66"></iframe>

  值得注意的是,虾米使用的是 embed 而网易云则是 iframe,而 iframe 有个很大的毛病,这个网易云也有提示——“很多博客网站不支持嵌入iframe,请试一下您的网站是否支持”。这些都不重要,重要的是博客园就不支持 iframe。当然要解决也很简单,把 iframe 替换成 embed 就行了,注意前后两个标记都要替换哦,此外,既然都没有 iframe 了,自然 frameborder 也可以去掉了,结果就是:

<embed border="0"
 marginwidth="0"
 marginheight="0"
 width=330 height=86
 src="http://music.163.com/outchain/player?type=2&id=18607260&auto=0&height=66"></embed>

  注意:auto=1 为自动播放,0为不自动播放;width 和 height 修改前面的,根据自己的博皮调整。

将外链播放器应用在博客园首页

  这个想必大家都知道了,进入博客园设置,复制之前得到的代码添加在 页首/页脚/公告 里,刷新一下博客页面,就可以看到播放器妖娆地躺在页面上了。

效果图(放置在公告栏)

下面是歌曲推荐时间

作者:RhinoCodec 
来源:http://rhinoc.cnblogs.com/ 
本文版权归作者和博客园共有,欢迎转载,但未经作者允许必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

博客园添加背景音乐,给你的博文加点料相关推荐

  1. css文件插入背景音乐,博客园添加背景音乐,背景效果!

    博客园添加背景音乐,背景效果 申请博客园js权限 申请话术 实例 尊敬的博客园管理员: 请求申请开通js权限,希望能够把自己的博客修饰的漂亮点,点缀自定义js插件效果,希望管理员可以批准,谢谢! 开通 ...

  2. 博客园添加背景音乐以及播放器 或在左下方固定位置添加音乐播放器 给你的博文锦上添花,增姿添彩

    官方教程:https://aplayer.js.org/#/zh-Hans/ 一.第一种样式 这种你想添加多少音乐就添加多少音乐! 将下方代码复制到博客侧边栏! 话不多说! 上代码! <!-- ...

  3. 为博客园添加github跳转链接

    一般程序员都会有自己的github仓库,在博客园添加跳转链接,可以很方便的进行访问查看. 添加html 首先,需要在设置中添加一段html,用于跳转链接 <a class="git-l ...

  4. 博客园添加鼠标粒子吸附特效

    本文从以下三个方面, 阐述在博客园添加鼠标粒子吸附特效: 一. 效果展示 二. 权限申请 三. 设置步骤 一. 效果展示 在博客园的页面, 出现鼠标粒子吸附的特效, 如图所示: 二. 权限申请 点击博 ...

  5. 博客园添加live2D看板娘和樱花飘落背景

    写在前面 本文主要描述了怎么给博客园添加看板娘和樱花飘落特效,文章可能还有很多不足,请大家谅解,欢迎大佬提意见. 本文使用的东西 live2d(看板娘) 樱花飘落 博客园 文章目录 写在前面 本文使用 ...

  6. 【分享】给自己的博客园添加一个板娘(可选)

    全部样式分享 更换模型的话只需要更换jsonpath中的模型名称即可 https://unpkg.com/live2d-widget-model-模型名称/assets/模型名称.model.json ...

  7. 博客园添加单曲背景音乐

    博客园的自定义 css .js背景的功能确实不错.还可以添加背景音乐啥的. 首先在博客园的后台设置那里申请到 js 的权限才能插入播放器的代码,申请理由充分一点才能被审核通过,审核时间一两天. 开通以 ...

  8. 博客园添加访问人数统计超详细教程

    先看添加后的效果吧: 是不是还可以,下面就是教程了,简单易学,支持多种风格. 1. 登录http://www.amazingcounters.com/sign-up.php   这个地址去申请一个帐户 ...

  9. 博客园添加一个分享的

    给自己的博客添加一个分享的按钮吧!! 可以遇见更多志同道合的人呀!!! 使用百度的一键生成按钮就可以了:http://share.baidu.com/code 或者自己写一个也是一样的 <!-- ...

  10. 如何为你的博客园添加到百度统计

    1.打开百度统计的地址 https://tongji.baidu.com/web/welcome/login?castk=LTE%3D 2.注册,打开网址后,右面有注册按钮,点击注册 选择站长版,点击 ...

最新文章

  1. Django中提供的6种缓存方式
  2. 网络推广营销之网站优化选择优质友情链接的标准
  3. 编程语言python特点-Python程序特点
  4. C++日志系统log4cxx使用总结
  5. 前端学习(579):chrome devtools功能简介
  6. 希尔和归并排序的异同
  7. 项目里面遇到的问题和解决方案的记录
  8. Android AIDL实例解析
  9. DNS劫持和HTTP劫持有何区别
  10. 【实例】原生 js 实现全屏滚动效果
  11. MAC修改.bashrc/.bash_profile无效,默认的用户配置文件是.zshrc,
  12. ubuntu16.04 更新pip
  13. 在html中怎样加表格斜线表头,如何在Word表格中插入斜线
  14. linux执行jar的两种方式
  15. [工作记事] Ubuntu 编译安装PHP以及gd库使得支持jepg
  16. 微信内域名被多人投诉导致无法访问怎么办?
  17. 机器学习笔记之变分推断(四)随机梯度变分推断(SGVI)
  18. 常用的防火墙命令总结
  19. sgu-207 Robbers
  20. vue引用js文件的多种方式(推荐)

热门文章

  1. python模块介绍二。
  2. win7 任务计划 任务映像已损坏或篡改(异常来自HRESULT:0x80041321)
  3. ios7 获取UITablleViewCell
  4. XML+Application来编写计数器(二)
  5. updataxml报错注入
  6. Linux 访问控制列表(access control list)
  7. Jquery自定义$的名称(自定义变量)
  8. HTML超连接(a标记)
  9. SecureCRT连接Ubuntu,centos失败解决
  10. can't find which disk is full