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

简介: 博客园背景音乐调用,让音乐为你的博文加点料       单调的文字怎么行,让音乐为你的博文加点料。什么?你写的是技术型博客不搞这么多文艺,大叔,技术型博客也可以很文艺的诶。   今天下三分,网易云、虾米、所有的XX音乐各占据了国内的音乐市场,不过要论曲库哪家全,网易云虾米撕破脸。

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

 
 

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

  今天下三分,网易云、虾米、所有的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/ 
本文版权归作者和博客园共有,欢迎转载,但未经作者允许必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

目录
相关文章
|
JavaScript 流计算 容器
码上掘金 | 简单实现一个打字机动画
码上掘金 | 简单实现一个打字机动画
1983 1
码上掘金 | 简单实现一个打字机动画
|
2月前
动漫风博客介绍页面源码
动漫风博客介绍页面源码
50 8
动漫风博客介绍页面源码
|
8月前
四、巧用Camtasia来剪视频 | 微课系列教程
因为平时我们要用到的视频操作很多,视频拼接、细节修正、从长视频中取一部分等等。那么本课以微课录制后的视频裁剪为例,教大家一些简单的视频剪切和音频杂音处理,最后导出视频。
69 0
|
人工智能 Java 程序员
我见众生皆无意,唯有见你动了情(表白日记分享篇)
​                                        💕 我见众生皆无意,唯有见你动了情 💕                                                            ​ 目录                                                                                 💕 我见众生皆无意,唯有见你动了情 💕 0  写在前面 1.利用ASCII码使数字转化为中文 (GB_2312 字符集) (1)两个特定的ASCI
101 0
我见众生皆无意,唯有见你动了情(表白日记分享篇)
如何快速“肝”出高质量幻灯片?
最近在做毕业答辩的幻灯片,由于是需要中文的模板,但 overleaf [1]给出的中文模板不是很多(主要还是外国的网站)。正好上次一位读者想我推荐了一个中国版本的“overleaf”,点击进入后发现,哎,找到了挺多中文模板啊!果真是中国企业办的。
122 0
如何快速“肝”出高质量幻灯片?
“闪瞎双眼~”,今天来实现如何实现太阳的光晕效果(Unity3D)
太阳光晕的效果虽然用处不大,但是很漂亮,漂亮不就行了,那么就来看看怎么在Unity3D中实现太阳光晕效果吧。
|
Web App开发 JavaScript 前端开发
详谈如何定制自己的博客园皮肤【转】
转自:http://www.cnblogs.com/jingmoxukong/p/7826982.html 目录   前言  Quickstart  定制博客园 CSS 的原理    页面定制CSS代码    博客侧边栏公告    页首Html代码    页脚Html代码  定制细节 ...
2191 0
|
Web App开发 JavaScript 前端开发
详谈如何定制自己的博客园皮肤
前言 最近,有很多博客园的朋友给我留言或私信,询问我的博客背景是如何做的。 不是我敝帚自珍,而是由于内容较多,一一回复实在是太费劲。没有及时答复的朋友,请见谅。 我在这里做一次集中式分享,如果有喜欢的内容,尽管拿去。
1433 0