米扑博客，早在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. 将短代码填入您的新建文章内容中。 

[player autoplay="0" randplay="1"]

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表情工具栏定制