米扑博客,早在2013年就添加过音乐盒,当时用的豆瓣音乐,后来豆瓣音乐下架了,米扑博客的音乐盒也跟着下架了...

2017.10.24 程序员节,米扑博客重新整理上架了新的音乐盒,聚合了QQ、百度、网易、虾米四大音乐盒,再也不用担心音乐盒下架了 sad

 

0. 回顾下架的豆瓣音乐

<iframe frameborder="0" height="186" name="iframe_canvas" scrolling="no" src="http://douban.fm/partner/baidu/doubanradio" width="420"></iframe>

2013年,很多WordPress博客内嵌了豆瓣音乐盒,做得真的很棒、很精致

后来,可能因为音乐版权,或不是不盈利的项目,被豆瓣下架了

 

1. 米扑重新上架音乐盒

2017.10.24 程序员节,米扑博客在网上重新搜集了许多适合WordPress的音乐盒,最后选定了 WP-Player

WP-Player 官网:https://wordpress.org/plugins/wp-player/

WP-Player 插件:wp-player-2.1.6.zip

WP-Player 官网示例:http://webjyh.com/wp-player/

WP-Player 米扑音乐盒:https://blog.mimvp.com/music/ (推荐

 

米扑音乐盒效果图:

 

2. WP-Player 插件安装

方式1)

WordPress 后台 —> 安装插件 —> 搜索 "WP-Player"

方式2)

下载上面米扑博客提供的插件 wp-player-2.1.6.zip 手动上传安装

 

3. WP-Player 参数配置

WordPress 插件的后台配置项很简单,几乎没有什么配置项

 

WordPress 插件 WP-Player 是一个迷你歌曲播放器,支持多歌曲播放,

支持使用网易云音乐、虾米音乐、QQ音乐、百度音乐歌曲地址,也支持自定义上传音乐。

插件介绍:

1. WP-Player 支持网易云音乐, 虾米音乐, QQ音乐, 百度音乐平台

2. 如在网易云音乐打开喜欢的歌曲页面,复制歌曲页面的网址如:http://music.163.com/#/song?id=191213

3. 并将复制的歌曲网址填写到后面你新建文章下方的表单内,音乐类型将根据网址自动做出选择。

4. 点击获取音乐ID按钮,此时音乐ID出现在表单中。

 

 

5. 将短代码填入您的新建文章内容中。

      6. 短代码中 autoplay 表示是否自动播放;参数”0″表示否;”1″表示是;

      7. 短代码中 random 表示是否随机播放;参数”0″表示否;”1″表示是;

      8. 支持播放歌单:单音乐页面、专辑页面、艺人页面、精选集页面。

      9. 本插件需要您的服务器或主机支持 PHP 5.4+ and Curl, OpenSSL 模块已安装。

      10. 本插件仅供个人学习研究使用,请勿作为各种商业用户,音乐版权归各音乐平台所有

      注意:

      1)一篇文章只能插入一个播放器,因为用了MetaBox获取参数,只能一篇文章使用一个。

      2)如果要插入多个歌曲,请选择歌曲的专辑,例如:http://music.163.com/#/artist?id=13286

      3)如果要插入多个歌曲,可以自己上传多个歌曲,注意要是  http://xxx/xxx.mp3 格式,如下图:

       

      4. WP-Player 效果展示

      WP-Player 可以自定义修改一些CSS样式,米扑博客的音乐盒是简单修改了原生css样式后的效果

       

      添加上一个随机显示正能量的名人名言

      <div id="showtxt" style="font-size: 16px; height: 30px; color: #ff0000;">
      	曾经,有个女孩纸摆在我面前,木有好好珍惜
      </div>
      <div align="center" class="STYLE8" style="font-size: 16px; color: #ff0000;">
      <script language="JavaScript">		
      	quotes = new Array();
      	quotes[0] = '米扑,小而美,简而信';
      	quotes[1] = '看看我的眼睛,你会发现你对我而言意味着什么…'
      	quotes[2] = '收拾起心情,继续走吧,错过花,你将收获雨,错过他,你才会遇到他…';
      	quotes[3] = '有些事不是我不在意,而是我在意了又能怎样。。。';
      	quotes[4] = '曾经,有个女孩纸摆在我面前,木有好好珍惜…';
      	//var count = 91;
      	var count = Math.floor(quotes.length * Math.random());
      	function changeme(){
      		//var rand1 = Math.floor(quotes.length * Math.random());
      		//var quote = quotes[rand1];
      		count++;
      		if(count == quotes.length) count = 0;
      		var quote = quotes[count];
      		//alert("quote = " + quote); 
      		//document.write( quote );
      		document.getElementById('showtxt').innerHTML = quote;
      		window.setTimeout(changeme, 1000*10); 
      	}
      	window.onload=function(){ 
      		window.setTimeout(changeme(), 1000*10); 
      	} 
      </script>
      </div>

       

      米扑博客升级优化后的完整版代码

      <p id="mimvp-music-showtxt" style="height: 30px; color: rgb(255, 0, 0); text-align: center;">
      	米扑,小而美,简而信
      </p>
      <p class="STYLE8" style="font-size: 14px; color: rgb(255, 0, 0); text-align: center;">
      <script language="JavaScript">
            quotes = new Array();
            quotes[0] = '米扑,小而美,简而信';
            quotes[1] = '曾经,有个女孩纸摆在我面前,木有好好珍惜…';
            quotes[2] = '看看我的眼睛,你会发现:你对我而言意味着什么'
            quotes[3] = '收拾起心情,继续走吧。错过花,你将收获雨。错过他,你才会遇到他';
            quotes[4] = '有些事不是我不在意,而是我在意了又能怎样。。。';
            quotes[5] = '只要我一想起你,亲爱的人,所有的失落和遗憾烟消云散…'
            quotes[6] = '曾经我拥有过,可不经意间,我又错过了…'
            quotes[7] = '忘记某个人最好的方法,就是喜欢上其他人'
            quotes[8] = '青春,是我们仅剩的资本。挥霍,是我们唯一的方式。孤寂,是我们内心的独白。离去,是我们最后的结局。回忆,是我们怀念的光轮…'
            quotes[9] = '心Teng我的心痛,你知道吗?'
            quotes[10] = '当爱画上无休止的省略号,谁该给谁彼此自由,谁又该怪谁没有将彼此挽留…'
            quotes[11] = '你认识我时,我不认识你;你喜欢我时,我认识你;你爱上我时,我喜欢你;你离开我时,我爱上你…'
            quotes[12] = '只要你能记住我,哪怕用恨的方式也好'
            quotes[13] = '当爱不能完美,我宁愿选择无悔,不管来生多么美丽。'
            quotes[14] = '有时候命运是嘲弄人的,让你遇到,但却晚了,让你看到却不能相依,让我们有了情,却只是无奈!'
            quotes[15] = '要有多坚强,才敢念念不忘…'
            quotes[16] = '快乐要有悲伤作陪,雨过有天晴。如果雨后还是雨,如果忧伤之后还是忧伤,请让我们从容面对这离别之后的离别。'
            quotes[17] = '纵然伤心,也不要愁眉不展,因为你不知是谁会爱上你的笑容…'
            quotes[18] = '如果被等待是一种幸福,那么放手就是一种成全,双方的成全…'
            quotes[19] = '我放弃你的时候也放弃了自己,没有你我的心也死了…'
            quotes[20] = '这一辈子,我需要的不多,一碗饭一杯茶而已,但是我希望饭是你做的,茶是你泡的…'
            quotes[21] = '如果没法忘记他,就不要忘记好了。真正的忘记,是不需要努力的…'
            quotes[22] = '世界上最遥远的距离,不是生与死的距离,而是我就站在你面前,你却不知道我爱你…'
            quotes[23] = '骆驼不会哭,因为它知道水的珍贵。我也不会哭,因为我知道爱的虚伪…'
            quotes[24] = '我爱你是我的自己的事,所以你没有必要知道我的存在。每当我躲在一个角落看着你,甜甜的微笑,我已满足…'
            quotes[25] = '女孩是上帝用男孩的肋骨做的,那么,你找到你的那根肋骨了么…'
            quotes[26] = '我不能给你百万豪宅,我不能给你灿烂光环,我所能给你的只有我的一片真心…'
            quotes[27] = '有些事不管经过多久都不会淡化,虽然总是用冷漠去对待,可是她却是我心中永远痛,一旦稍稍触及便痛不欲生…'
            quotes[28] = '已经习惯了的东西,舍不得失去她。可是,她偏偏就会渐渐离你远去,直到忘记了她…'
            quotes[29] = '盐,注定要融化的,也许是用眼泪的方式…'
            quotes[30] = '怕路太远找不到终点,就怕两个世界画不成一个圆…'
            quotes[31] = '深情是担不起的重担,情话只是偶然兑现的谎言…'
            quotes[32] = '能冲刷一切的除了眼泪就是时间。以时间来推移感情,时间越长越淡仿佛不断稀释的茶…'
            quotes[33] = '誓言只是对爱情的枷锁,是永远没有钥匙能够将其打开的…'
            quotes[34] = '为你落第一滴泪,故事到最后总会落幕,我真心的付出却不是你要的幸福…'
            quotes[35] = '你想要更好的生活,就需要比别人付出更多的努力和汗水。'
            quotes[36] = '不怕路太远找不到终点,就怕两个世界画不成一个圆…'
            quotes[37] = '深情是担不起的重担,情话只是偶然兑现的谎言…'
            quotes[38] = '不要因为结束而哭泣,微笑吧,因为你曾经拥有过…'
            quotes[39] = '我放弃你的时候也放弃了自己,没有你我的心也死了…'
            quotes[40] = '如果被等待是一种幸福,那么放手就是一种成全,双方的成全…'
            quotes[41] = '纵然伤心,也不要愁眉不展,因为你不知是谁会爱上你的笑容…'
            quotes[42] = '我以为小鸟飞不过沧海,是小鸟没有飞过沧海的勇气,十年后我才发现,不是小鸟飞不过去,而是沧海的那一头,早已没了等待'
            quotes[43] = '我会放下个性,放下自尊,放下追求,都是因为放不下一个人。'
            quotes[44] = '我看了你一眼,并不深刻。某年某月某日,意外和你相识,无关心动。怎知日子一久,你就三三两两懒懒优优,停在我心上。'
            quotes[45] = '爱情不是最初的甜蜜,而是繁华退却依然不离不弃。'
            quotes[46] = '幸福五大原则:1.心中无恨;2.脑中无忧;3.生活简单;4.多些付出;5.少些期待。'
            quotes[47] = '有些人,他们什么都不怕,就是怕老婆,后来他们成了富人;有些人,他们什么都怕,就是不怕老婆,结果他们离婚收场。'
            quotes[48] = '其实,我很容易笑,也很容易哭。只是笑的时候没心没肺,而哭的时候却是痛到窒息。'
            quotes[49] = '幸福就是重复。每天跟爱的人一起,通电话,去旅行,重复一个承诺和梦想。'
            quotes[50] = '现在的我,很相信顺其自然。别说我不在意,就算在意了又能怎样?我只不过是把一切看得更开了。'
            quotes[51] = '爱到分才显珍贵,很多人都不懂珍惜拥有。只到失去才看到,其实那最熟悉的才是最珍贵的。'
            quotes[52] = '爱你,就是爱现在的你,不折腾你的过去,不强迫你的改变,与你一起面对风雨,让爱的天空云淡风轻,绿意盎然。'
            quotes[53] = '爱情中最伤感的时刻是后期的冷淡,一个曾经爱过你的人。'
            quotes[54] = '爱一个人很难,放弃自己心爱的人更难。'
            quotes[55] = '当男人遇上爱情,他会变得宽容,包容女人的一切的弱点。当女人遇上爱情,她会变得仔细,发现男人的一切的缺点。'
            quotes[56] = '孤单不是与生俱来,而是由你爱上一个人的那一刻开始。'
            quotes[57] = '两个人一起是为了快乐,分手是为了减轻痛苦,你无法再令我快乐,我也唯有离开。'
            quotes[58] = '人生总有一个镜头叫做相遇,人生总有一个情节叫做相爱,人生总有一个故事叫做相守。'
            quotes[59] = '如果你流泪,我愿是你手里的手纸;如果你醒来,我愿是你眼中的眼屎;如果你热死了,我愿是你身上仅剩的布三尺。'
            quotes[60] = '我只在乎你,就像小鸟需要翅膀,鱼儿离不开水,不得春风花不开。珍惜与你走过的每一天,在乎和你共度的每一年。'
            quotes[61] = '我不愿失去今生对你的记忆,我不求天长地久的美景,我只要生生世世的轮回里有你…'
            quotes[62] = '只有登上山顶,才能看到那边的风光。'
            quotes[63] = '驾驭命运的舵是奋斗。不抱有一丝幻想,不放弃一点机会,不停止一日努力。'
            quotes[64] = '如果惧怕前面跌宕的山岩,生命就永远只能是死水一潭。'
            quotes[65] = '懦弱的人只会裹足不前,莽撞的人只能引为烧身,只有真正勇敢的人才能所向披靡。'
            quotes[66] = '没有激流就称不上勇进,没有山峰则谈不上攀登。'
            quotes[67] = '山路曲折盘旋,但毕竟朝着顶峰延伸。'
            quotes[68] = '只有创造,才是真正的享受,只有拚搏,才是充实的生活。'
            quotes[69] = '敢于向黑暗宣战的人,心里必须充满光明。'
            quotes[70] = '自然界没有风风雨雨,大地就不会春华秋实。'
            quotes[71] = '只会幻想而不行动的人,永远也体会不到收获果实时的喜悦。'
            quotes[72] = '奋斗者在汗水汇集的江河里,将事业之舟驶到了理想的彼岸。'
            quotes[73] = '勇士搏出惊涛骇流而不沉沦,懦夫在风平浪静也会溺水。'
            quotes[74] = '志在峰巅的攀登者,不会陶醉在沿途的某个脚印之中。'
            quotes[75] = '人生最重要的一点是,永远不要迷失自己。'
            quotes[76] = '左右一个人成功的,不是能力,而是选择。'
            quotes[77] = '普通人成功并非靠天赋,而是靠把寻常的天资发挥到不寻常的高度。'
            quotes[78] = '不要等待机会,而要创造机会。'
            quotes[79] = '成功不是将来才有的,而是从决定去做的那一刻起,持续累积而成。'
            quotes[80] = '懂得低头,才能出头。'
            quotes[81] = '要学会新东西,要不断进步,就必须放低自己的姿势。'
            quotes[82] = '低头是一种能力,它不是自卑,也不是怯弱,它是清醒中的嬗变。'
            quotes[83] = '有时稍微低下头,或许我们人生路会更加精彩,我们的能力也会有所长进。'
            quotes[84] = '任何的限制,都是从自己的内心开始的。'
            quotes[85] = '在人生的道路上,即使一切都失去了,只要一息尚存,你就没有丝毫理由绝望。'
            quotes[86] = '再伟大的巨人也有他渺小的瞬间,再渺小的凡人也有他伟大的时刻。'
            quotes[87] = '不怕苦,吃苦三五年;怕吃苦,吃苦一辈子。'
            quotes[88] = '努力不一定成功,但放弃一定失败;只有学会如何停下来的人,才懂加速。'
            quotes[89] = '我们不要哀叹生活的不幸,诅咒命运的不公。在命运面前,我们要做强者,掐住命运的咽喉,叩问命运,改变命运。'
            quotes[90] = '幸福,从没捷径,也没有完美无瑕,只有经营,只靠真心。'
            quotes[91] = '只要生命还在,请你相信每天的太阳都是新的。'
            quotes[92] = '山有山的高度,水有水的深度,没必要攀比,每个人都有自己的长处。'
            quotes[93] = '如果你要离开我,请选在一个雨天,这样,你就不会看到我奔腾而下的眼泪…'
            quotes[94] = '创业是一首歌,唱响孤单,点亮梦想'
            quotes[95] = '心有多大,舞台就有多大'
            quotes[96] = 'If not now,when? If not me, who?'
            quotes[97] = '蹲下来是为了跳得更高'
            quotes[98] = '马上做,做精彩'
            quotes[99] = '心要大,脚要实'
            quotes[100]= '没有坑,就先让自己成为萝卜'
            quotes[101]= '不怕输,才会赢'
            quotes[102]= '今天很残酷,明天更残酷,后天很美好。但是绝大部分人是死在明天晚上,只有那些真正的英雄,才能见到后天的太阳。'
            quotes[103]= 'never never give up'
            quotes[104]= '不难,要你干嘛?'
            quotes[105]= '你感觉不舒服的时候,就是成长的时候'
            quotes[106]= '不忘初心,保持好奇,坚持不懈,做好自己'
      	function array_contains(arr, obj) {  
      	    var i = arr.length;  
      	    while (i--) {  
      	        if (arr[i] === obj) {  
      	            return true;  
      	        }  
      	    }  
      	    return false;  
      	} 
      	var count = Math.floor(quotes.length * Math.random());
      	var randIdx = 0;
      	var showed_idx = 0;
      	var showed_array = new Array();
      	function changeme(){
          if(showed_array.length == quotes.length) {
               showed_array.splice(0, showed_array.length);
               showed_idx = 0;
          }
          // first time, show NUMBER ZERO of mimvp
          if(0 != randIdx) {
              randIdx = Math.floor(quotes.length * Math.random());
          }
          var quote = quotes[randIdx];
          while(array_contains(showed_array, quote)) {
              randIdx = Math.floor(quotes.length * Math.random());
              quote = quotes[randIdx];
          } 
          showed_array[showed_idx] = quote;
          showed_idx += 1;
          //alert("quote = " + quote); 
          //document.write( quote );
          document.getElementById('mimvp-music-showtxt').innerHTML = quote;
          window.setTimeout(changeme, 1000*10); 
        }
        function changeme2(){
          //var rand1 = Math.floor(quotes.length * Math.random());
          //var quote = quotes[rand1];
          count++;
          if(count == quotes.length) count = 0;
          var quote = quotes[count];
          //alert("quote = " + quote); 
          //document.write( quote );
          document.getElementById('mimvp-music-showtxt').innerHTML = quote;
          window.setTimeout(changeme, 1000*10); 
        }
        window.onload=function(){ 
          window.setTimeout(changeme(), 1000*10); 
        } 
      </script>
      </p>

       

       

      5. 音乐盒的其他调研结果

      米扑博客,最后虽然选择了WP-Player插件,但下面还是介绍下其它的调研成果,供大家参考

      1)内嵌网页音乐

      a)嵌入百度音乐

      <iframe id="mainFrame" src="http://fm.baidu.com" width="100%" height="550px" frameborder="0" scrolling="no" style="width: 100%;"></iframe>

      b)嵌入酷狗音乐

      <iframe id="mainFrame" src="http://www.kugou.com/fmweb/html/index.html" width="100%" height="550px" frameborder="1" scrolling="yes" style="width: 100%;"></iframe>

      效果见:無作爲 - 百度电台

       

      2)网易云音乐插件

      Netease Music 官网:https://wordpress.org/plugins/netease-music/​

      Netease Music 插件:netease-music.zip

       

       

      参考推荐:

      WordPress 视频嵌入iframe自适应手机的初步解决方案

      WordPress CKEditor smiley表情工具栏定制