This commit is contained in:
108
YoduBGM/Plugin.php
Normal file
108
YoduBGM/Plugin.php
Normal file
@@ -0,0 +1,108 @@
|
||||
<?php
|
||||
/**
|
||||
* 一款简洁BGM播放器,需要您的主题支持pjax或者instantclick才能保证页面切换依旧播放
|
||||
*
|
||||
* @package YoduBGM
|
||||
* @author Jrotty
|
||||
* @version 1.7.0
|
||||
* @link http://blog.zezeshe.com
|
||||
*/
|
||||
class YoduBGM_Plugin implements Typecho_Plugin_Interface
|
||||
{
|
||||
public static function activate()
|
||||
{
|
||||
Typecho_Plugin::factory('Widget_Archive')->header = array('YoduBGM_Plugin', 'header');
|
||||
Typecho_Plugin::factory('Widget_Archive')->footer = array('YoduBGM_Plugin', 'footer');
|
||||
}
|
||||
/* 禁用插件方法 */
|
||||
public static function deactivate(){}
|
||||
public static function config(Typecho_Widget_Helper_Form $form){
|
||||
$d=array('默认配置');
|
||||
$n=5;
|
||||
while ($n<=200) {
|
||||
$d[$n] = $n.'px';$n=$n+5;
|
||||
}
|
||||
|
||||
$set1 = new Typecho_Widget_Helper_Form_Element_Select('top', $d, NULL, _t('距离顶部间距'), _t('播放器按钮显示在网页的右上角,这里的设置就是播放器组件距离顶部的间距,默认为65px'));
|
||||
$form->addInput($set1);
|
||||
|
||||
$set2 = new Typecho_Widget_Helper_Form_Element_Radio(
|
||||
'sxj', array('0'=> '隐藏', '1'=> '不隐藏'), 0, '手机端是/否隐藏',
|
||||
'');
|
||||
$form->addInput($set2);
|
||||
$set3 = new Typecho_Widget_Helper_Form_Element_Textarea('musicList', NULL,
|
||||
'',_t('歌曲列表'), _t('
|
||||
<div style="background: #3f51b5;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
margin-top: -0.5em;
|
||||
">填写格式<p><b>直链方式:</b><br>填写歌曲链接地址即可,多首歌曲的话请在两首歌曲之间加换行,千万别多加回车换行。</p>
|
||||
<p><b>调用网易云:</b><br>书写网易云歌曲id即可,多首歌曲的话请在两首歌曲id之间加换行,单首歌曲直接写id就行,千万别多加回车换行</p>
|
||||
</div>
|
||||
'));
|
||||
$form->addInput($set3);
|
||||
|
||||
// 开场音乐
|
||||
$set4 = new Typecho_Widget_Helper_Form_Element_Text('kaichang', NULL, NULL, _t('开场音乐'), _t('最开始播放的音乐,因为歌曲列表默认为随机播放,但是如果我们想在开场加个音效旁白,就可以将音乐放在这里,这里支持直链或网易云id,只能填一个音频'));
|
||||
$form->addInput($set4);
|
||||
}
|
||||
|
||||
public static function personalConfig(Typecho_Widget_Helper_Form $form){}
|
||||
public static function header(){
|
||||
$cssUrl = Helper::options()->pluginUrl . '/YoduBGM/css/player.css?2022';
|
||||
echo '<link rel="stylesheet" href="' . $cssUrl . '">';
|
||||
if(Typecho_Widget::widget('Widget_Options')->Plugin('YoduBGM')->sxj=='0'){
|
||||
echo '<style>@media only screen and (max-width:766px){.ymusic{display:none}}</style>'. "\n";
|
||||
}
|
||||
if(Helper::options()->Plugin('YoduBGM')->top){
|
||||
echo '<style>bgm{top: '.Helper::options()->Plugin('YoduBGM')->top.'px;}</style>'. "\n";
|
||||
}
|
||||
}
|
||||
|
||||
public static function footer(){
|
||||
$options = Typecho_Widget::widget('Widget_Options')->plugin('YoduBGM'); $musicList = $options->musicList;
|
||||
if(empty($musicList)){
|
||||
$musicList = "761323";
|
||||
}
|
||||
|
||||
$array = explode(PHP_EOL,$musicList);$playList='';$p=1;
|
||||
shuffle($array);
|
||||
if($options->kaichang){$p=2;
|
||||
array_unshift($array,$options->kaichang);
|
||||
}
|
||||
foreach ($array as $value) {
|
||||
$value = trim($value);
|
||||
if (substr($value,0,4) === 'http') {
|
||||
$playList .= '{mp3:"'.$value.'"},';
|
||||
}
|
||||
if (is_numeric($value)) {
|
||||
$playList .= '{mp3:"https://music.163.com/song/media/outer/url?id='.$value.'.mp3"},';
|
||||
}
|
||||
//if (preg_match('/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9a-zA-Z]+$/',$value)) {
|
||||
// $playList .= '{mp3:"https://www.xxxxxx.com/tool/music/qq.php?id='.$value.'"},';
|
||||
//}
|
||||
}
|
||||
|
||||
if (count($array) <= $p) {
|
||||
echo '<bgm><a class="ymusic" onclick="playbtu();" target="_blank"><i id="ydmc"></i></a></bgm>';
|
||||
} else {
|
||||
echo '<bgm><a class="ymusic" onclick="playbtu();" target="_blank"><i id="ydmc"></i></a><a class="ymusic" onclick="next();" id="ydnext" target="_blank"><i class="iconfont icon-you"></i></a></bgm>';
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
echo '<script data-no-instant>
|
||||
var yaudio = new Audio();
|
||||
yaudio.controls = true;
|
||||
var musicArr=['.$playList.'];
|
||||
var a=0;
|
||||
var sj=musicArr[a];
|
||||
yaudio.src=sj.mp3;
|
||||
yaudio.volume = 0.68;
|
||||
</script>'. "\n";
|
||||
echo '<script src="'.Helper::options()->pluginUrl . '/YoduBGM/js/player.js?2022" data-no-instant></script><script src="'.Helper::options()->pluginUrl . '/YoduBGM/js/prbug.js"></script>' . "\n";
|
||||
}
|
||||
|
||||
}
|
||||
53
YoduBGM/README.md
Normal file
53
YoduBGM/README.md
Normal file
@@ -0,0 +1,53 @@
|
||||
这个是Typecho博客插件
|
||||
|
||||
## 插件特色
|
||||
|
||||
1,这是一款简洁BGM播放器,需要您的主题支持pjax或者instantclick才能保证页面切换依旧播放
|
||||
|
||||
2,支持多首歌曲,且默认随机播放
|
||||
|
||||
3,支持网易云音乐调用(不保证api永远有效)
|
||||
|
||||
4,当你按照格式只填写一首歌曲时,插件会默认隐藏掉切歌按钮,只保留播放按钮,使其更加简洁
|
||||
|
||||
5,插件使用了原生js,所以无需加载jq等js框架
|
||||
|
||||
6,整个插件所需要加载的文件不到5kb,可谓是非常小巧了
|
||||
|
||||
## 使用方法
|
||||
|
||||
下载压缩包, 解压,得到名为YoduBGM的文件夹,如果不是请将文件夹重命名为YoduBGM ,之后上传到你博客中的 /usr/plugins 目录,在后台启用即可
|
||||
|
||||
插件后台配置歌曲格式:
|
||||
|
||||
直接填写单个歌曲链接即可(需带有http:// 或者 https:// ),两首歌曲间用回车隔开
|
||||
|
||||
## 添加网易云音乐
|
||||
|
||||
直接填写单个歌曲id即可,多个id的话,之间用回车隔开
|
||||
|
||||
|
||||
## 1.7.0升级内容
|
||||
增加播放错误跳到下一曲,默认歌曲音量为当前音量的68%,直链与网易云id支持混填,感谢@daxiyun
|
||||
新增开场音乐设置
|
||||
|
||||
## 1.6.5升级内容
|
||||
时隔4年的重新维护,删除失效的api改用网易云自己的api,新增一项间距设置,重写css样式。
|
||||
|
||||
## 1.6.0升级内容
|
||||
|
||||
音乐格式填写方式简化
|
||||
|
||||
## 1.5.0升级内容
|
||||
|
||||
1,字体图标文件全部写入了css里,解决特殊情况下的字体跨域问题
|
||||
|
||||
2,复活网易云调用功能
|
||||
|
||||
3,加了了歌曲数量判断,大于一首歌曲时,切歌按钮才会出来,使其更加简洁人性化
|
||||
|
||||
4,js梳理优化,缩减代码,解决部分bug
|
||||
|
||||
|
||||
|
||||
|
||||
33
YoduBGM/css/player.css
Normal file
33
YoduBGM/css/player.css
Normal file
@@ -0,0 +1,33 @@
|
||||
@font-face {font-family: 'ydbgm';src: url(data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg9jDFQAAAC8AAAAYGNtYXAAk9NNAAABHAAAAGRnYXNwAAAAEAAAAYAAAAAIZ2x5Zq98cUMAAAGIAAABsGhlYWQLbpAHAAADOAAAADZoaGVhByYDdgAAA3AAAAAkaG10eAvcAGwAAAOUAAAAHGxvY2EA3AFyAAADsAAAABBtYXhwAAkARwAAA8AAAAAgbmFtZZlKCfsAAAPgAAABhnBvc3QAAwAAAAAFaAAAACAAAwH3AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADx2ANt/24AkgNtAJIAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQASAAAAA4ACAACAAYAAQAg8AHxBfHY//3//wAAAAAAIPAB8QXx2P/9//8AAf/jEAMPAA4uAAMAAQAAAAAAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQBJ/4QDtwM8AEQAAAERFAcGBwYHBiMiJyYnJicmNTQ3Njc2NzYzMhcRBREUBwYHBgcGIyInJicmJyY1NDc2NzY3NjMyFxE0NzY3JTYzMhcWFQO3ExQdHh4dGhkeHR4eExQUEx4eHR4ZPDL+SRQTHh4dHhkaHR4eHRQTExQdHh4dGjwyCgsRAdwHCRcQEAMF/X8cFxYMDAYGBgYMDBYXHB0WFwwMBgYWATOI/msdFhYNDAYGBgYMDRYWHR0WFgwNBgYXAioRDw4GkwIQEBcAAAEAEQBDAV0CfQAZAAABFAcBBiMiLwEmNTQ/AScmNTQ/ATYzMhcBFgFdBf71BgcHBh0FBeHhBQUdBgcHBgELBQFgBwb+9QUFHQYHBwbh4QYHBwYdBQX+9QYAAAAAAQASADsBXAKFABIAAAEUBwEGIyInJjURNDc2MzIXARYBXAv/AAsPDwsLCwsPDwsBAAsBYA8L/wALCwsPAgAPCwsL/wALAAAAAQAAAAAAAE4KM+1fDzz1AAsEAAAAAADUTKYlAAAAANRMpiUAAP+EA7cDPAAAAAgAAgAAAAAAAAABAAADbf9uAAAEAAAAAAADtwABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAEAAAAEAABJAW4AEQFuABIAAAAAAAoAFAAeAIYAtADYAAEAAAAHAEUAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAHAAAAAQAAAAAAAgAHAGAAAQAAAAAAAwAHADYAAQAAAAAABAAHAHUAAQAAAAAABQALABUAAQAAAAAABgAHAEsAAQAAAAAACgAaAIoAAwABBAkAAQAOAAcAAwABBAkAAgAOAGcAAwABBAkAAwAOAD0AAwABBAkABAAOAHwAAwABBAkABQAWACAAAwABBAkABgAOAFIAAwABBAkACgA0AKRpY29tb29uAGkAYwBvAG0AbwBvAG5WZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBpY29tb29uAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG5SZWd1bGFyAFIAZQBnAHUAbABhAHJpY29tb29uAGkAYwBvAG0AbwBvAG5Gb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal
|
||||
}
|
||||
|
||||
bgm [class*=" icon-"],bgm [class^=icon-]{font-family:ydbgm!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size: 16px;}
|
||||
|
||||
.icon-music:before{content:"\f001"}.icon-you:before{content:"\f105"}.icon-bofang:before{content:"\f1d8"}
|
||||
|
||||
bgm {
|
||||
position: fixed;
|
||||
right: 5px;
|
||||
top: 65px;
|
||||
}
|
||||
bgm a {
|
||||
display: flex;
|
||||
background: white;
|
||||
margin-bottom: 10px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px;
|
||||
color: red;
|
||||
cursor: pointer;
|
||||
-moz-box-shadow:3px 3px 6px #858585; -webkit-box-shadow:3px 3px 6px #858585; box-shadow:3px 3px 6px #858585;
|
||||
}
|
||||
.dark bgm a{
|
||||
background: #1f2937;
|
||||
-moz-box-shadow:3px 3px 6px #718096; -webkit-box-shadow:3px 3px 6px #718096; box-shadow:3px 3px 6px #718096;
|
||||
color: white;
|
||||
}
|
||||
32
YoduBGM/js/player.js
Normal file
32
YoduBGM/js/player.js
Normal file
@@ -0,0 +1,32 @@
|
||||
function playbtu(){
|
||||
var oyd = document.getElementById('ydmc');
|
||||
if (yaudio.paused) {
|
||||
yaudio.play();
|
||||
oyd.className = 'iconfont icon-music';
|
||||
} else {
|
||||
yaudio.pause();
|
||||
oyd.className = 'iconfont icon-bofang';
|
||||
}
|
||||
}
|
||||
function next() {
|
||||
var oyd=document.getElementById('ydmc');
|
||||
if (a == musicArr.length - 1) {
|
||||
a = 0
|
||||
} else {
|
||||
a = a + 1
|
||||
}
|
||||
var sj = musicArr[a];
|
||||
yaudio.src = sj.mp3;
|
||||
yaudio.play();var autopause=0;
|
||||
oyd.className = 'iconfont icon-music';
|
||||
}
|
||||
|
||||
yaudio.addEventListener('ended',
|
||||
function() {
|
||||
next();
|
||||
},
|
||||
false);
|
||||
|
||||
yaudio.addEventListener("error", function() {
|
||||
next();
|
||||
}, false);
|
||||
6
YoduBGM/js/prbug.js
Normal file
6
YoduBGM/js/prbug.js
Normal file
@@ -0,0 +1,6 @@
|
||||
var ody=document.getElementById('ydmc');
|
||||
if (yaudio.paused) {
|
||||
ody.className = 'iconfont icon-bofang';
|
||||
} else {
|
||||
ody.className = 'iconfont icon-music';
|
||||
}
|
||||
Reference in New Issue
Block a user