米扑博客，早在2013年就添加过音乐盒，当时用的豆瓣音乐，后来豆瓣音乐下架了，米扑博客的音乐盒也跟着下架了...
2017.10.24 程序员节，米扑博客重新整理上架了新的音乐盒，聚合了QQ、百度、网易、虾米四大音乐盒，再也不用担心音乐盒下架了 
原文请见米扑博客：WordPress 添加音乐盒
米扑音乐盒之赏析：https://blog.mimvp.com/music
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. 将短代码填入您的新建文章内容中。
|
1
|
<!--wp-player start-->
<
div
class
=
"wp-player"
data-wp-player
=
"wp-player"
data-source
=
"netease"
data-autoplay
=
"0"
data-random
=
"0"
data-type
=
"song"
data-id
=
"http://music.163.com/#/song?id=191213"
data-title
=
""
data-author
=
""
data-address
=
""
data-thumb
=
"https://blog.mimvp.com/wp-content/plugins/wp-player/images/default.png|"
data-lyric
=
"open"
><
div
class
=
"wp-player-box"
><
div
class
=
"wp-player-thumb"
><
img
src
=
"https://blog.mimvp.com/wp-content/plugins/wp-player/assets/images/default.png"
width
=
"90"
height
=
"90"
alt
=
""
><
div
class
=
"wp-player-playing"
><
span
></
span
></
div
></
div
><
div
class
=
"wp-player-panel"
><
div
class
=
"wp-player-title"
>Loading...</
div
><
div
class
=
"wp-player-author"
>Loading...</
div
><
div
class
=
"wp-player-progress"
><
div
class
=
"wp-player-seek-bar"
><
div
class
=
"wp-player-play-bar"
><
span
class
=
"wp-player-play-current"
></
span
></
div
></
div
></
div
><
div
class
=
"wp-player-controls-holder"
><
div
class
=
"wp-player-time"
>00:00</
div
><
div
class
=
"wp-player-controls"
><
a
href
=
"javascript:;"
class
=
"wp-player-previous"
title
=
"上一首"
></
a
><
a
href
=
"javascript:;"
class
=
"wp-player-play"
title
=
"播放"
></
a
><
a
href
=
"javascript:;"
class
=
"wp-player-stop"
title
=
"暂停"
></
a
><
a
href
=
"javascript:;"
class
=
"wp-player-next"
title
=
"下一首"
></
a
></
div
><
div
id
=
"wp-player-lyrics-btn"
class
=
"wp-player-lyrics-btn"
title
=
"歌词"
style
=
"display:block;"
></
div
><
div
class
=
"wp-player-list-btn"
title
=
"歌单"
></
div
></
div
></
div
></
div
><
div
class
=
"wp-player-main"
><
div
class
=
"wp-player-list"
><
ul
></
ul
></
div
><
div
class
=
"wp-player-lyrics"
><
ul
></
ul
></
div
></
div
></
div
>
<!--wp-player end-->
|
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样式后的效果
添加上一个随机显示正能量的名人名言
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<
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
>
|
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
米扑音乐盒之赏析：https://blog.mimvp.com/music