WordPress 添加音乐盒
米扑博客，早在2013年就添加过音乐盒，当时用的豆瓣音乐，后来豆瓣音乐下架了，米扑博客的音乐盒也跟着下架了...
2017.10.24 程序员节，米扑博客重新整理上架了新的音乐盒，聚合了QQ、百度、网易、虾米四大音乐盒，再也不用担心音乐盒下架了 
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表情工具栏定制
版权所有: 本文系米扑博客原创、转载、摘录，或修订后发表，最后更新于 2018-04-17 01:39:40
侵权处理: 本个人博客，不盈利，若侵犯了您的作品权，请联系博主删除，莫恶意，索钱财，感谢！
转载注明: WordPress 添加音乐盒 （米扑博客）
一直用的大发那个插件，蛮好的
音乐平台的音乐都不考虑，因为那些平台都没我博客活的长。现在嵌入这些，等过几年又要换，麻烦死，我要嵌入都是自带下载的音乐。