Add files via upload

一款简洁BGM播放器,需要您的主题支持pjax或者instantclick才能保证页面切换依旧播放
hucaloof · Feb 24, 2017 · 0c17d29 · 0c17d29
1 parent 16ac84c
commit 0c17d29
Show file tree

Hide file tree

Showing 11 changed files with 386 additions and 0 deletions.
diff --git a/YoduBGM/IDExplain.php b/YoduBGM/IDExplain.php
@@ -0,0 +1,233 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+	<title>网易云音乐id解析</title>
+    <style>
+        #title {
+            padding: 2px;
+            margin: 0 0 10px;
+        }
+        h1 {
+            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+            font-weight: 500;
+            width: 300px;
+            margin: 5px auto;
+        }
+        form {
+            max-width: 900px;
+            padding: 19px 29px 29px;
+            margin: 15px auto 20px;
+            background-color: #fff;
+            -webkit-border-radius: 10px;
+            -moz-border-radius: 10px;
+            border-radius: 10px;
+            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
+            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
+            box-shadow: 0 1px 2px rgba(0,0,0,.05);
+        }
+        body {
+            background-color: #1b9af7;
+        }
+        #input {
+            width: 280px;
+            height: 25px;
+            font-size: 18px;
+            line-height: 1.33;
+            background-color:#f5f5f5;
+            border:0; 
+            padding: 5px;
+            outline:none;
+
+        }
+        #inputform,#radiogroup{
+            width:450px;
+            margin: 0 auto;
+        }
+        #submit {
+            height: 30px;
+            width: 80px;
+            font-weight: 500;
+            font-size: 16px;
+            font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+            border-radius: 10px;
+            background-color: #1b9af7;
+            border-color: #4cb0f9;
+            color: #FFF;
+            border:0;
+            padding: 5px 0px;
+            outline:none;
+        }
+
+        #submit:hover {
+            background-color: #4cb0f9;
+            cursor:pointer;
+        }
+        .mgr {
+          position: relative;
+          width: 16px;
+          height: 16px;
+          background-clip: border-box;
+          -webkit-appearance: none;
+             -moz-appearance: none;
+                  appearance: none;
+          margin: -0.15px 0.6px 0 0;
+          vertical-align: text-bottom;
+          border-radius: 50%;
+          background-color: #fff;
+          border: 1px solid #d7d7d7;
+        }
+        .mgr:disabled {
+          opacity: 0.65;
+        }
+        .mgr:before {
+          content: '';
+          display: block;
+          height: 0px;
+          width: 0px;
+          -webkit-transition: width 0.25s, height 0.25s;
+          transition: width 0.25s, height 0.25s;
+        }
+        .mgr:checked:before {
+          height: 8px;
+          width: 8px;
+          border-radius: 50%;
+          margin: 3px 0 0 3px;
+        }
+        .mgr:focus {
+          outline: none;
+          box-shadow: inset 0 1px 1px rgba(255,255,255,0.075), 0 0px 2px #38a7ff;
+        }
+        .mgr:checked {
+          border: 1px solid #337ab7;
+        }
+        .mgr:checked:before {
+          background-color: #337ab7;
+        }
+    </style>
+</head>
+<body>
+<form method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
+<div id="title"><h1>网易云音乐id解析</h1></div>
+<div id="radiogroup">
+id类型:
+<input type="radio" name="type" class="mgr" value="song"  <?php if ($_POST['type']=="song" || $_POST['type'] == null) echo "checked";?>>单曲
+<input type="radio" name="type" class="mgr" value="album" <?php if ($_POST['type']=="album") echo "checked";?>>专辑
+<input type="radio" name="type" class="mgr" value="artist" <?php if ($_POST['type']=="artist") echo "checked";?>>艺人
+<input type="radio" name="type" class="mgr" value="collect" <?php if ($_POST['type']=="collect") echo "checked";?>>歌单
+</div>
+<br>
+<div id="inputform">
+id输入:&nbsp;<input type="text" id="input" placeholder="多个id用英文,分隔开" name="id" value="<?php echo $_POST["id"] ?>">
+<input type="submit" id="submit" value="提交">
+</div>
+</form> 
+<br>
+<div style="border:5px dotted #9bcd9b;"></div>
+
+<?php 
+    /**
+     * 从netease中获取歌曲信息
+     * 
+     * @link https://github.com/webjyh/WP-Player/blob/master/include/player.php
+     * @param unknown $id 
+     * @param unknown $type 获取的id的类型，song:歌曲,album:专辑,artist:艺人,collect:歌单
+     */
+    function get_netease_music($id, $type = 'song'){
+        $return = false;
+        switch ( $type ) {
+            case 'song': $url = "http://music.163.com/api/song/detail/?ids=[$id]"; $key = 'songs'; break;
+            case 'album': $url = "http://music.163.com/api/album/$id?id=$id"; $key = 'album'; break;
+            case 'artist': $url = "http://music.163.com/api/artist/$id?id=$id"; $key = 'artist'; break;
+            case 'collect': $url = "http://music.163.com/api/playlist/detail?id=$id"; $key = 'result'; break;
+            default: $url = "http://music.163.com/api/song/detail/?ids=[$id]"; $key = 'songs';
+        }
+
+        if (!function_exists('curl_init')) return false;
+
+        $ch = curl_init();
+        curl_setopt($ch, CURLOPT_URL, $url);
+        curl_setopt($ch, CURLOPT_HTTPHEADER, array( 'Cookie: appver=2.0.2' ));
+        curl_setopt($ch, CURLOPT_TIMEOUT, 15);
+        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+        curl_setopt($ch, CURLOPT_BINARYTRANSFER, true);
+        curl_setopt($ch, CURLOPT_REFERER, 'http://music.163.com/;');
+        $cexecute = curl_exec($ch);
+        curl_close($ch);
+
+        if ( $cexecute ) {
+            $result = json_decode($cexecute, true);
+            if ( $result['code'] == 200 && $result[$key] ){
+
+                switch ( $key ){
+                    case 'songs' : $data = $result[$key]; break;
+                    case 'album' : $data = $result[$key]['songs']; break;
+                    case 'artist' : $data = $result['hotSongs']; break;
+                    case 'result' : $data = $result[$key]['tracks']; break;
+                    default : $data = $result[$key]; break;
+                }
+
+                //列表
+                $list = array();
+                foreach ( $data as $keys => $data ){
+
+                    $list[$data['id']] = array(
+                            'title' => $data['name'],
+                            'artist' => $data['artists'][0]['name'],
+                            'location' => str_replace('http://m', '//p', $data['mp3Url']),
+
+                    );
+                }
+                //修复一次添加多个id的乱序问题
+                if ($type = 'song' && strpos($id, ',')) {
+                    $ids = explode(',', $id);
+                    $r = array();
+                    foreach ($ids as $v) {
+                        if (!empty($list[$v])) {
+                            $r[] = $list[$v];
+                        }
+                    }
+                    $list = $r;
+                }
+                //最终播放列表
+                $return = $list;
+            }
+        } else {
+            $return = array('status' =>  false, 'message' =>  '非法请求');
+        }
+        return $return;
+    }
+
+
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    $input = $_POST["id"];
+    $type = $_POST["type"];
+    $resultList = explode(",", $input);
+    $result="";
+    foreach ($resultList as $key => $value) {
+         $musicList = get_netease_music($value,$type);
+        foreach($musicList as $x=>$x_value) {
+            $result .= "{";
+            foreach ($x_value as $key => $value) {
+                if ($key == 'location') {
+                    $key = 'mp3';
+                }
+                if ($key == 'pic') {
+                    $key = 'cover';
+                }
+                if (strpos($value, '"') !== false) {
+                    $value = addcslashes($value, '"');
+                }
+                $result .= "$key:\"". $value."\",";
+            }
+            $result .= "},<br>";
+        }
+    }
+    echo "<br><div style='color:#fff;word-wrap: break-word;word-break: normal; '>".$result."</div>";
+
+}
+?>
+
+
+</body>
+</html>
diff --git a/YoduBGM/Plugin.php b/YoduBGM/Plugin.php
@@ -0,0 +1,74 @@
+<?php
+/**
+ * 一款简洁BGM播放器,需要您的主题支持pjax或者instantclick才能保证页面切换依旧播放
+ * 
+ * @package YoduBGM
+ * @author Jrotty
+ * @version 0.6.0
+ * @link http://qqdie.com/archives/typecho-yodubgm.html
+ */
+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){
+       $bof = new Typecho_Widget_Helper_Form_Element_Radio(
+        'bof', array('0'=> '不自动播放', '1'=> '自动播放'), 0, '播放设置',
+            '自动播放顾名思义，就是页面打开后音乐就会自动播放');
+        $form->addInput($bof);
+
+$sxj = new Typecho_Widget_Helper_Form_Element_Radio(
+        'sxj', array('0'=> '隐藏', '1'=> '不隐藏'), 0, '手机端是/否隐藏',
+            '');
+        $form->addInput($sxj);
+        $musicList = new Typecho_Widget_Helper_Form_Element_Textarea('musicList', NULL, 
+'{title:"一半一半",artist:"洛天依",mp3:"//p2.music.126.net/LsZAfVP2SgdqoemJpYmOnw==/5670181464502469.mp3",},{title:"I Love U",artist:"洛天依",mp3:"//p2.music.126.net/IbwygfnvC-f7hEuU_7WKbA==/5985741301956163.mp3",},
+',_t('歌曲列表'), _t('格式: {title:"xxx", artist:"xxx", mp3:"http:xxxx"} ，每个歌曲之间用英文,隔开。请保证歌曲列表里至少有一首歌！<br><br><div style="background-color:#56A5CE;padding:5px 8px;max-width:250px;border-radius: 2px;"><a href="'.Helper::options()->pluginUrl.'/YoduBGM/IDExplain.php" target="_blank" style="font-size:14px;color:#fff;outline:none;text-decoration:none;">网易云音乐id解析(主机需支持curl扩展)</a>
+        	</div>请自行去网易云音乐网页版获取音乐id(具体在每个音乐项目的网址最后会有个id)。<b>将解析出的音乐链接复制到上面歌曲列表里(注意检查与现有歌曲是否用英文,隔开)</b>'));
+        $form->addInput($musicList);
+    }
+
+    public static function personalConfig(Typecho_Widget_Helper_Form $form){}
+    public static function header(){
+        $cssUrl = Helper::options()->pluginUrl . '/YoduBGM/css/player.css';
+        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";
+}
+    }
+
+    public static function footer(){
+        $options = Typecho_Widget::widget('Widget_Options')->plugin('YoduBGM'); 
+
+		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=[
+              '.$options->musicList.'
+              ];
+/*首次随机播放*/
+var a=parseInt(Math.random()*musicArr.length);
+var sj=musicArr[a];
+yaudio.src=sj.mp3;
+yaudio.ti=sj.title;
+yaudio.art=sj.artist;
+ ';
+if(Typecho_Widget::widget('Widget_Options')->Plugin('YoduBGM')->bof=='1'){	
+			echo 'yaudio.play();</script>'. "\n";
+		}else{	echo '</script>'. "\n";
+}
+        echo '<script  src="'.Helper::options()->pluginUrl . '/YoduBGM/js/player.js" data-no-instant></script><script  src="'.Helper::options()->pluginUrl . '/YoduBGM/js/prbug.js"></script>' . "\n";        
+    }
+
+}
diff --git a/YoduBGM/README.md b/YoduBGM/README.md
@@ -0,0 +1,15 @@
+##使用方法
+下载压缩包, 解压，得到名为YoduBGM的文件夹，如果不是请将文件夹重命名为YoduBGM ，之后上传到你博客中的 /usr/plugins 目录，在后台启用即可
+
+插件后台配置歌曲格式: 
+
+{title:"xxx", artist:"xxx", cover:"http:xxxx", mp3:"http:xxxx"} ，每个歌曲之间用英文,隔开。
+**请保证歌曲列表里至少有一首歌**！
+
+##添加网易云音乐(需主机支持curl扩展)
+去网易云音乐官网找到音乐id,支持单曲|艺人|专辑|歌单类型的id解析，billboard等排行榜也支持(实质就是歌单)。
+
+【0.4.0版开始不需要加载JQ也能完美使用了】
+【0.5.0版开始网易云音乐解析全面支持https】
+【0.6.0版当文章内播放器播放时背景音乐自动暂停beat】
+
diff --git a/YoduBGM/css/fonts/icomoon.eot b/YoduBGM/css/fonts/icomoon.eot
diff --git a/YoduBGM/css/fonts/icomoon.svg b/YoduBGM/css/fonts/icomoon.svg
diff --git a/YoduBGM/css/fonts/icomoon.ttf b/YoduBGM/css/fonts/icomoon.ttf
diff --git a/YoduBGM/css/fonts/icomoon.woff b/YoduBGM/css/fonts/icomoon.woff
diff --git a/YoduBGM/css/player.css b/YoduBGM/css/player.css
diff --git a/YoduBGM/error_log b/YoduBGM/error_log
@@ -0,0 +1 @@
+
diff --git a/YoduBGM/js/player.js b/YoduBGM/js/player.js
@@ -0,0 +1,30 @@
+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.ti = sj.title;
+        yaudio.art = sj.artist;
+        yaudio.play();var autopause=0;
+       oyd.className = 'iconfont icon-music';
+}
+
+yaudio.addEventListener('ended',
+function() {
+    next();
+},
+false);
diff --git a/YoduBGM/js/prbug.js b/YoduBGM/js/prbug.js
@@ -0,0 +1,19 @@
+var ody=document.getElementById('ydmc');
+if (yaudio.paused) {var autopause=0;
+ody.className = 'iconfont icon-bofang';
+} else {var autopause=1;
+ody.className = 'iconfont icon-music';
+}
+var otheraudio = document.getElementsByTagName('audio');
+if(autopause==1||znst==1){
+if(otheraudio.paused || otheraudio.length==0){var znst=0;
+           yaudio.play();
+           ody.className = 'iconfont icon-music';
+           console.info("背景音乐恢复播放");  
+}
+else{var znst=1;
+  yaudio.pause();
+            ody.className = 'iconfont icon-bofang';
+       console.info("背景音乐智能暂停");  
+}
+}