Skip to content

Commit 32e37ed

Browse files
jrottyjrotty
authored
支持异步加载的背景音乐播放器
1 parent 4912a46 commit 32e37ed

11 files changed

+723
-0
lines changed

‎YoduPlayer/Plugin.php

+132
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<?php
2+
/**
3+
* 一款清爽的BGM播放器,需要您的主题支持pjax或者instantclick才能保证页面切换依旧播放
4+
*
5+
* @package YoduPlayer
6+
* @author Jrotty
7+
* @version 1.2.0
8+
* @link http://qqdie.com/archives/typecho-yoduplayer.html
9+
*/
10+
class YoduPlayer_Plugin implements Typecho_Plugin_Interface
11+
{
12+
public static function activate()
13+
{
14+
Typecho_Plugin::factory('Widget_Archive')->header = array('YoduPlayer_Plugin', 'header');
15+
Typecho_Plugin::factory('Widget_Archive')->footer = array('YoduPlayer_Plugin', 'footer');
16+
}
17+
/* 禁用插件方法 */
18+
public static function deactivate(){}
19+
public static function config(Typecho_Widget_Helper_Form $form){
20+
21+
$yoduc = new Typecho_Widget_Helper_Form_Element_Radio(
22+
'yoduc', array('0'=> '默认', '1'=> 'YoDu主题'), 0, '主题选择',
23+
'使用默认即可，如果你是用的YoDu主题模板，选择第二个不会额外加载字体文件，并且会根据yodu主题皮肤自动变色');
24+
$form->addInput($yoduc);
25+
26+
27+
28+
$bof = new Typecho_Widget_Helper_Form_Element_Radio(
29+
'bof', array('0'=> '不自动播放', '1'=> '自动播放'), 0, '播放设置',
30+
'自动播放顾名思义，就是页面打开后音乐就会自动播放');
31+
$form->addInput($bof);
32+
33+
$sxj = new Typecho_Widget_Helper_Form_Element_Radio(
34+
'sxj', array('0'=> '隐藏', '1'=> '不隐藏'), 0, '手机端是/否隐藏',
35+
'');
36+
$form->addInput($sxj);
37+
$musicList = new Typecho_Widget_Helper_Form_Element_Textarea('musicList', NULL,
38+
'{title:"Alice",artist:"米白",mp3:"//p2.music.126.net/7_DtDbZXhlm-FWGzplUocg==/18802748347310691.mp3",cover:"//p3.music.126.net/R86tDfWlpXzhJFO1KJgfbQ==/17924238556217288.jpg?param=106x106",},
39+
{title:"Old Memory",artist:"三輪学",mp3:"//p2.music.126.net/_b_IF6-KM0UHDJwP9u0Bdw==/1394180758436430.mp3",cover:"//p3.music.126.net/OpgpNNPKznDDMxoBqVJy-Q==/2464005557906815.jpg?param=106x106",},
40+
',_t('歌曲列表'), _t('格式: {title:"xxx", artist:"xxx", mp3:"http:xxxx",cover:"图片地址",} ，每个歌曲之间用英文,隔开。请保证歌曲列表里至少有一首歌！<br><br><div style="background-color:#56A5CE;padding:5px 8px;max-width:250px;border-radius: 2px;"><a href="'.Helper::options()->pluginUrl.'/YoduPlayer/wyapi.php" target="_blank" style="font-size:14px;color:#fff;outline:none;text-decoration:none;">网易云音乐id解析(主机需支持curl扩展)</a>
41+
</div>请自行去网易云音乐网页版获取音乐id(具体在每个音乐项目的网址最后会有个id)。<b>将解析出的音乐链接复制到上面歌曲列表里(注意检查与现有歌曲是否用英文,隔开)</b>'));
42+
$form->addInput($musicList);
43+
44+
$sok = new Typecho_Widget_Helper_Form_Element_Textarea('sok', NULL,
45+
'',_t('自定义css'), _t('直接在这里输入css即可对播放器样式进行修改'));
46+
$form->addInput($sok);
47+
}
48+
49+
public static function personalConfig(Typecho_Widget_Helper_Form $form){}
50+
public static function header(){
51+
if(Typecho_Widget::widget('Widget_Options')->Plugin('YoduPlayer')->yoduc=='1'){
52+
$cssUrl = Helper::options()->pluginUrl . '/YoduPlayer/yodu/player.css';
53+
}else{
54+
$cssUrl = Helper::options()->pluginUrl . '/YoduPlayer/css/player.css';
55+
}
56+
echo '<link rel="stylesheet" href="' . $cssUrl . '">';
57+
if(Typecho_Widget::widget('Widget_Options')->Plugin('YoduPlayer')->sxj=='0'){
58+
echo '<style>@media only screen and (max-width:767px){#bgmplayer{display:none}}</style>'. "\n";
59+
}
60+
if(Typecho_Widget::widget('Widget_Options')->Plugin('YoduPlayer')->yoduc=='1'){
61+
62+
if(Typecho_Widget::widget('Widget_Options')->skin && 'red'==Typecho_Widget::widget('Widget_Options')->skin){
63+
echo '<style>#bgmplayer {background: #F1587E;}</style>';
64+
}
65+
if(Typecho_Widget::widget('Widget_Options')->skin && 'purple'==Typecho_Widget::widget('Widget_Options')->skin){
66+
echo '<style>#bgmplayer {background: #800080;}#jindu {background-color: #FF6363;}</style>';
67+
}
68+
if(Typecho_Widget::widget('Widget_Options')->skin && 'black'==Typecho_Widget::widget('Widget_Options')->skin){
69+
echo '<style>#bgmplayer {background: #000000;}#jindu {background-color: #CCC;}</style>';
70+
}
71+
if(Typecho_Widget::widget('Widget_Options')->skin && 'hei'==Typecho_Widget::widget('Widget_Options')->skin){
72+
echo '<style>#bgmplayer {background: rgba(0, 0, 0, 0.5);}#jindu {background-color: rgba(251, 251, 251, 0.68);}</style>';
73+
}
74+
if(Typecho_Widget::widget('Widget_Options')->skin && 'bai'==Typecho_Widget::widget('Widget_Options')->skin){
75+
echo '<style>#bgmplayer {background: rgba(255,255,255,0.8);color: black;box-shadow: 0 0 5px #ccc;}#jindu {background-color: rgba(0, 0, 0, 0.32);}</style>';
76+
}
77+
if(Typecho_Widget::widget('Widget_Options')->skin && 'block'==Typecho_Widget::widget('Widget_Options')->skin){
78+
echo '<style>#bgmplayer {box-shadow: 0 0 5px #5D5D5D;border-radius: 0 0 0 5px;}#jindu {border-radius: 0 0 0 5px;}</style>';
79+
}
80+
if(Typecho_Widget::widget('Widget_Options')->skin && 'old'==Typecho_Widget::widget('Widget_Options')->skin){
81+
echo '<style>#bgmplayer {background: #888;}</style>';
82+
}
83+
84+
}
85+
86+
echo '<style>'.Typecho_Widget::widget('Widget_Options')->plugin('YoduPlayer')->sok.'</style>';
87+
}
88+
89+
public static function footer(){
90+
$options = Typecho_Widget::widget('Widget_Options')->plugin('YoduPlayer');
91+
92+
echo '
93+
<div id="bgmplayer" class="bgmplayer">
94+
<span class="bgmbuttom" onClick="qiehuan();" >
95+
<i id="ydmusic" class="iconfont icon-music"></i>
96+
</span>
97+
<div id="bgmpanel">
98+
<div class="bgmfm"><img id="ydfm" src=""></div>
99+
<div class="bgmtitle"><span id="ydtitle">音乐加载中...
100+
</span></div>
101+
<div class="bgmtime"><span id="ytime">0:00</span></div>
102+
<div class="bgmbtn">
103+
<span onClick="previous();"><i class="iconfont icon-zuo"></i></span>
104+
<span onclick="playbtu();"><i id="ydmc"></i></span>
105+
<span onclick="next();"><i class="iconfont icon-you"></i></span>
106+
</div>
107+
</div><div id="jindu"></div></div>
108+
';
109+
110+
echo '<script data-no-instant>
111+
var yaudio = new Audio();
112+
yaudio.controls = true;
113+
yaudio.loop = false;
114+
var musicArr=[
115+
'.$options->musicList.'
116+
];
117+
var a=0;
118+
var sj=musicArr[a];
119+
yaudio.src=sj.mp3;
120+
yaudio.ti=sj.title;
121+
yaudio.art=sj.artist;
122+
yaudio.fm=sj.cover;';
123+
if(Typecho_Widget::widget('Widget_Options')->Plugin('YoduPlayer')->bof=='1'){
124+
echo 'yaudio.play();'. "\n";
125+
}
126+
echo '</script>';
127+
128+
echo '<script src="'.Helper::options()->pluginUrl . '/YoduPlayer/js/player.js" data-no-instant></script>' . "\n";
129+
echo '<script src="'.Helper::options()->pluginUrl . '/YoduPlayer/js/prpr.js"></script>' . "\n";
130+
}
131+
132+
}

‎YoduPlayer/README.md

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# YoduPlayer
2+
3+
一款支持 instantclick 或者 pjax 的背景音乐播放器插件（typecho博客插件）
4+
5+
6+
> 2017,06.12诈尸更新，支持显示音乐播放进度条
7+
8+
> 1，支持自定义播放器css
9+
10+
> 2，支持显示歌曲名称，歌手，封面等
11+
12+
> 3，针对typecho的Yodu主题模板特殊优化，根据期多皮肤自动变色适应皮肤等
13+
14+
> 4，无 JQ，要求浏览器 ie9+。（大概）【发现欧朋浏览器不兼容】
15+
16+
**使用方法**
17+
18+
下载压缩包, 解压，得到名为YoduPlayer的文件夹，如果不是请将文件夹重命名为YoduPlayer，之后上传到你博客中的 /usr/plugins 目录，在后台启用即可
19+
20+
插件后台配置歌曲格式:
21+
22+
{title:"xxx", artist:"xxx", cover:"http:xxxx", mp3:"http:xxxx",cover:"图片地址",} ，每个歌曲之间用英文,隔开。
23+
24+
**请保证歌曲列表里至少有一首歌**！
25+

‎YoduPlayer/css/fonts/icomoon.eot

1.64 KB
Binary file not shown.

‎YoduPlayer/css/fonts/icomoon.svg

+14
Loading

‎YoduPlayer/css/fonts/icomoon.ttf

1.48 KB
Binary file not shown.

‎YoduPlayer/css/fonts/icomoon.woff

1.55 KB
Binary file not shown.

‎YoduPlayer/css/player.css

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
@font-face {
2+
font-family: 'icomoon';
3+
src: url('fonts/icomoon.eot?ov9ajc');
4+
src: url('fonts/icomoon.eot?ov9ajc#iefix') format('embedded-opentype'),
5+
url('fonts/icomoon.ttf?ov9ajc') format('truetype'),
6+
url('fonts/icomoon.woff?ov9ajc') format('woff'),
7+
url('fonts/icomoon.svg?ov9ajc#icomoon') format('svg');
8+
font-weight: normal;
9+
font-style: normal;
10+
}
11+
12+
[class^="icon-"], [class*=" icon-"] {
13+
/* use !important to prevent issues with browser extensions that change fonts */
14+
font-family: 'icomoon' !important;
15+
speak: none;
16+
font-style: normal;
17+
font-weight: normal;
18+
font-variant: normal;
19+
text-transform: none;
20+
line-height: 1;
21+
22+
/* Better Font Rendering =========== */
23+
-webkit-font-smoothing: antialiased;
24+
-moz-osx-font-smoothing: grayscale;
25+
}
26+
27+
.icon-music:before {
28+
content: "\f001";
29+
}
30+
.icon-zuo:before {
31+
content: "\f104";
32+
}
33+
.icon-you:before {
34+
content: "\f105";
35+
}
36+
.icon-bofang:before {
37+
content: "\f1d8";
38+
}
39+
#bgmplayer {
40+
position: fixed;
41+
top: 0;
42+
z-index: 999;
43+
right: 0;
44+
background: #00BDFF;
45+
color: white;
46+
transition: transform .5s ease;
47+
}
48+
.bgmplayer{
49+
transform: translateX(218px);
50+
}
51+
.bgmon{
52+
transform: translateX(0px);
53+
}
54+
span.bgmbuttom{
55+
font-size: 12px;
56+
float: left;
57+
padding: 25.5px 5px 25.5px 5px;
58+
}
59+
#bgmpanel {
60+
width: 240px;
61+
height: 54px;
62+
padding: 5px 0;
63+
}
64+
#jindu {width:0%;
65+
height: 3px;
66+
background-color: #000;
67+
}
68+
.bgmfm {
69+
float: left; margin: 0 10px 0 5px;
70+
}
71+
.bgmfm img {
72+
width: 55px;
73+
height: 55px;
74+
border-radius: 50%; border: 2px solid #ccc;
75+
}
76+
77+
.bgmtitle {
78+
font-size: 15px;
79+
padding: 5px 0;white-space: nowrap; overflow: hidden; margin-right: 5px;
80+
}
81+
.bgmtime {
82+
float: left;
83+
}
84+
.bgmtime span {
85+
font-size: 15px;
86+
margin: 0 5px 0 0;
87+
}
88+
.bgmbtn {
89+
float: right;
90+
}
91+
.bgmbtn span {
92+
font-size: 15px;
93+
margin: 0 5px 0 0;
94+
padding: 5px 8px;
95+
}
96+
.bgmbtn span:hover{
97+
background-color: rgba(228, 228, 228, 0.54);
98+
}
99+
@-webkit-keyframes rotation{
100+
from {-webkit-transform: rotate(0deg);}
101+
to {-webkit-transform: rotate(360deg);}
102+
}
103+
.bgmfm .Rotation{ border: 2px solid #FFF;
104+
box-shadow: 0 0 5px #ccc;
105+
-webkit-transform: rotate(360deg);
106+
animation: rotation 9.8s linear infinite;
107+
-moz-animation: rotation 9.8s linear infinite;
108+
-webkit-animation: rotation 9.8s linear infinite;
109+
-o-animation: rotation 9.8s linear infinite;
110+
}

‎YoduPlayer/js/player.js

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
function qiehuan(){
2+
var el = document.getElementById('bgmplayer');
3+
var className = 'bgmon';
4+
if (el.classList) {
5+
el.classList.toggle(className);
6+
} else {
7+
var classes = el.className.split(' ');
8+
var existingIndex = classes.indexOf(className);
9+
10+
if (existingIndex >= 0)
11+
classes.splice(existingIndex, 1);
12+
else
13+
classes.push(className);
14+
15+
el.className = classes.join(' ');
16+
}
17+
}
18+
function playbtu(){
19+
var oyd = document.getElementById('ydmc');
20+
if (yaudio.paused) {
21+
yaudio.play();
22+
oyd.className = 'iconfont icon-music';
23+
document.getElementById("ydfm").className = "Rotation";
24+
} else {
25+
yaudio.pause();
26+
oyd.className = 'iconfont icon-bofang';document.getElementById("ydfm").className = "";
27+
}
28+
}
29+
function next() {
30+
var oyd=document.getElementById('ydmc');
31+
if (a == musicArr.length - 1) {
32+
a = 0;
33+
} else {
34+
a = a+1;
35+
}
36+
sj = musicArr[a];
37+
yaudio.src = sj.mp3;
38+
yaudio.ti = sj.title;
39+
yaudio.art = sj.artist;
40+
yaudio.fm=sj.cover;
41+
yaudio.play();var autopause=0;
42+
oyd.className = 'iconfont icon-music';
43+
document.getElementById("ydfm").className = "Rotation";
44+
document.getElementById('ydtitle').innerHTML = yaudio.ti+'&nbsp;-&nbsp;'+yaudio.art;
45+
document.getElementById("ydfm").src=yaudio.fm;
46+
}
47+
function previous(){
48+
var oyd=document.getElementById('ydmc');
49+
if (a == 0) {
50+
a =musicArr.length - 1;
51+
}else{
52+
a = a-1;
53+
}
54+
sj = musicArr[a];
55+
yaudio.src = sj.mp3;
56+
yaudio.ti = sj.title;
57+
yaudio.art = sj.artist;
58+
yaudio.fm=sj.cover;
59+
yaudio.play();var autopause=0;
60+
oyd.className = 'iconfont icon-music';
61+
document.getElementById("ydfm").className = "Rotation";
62+
document.getElementById('ydtitle').innerHTML = yaudio.ti+'&nbsp;-&nbsp;'+yaudio.art;
63+
document.getElementById("ydfm").src=yaudio.fm;
64+
}
65+
66+
yaudio.addEventListener('ended',
67+
function() {
68+
next();
69+
},
70+
false);

‎YoduPlayer/js/prpr.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
var ody=document.getElementById('ydmc');
2+
if (yaudio.paused) {var autopause=0;
3+
ody.className = 'iconfont icon-bofang';
4+
document.getElementById("ydfm").className = "";
5+
} else {var autopause=1;
6+
ody.className = 'iconfont icon-music';
7+
document.getElementById("ydfm").className = "Rotation";
8+
}
9+
10+
document.getElementById('ydtitle').innerHTML = yaudio.ti+'&nbsp;-&nbsp;'+yaudio.art;
11+
document.getElementById("ydfm").src=yaudio.fm;
12+
var setProgress = function(value){
13+
var currentSec = parseInt(value%60) < 10 ? '0' + parseInt(value%60) : parseInt(value%60),
14+
ratio = value / yaudio.duration * 100;
15+
16+
document.getElementById('jindu').style.width=ratio+'%';
17+
document.getElementById('ytime').innerHTML = (parseInt(value/60)+':'+currentSec);
18+
}
19+
20+
var updateProgress = function(){
21+
setProgress(yaudio.currentTime);
22+
}
23+
24+
timeout = setInterval(updateProgress, 500);

0 commit comments

Comments
 (0)