增加音乐播放插件XiaMiPlayer 3.0.6版

XiaMiPlayer/Plugin.php

@@ -0,0 +1,292 @@
+<?php
+/**
+ * 虾米音乐播放器：虾米音乐搜索+引用
+ *
+ * @package XiaMiPlayer
+ * @author 公子
+ * @version 3.0.6
+ * @link http://zh.eming.li/#typecho
+ */
+class XiaMiPlayer_Plugin implements Typecho_Plugin_Interface
+{
+    /**
+     * 插件版本号
+     * @var string
+     */
+    const _VERSION = '3.0.6';
+
+    /**
+     * 激活插件方法,如果激活失败,直接抛出异常
+     *
+     * @access public
+     * @return void
+     * @throws Typecho_Plugin_Exception
+     */
+    public static function activate()
+    {
+		Typecho_Plugin::factory('admin/write-post.php')->bottom = array('XiaMiPlayer_Plugin', 'Insert');
+		Typecho_Plugin::factory('admin/write-page.php')->bottom = array('XiaMiPlayer_Plugin', 'Insert');
+    }
+
+    /**
+     * 插件的实现方法
+     *
+     * @access public
+     * @return void
+     */
+	public static function Insert() 
+	{
+		$options         = Helper::options();
+		$config 		 = $options->plugin('XiaMiPlayer');
+        $box			 = Typecho_Common::url('XiaMiPlayer/jplayer/index.html', $options->pluginUrl);
+
+        /* 播放器样式 */
+        switch($config->type) {
+	        case 'blue':
+	        	$color = '|37839e|2b5c70';
+	        break;
+	        case 'green':
+	        	$color = '|74db89|55db74';
+	        break;
+	        case 'yellow':
+	        	$color = '|ffd863|de8d24';
+	        break;
+	        case 'red':
+	        	$color = '|d64e3c|b82a25';
+	        break;
+	        case 'purple':
+	        	$color = '|8073c7|5c396e';
+	        break;
+	        case 'user':
+	        	$color = ($config->background && $config->border) ? '|'.substr($config->background,1).'|'.substr($config->border,1) : '';
+	        break;
+	        default:
+	        	$color = '';
+	        break;
+        }
+
+		?>
+        <link rel="stylesheet" type="text/css" href="<?php echo Typecho_Common::url('XiaMiPlayer/style.css' , $options->pluginUrl); ?>" />
+		<script type="text/javascript">
+		$(function() {
+			/* 判断是否为默认编辑器插入音乐按钮 */
+			if($('#wmd-button-row').length>0) {
+				$('#wmd-button-row').prepend('<li class="wmd-button" id="wmd-music-button" style="" title="插入音乐 Ctrl + Shift + M">♫</li>');
+			} else {
+				$('#text').before('<a href="javascript:void(0)" id="wmd-music-button" title="插入音乐 Ctrl + Shift + M">插入歌曲</a>');
+			}
+			
+			/* 为编辑器按钮增加点击事件 */
+			$(document).on('click', '#wmd-music-button', function() {
+				$(this).after('<div id="searchPanel">'+
+								'<div class="wmd-prompt-background" style="height:'+$(document).height()+'px;width:'+$(document).width()+'px;"></div>'+
+								'<div class="wmd-prompt-dialog">'+
+									'<div>'+
+										'<ul id="tab" class="wmd-button-row">'+
+											'<li onclick="xm_search();" title="Ctrl + ←"><b>虾米搜索</b></li>'+
+											'<li onclick="xm_link();" title="Ctrl + →"><b>输入链接</b></li>'+
+										'</ul>'+
+										'<div class=\"close\" onclick=\"rm();\" title="Esc">×</div>'+
+									'</div>'+
+									'<form id="xm"></form>'+
+								'</div>'+
+							'</div>');
+				xm_search();
+			});
+
+			/* 增加各种快捷键操作 */
+			$(document).on('keydown', function(e){	
+				
+				/* Ctrl+Shift+M 调出音乐搜索窗口 */
+				if(e.ctrlKey && e.shiftKey && e.keyCode == '77') 
+					$('#wmd-music-button').click();
+
+				/* ESC 退出音乐搜索窗口 */
+				if(($('#searchPanel').length != 0) && e.keyCode == '27')
+					rm();
+
+				/* Ctrl+Enter 执行搜索操作 */
+				if($('#xiami_search').is(':focus') && $('#xiami_search').val() != '' && e.ctrlKey && e.keyCode == '13') {
+					$('#xiami_navi').attr('page','1');
+					search();
+				}
+
+				/* Ctrl+Pagedown 下一页 */
+				if(e.ctrlKey && e.keyCode == '40') {
+					next();
+					e.preventDefault();
+				}
+
+				/*Ctrl+Pageup 上一页 */
+				if(e.ctrlKey && e.keyCode == '38') {
+					pre();
+					e.preventDefault();
+				}
+
+				/*Ctrl+Left 调出虾米搜索窗口 */
+				if(e.ctrlKey && e.keyCode == '37') {
+					xm_search();
+					e.preventDefault();
+				}
+
+				/*Ctrl+Right 调出直链窗口 */
+				if(e.ctrlKey && e.keyCode == '39') {
+					xm_link();
+					e.preventDefault();
+				}
+
+				/*Ctrl+[1-8] 使用数字键快捷选择歌曲 */
+				for(var i=1;i<9;i++) {
+					var result = $('#xiami_result a');
+					if(($('#searchPanel').length != 0) && result[i-1] != null && parseInt(e.keyCode) == 48+i) {
+						$(result[i-1]).click();
+						$('#text').focus();
+						e.preventDefault();	
+					} 
+				}
+			})
+		});
+
+		function xm_search() {
+			$('#xm').html('<form>'+
+							'<input type=\"text\" id=\"xiami_search\" autocomplete=\"off\">'+
+							'<input type=\"hidden\" id=\"xiami_page\" value=\"1\">'+
+							'<div class="btn-s primary" onclick=\"$(\'#xiami_navi\').attr(\'page\',\'1\');search();\" style="float:right;padding:0 12px;line-height:28px;" title="Ctrl + Enter">搜索</div>'+
+						  '</form>'+
+						  '<br style="clear:both;" />'+
+						  '<div id=\"xiami_list\">'+
+						  	'<div id=\"xiami_result\"></div>'+
+						  	'<div id=\"xiami_navi\" page="1">'+
+						  		'<a href="#" class="pre" onclick="pre();" title="Ctrl+↑" style="display:inline-table;border:none;float:left;"></a>'+
+						  		'<a href="#" class="next" onclick="next();" title="Ctrl+↓" style="display:inline-table;border:none;float:right;"></a>'+
+						  	'</div>');
+			$('#xiami_search').focus();
+		}
+
+		function xm_link() {
+			$('#xm').html('<p style="margin-bottom:15px;">输入歌曲名称和歌曲直链地址，其中歌曲名称选填。</p>'+
+						  '<p><input type=\"text\" id=\"song_name\" placeholder="歌曲名称"></p>'+
+						  '<p><input type=\"text\" id=\"song_link\" placeholder="歌曲地址"></p>'+
+						  '<button class="btn-s primary" onclick=\"insert_link();\">插入</button>');
+			$('#song_name').focus();
+		}
+
+		function pre() {
+			var n = $('#xiami_navi'), p = Number(n.attr('page'))-1;
+			if(p == 1) $('.pre').html('');
+			n.attr('page', p);
+			search();
+		}
+
+		function next() {
+			var n = $('#xiami_navi'), p = Number(n.attr('page'))+1;
+			n.attr('page', p);
+			search();
+		}
+
+		function search() {
+			var k = $('#xiami_search').val(), p = Number($('#xiami_navi').attr('page'));
+			$('.pre').html('上一页');
+			$('.next').html('下一页');
+			if(k) {
+				$('#xiami_result').html('正在载入请稍后...');
+				$.getJSON('http://www.xiami.com/app/nineteen/search/key/'+k+'/page/'+p+'?callback=?',function(data) {
+					$('#xiami_result').html('');
+					$.each(data.results,
+					function(i, item) {
+						$('<a href=\"#\" onclick=\"show(\'' + item.song_id + '\');\" title=\"Ctrl + '+(i+1)+'\">' + (i+1) + '. ' + decodeURIComponent(item.song_name).split('+').join(' ') + ' - ' + decodeURIComponent(item.artist_name).split('+').join(' ') + '</a>').appendTo('#xiami_result');
+					});
+				});
+			} else {
+				alert('请输入歌曲名称!')
+			}
+		}
+
+
+		function rm() {$('#searchPanel').remove()}
+		
+		function show(id) {
+			rm();
+			var c = '<iframe src="<?php echo $box; ?>#'+id+'<?php echo $color; ?>" style="width:255px;height:35px;" frameborder="0" scrolling="no"></iframe>';
+			
+			$('#text').val($('#text').val() + c);
+			editor(c);
+		}
+
+		function insert_link() {
+			if($('#song_link').val()=='') return alert('必须输入音乐链接');
+
+			var url = '<?php echo $box; ?>#'+$('#song_link').val()+'|'+$('#song_name').val()+'<?php echo $color; ?>';
+			var c = '<iframe src="'+url+'" frameborder="0" scrolling="no"></iframe>';
+			
+			$('#text').val($('#text').val()+c);
+			editor(c);
+			rm();
+		}
+
+		function editor(c) {
+			if (window.frames.length > 0) {
+				if (fck = window.frames['text___Frame']) 
+					var _c = fck.document.getElementsByTagName('iframe')[0].contentDocument.body;
+
+				else if (mce = window.frames['text_ifr']) 
+					var _c = mce.document.body;
+				
+				else if (kin = document.getElementsByClassName('ke-edit-iframe')[0]) 
+					var _c = kin.contentDocument.body;
+				
+				else if (cke = document.getElementsByClassName('cke_wysiwyg_frame')[0]) 
+					var _c = cke.contentDocument.body;
+				
+				_c.innerHTML = _c.innerHTML + c;
+			}
+		}
+		</script>
+		<?php
+	}
+
+    /**
+     * 获取插件配置面板
+     *
+     * @access public
+     * @param Typecho_Widget_Helper_Form $form 配置面板
+     * @return void
+     */
+    public static function config(Typecho_Widget_Helper_Form $form)
+    {
+	    $color = array('orange' => _t('默认橙'),'blue' => _t('天空蓝'),'green' => _t('自然绿'),'yellow' => _t('大地黄'),'red' => _t('高原红'),'purple' => _t('葡萄紫'),'user' => _t('自定义'));
+		$type = new Typecho_Widget_Helper_Form_Element_Radio('type', $color,'orange',_t('请选择播放器样式'));
+    	$form->addInput($type);
+
+    	$background = new Typecho_Widget_Helper_Form_Element_Text('background', NULL, '#FF6503', _t('播放器背景'), NULL);
+	    $background->input->setAttribute('class', 'mini');
+	    $form->addInput($background);
+	    
+	    $border = new Typecho_Widget_Helper_Form_Element_Text('border', NULL, '#C4753D', _t('播放器边框'), NULL);
+	    $border->input->setAttribute('class', 'mini');
+	    $form->addInput($border);
+    }
+
+    /**
+     * 个人用户的配置面板
+     *
+     * @access public
+     * @param Typecho_Widget_Helper_Form $form
+     * @return void
+     */
+    public static function personalConfig(Typecho_Widget_Helper_Form $form){}
+
+    /**
+     * 禁用插件方法,如果禁用失败,直接抛出异常
+     *
+     * @static
+     * @access public
+     * @return void
+     * @throws Typecho_Plugin_Exception
+     */
+    public static function deactivate(){}
+
+ 
+
+}
+

XiaMiPlayer/jplayer/index.html

@@ -0,0 +1,194 @@
+<!DOCTYPE HTML>
+<html>
+    
+    <head>
+        <title>
+        </title>
+        <meta charset="UTF-8" />
+        <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js">
+        </script>
+        <script type="text/javascript" src="jquery.jplayer.min.js">
+        </script>
+        <style type="text/css">
+		body {
+			margin: 0;
+			padding: 0
+		}
+		div.openyy {
+			cursor: pointer;
+			text-decoration: none;
+			font: 12px/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif;
+			overflow: hidden;
+			display: block;
+			width: 250px;
+			height: 30px;
+			line-height: 30px;
+			white-space: nowrap;
+			background-color: #FF6503;
+			color: #fff;
+			border-bottom: #C4753D 1px solid;
+			text-align: center;
+			border-radius: 3px;
+			text-shadow: 0-1px 0 rgba(0, 0, 0, .2);
+			font-size: 14px
+		}
+		.openyy span {
+			float: left;
+			margin-left: 10px;
+			width: 210px;
+			overflow: hidden;
+			text-align: left
+		}
+		#play {
+			width: 0;
+			height: 0;
+			border:10px solid transparent;
+			border-left: 15px solid #FFF;
+			float: right;
+			margin-top: 5px
+		}
+		#pause {
+			width: 5px;
+			height: 20px;
+			border-left: 5px solid #FFF;
+			border-right: 5px solid #FFF;
+			float: right;
+			margin-top: 5px;
+			margin-right: 10px
+		}
+		#progress {
+			height: 30px;
+			background: #FF8F00;
+			position: absolute;
+			opacity: 0.5;-moz-opacity: 0.5;
+			filter: alpha(opacity = 50)
+		}
+        </style>
+        <script type="text/javascript">
+            $(function() {
+                var hash = location.hash.split('|');
+                if (hash.length == 3) {
+                    var background = '#' + hash[1],
+                    border = '#' + hash[2]
+                } else {
+                    var background = '#' + hash[2],
+                    border = '#' + hash[3]
+                }
+                $('.openyy').css({
+                    'background': background,
+                    'border-bottom-color': border
+                });
+
+                $('#progress').css({
+                    'background': border
+                });
+                var song = hash[0].substr(1);
+                if (song.substring(0, 7) == "http://") {
+                    var songs = new Array(hash[0].substr(1), hash[1]),
+                    format = songs[0].split('.').pop();
+                    $('#jplayer').jPlayer({
+                        ready: function() {
+                            switch (format) {
+                            case 'wma':
+                                $(this).jPlayer('setMedia', {
+                                    wma: songs[0]
+                                });
+                                break;
+                            case 'ogg':
+                                $(this).jPlayer('setMedia', {
+                                    ogg: songs[0]
+                                });
+                                break;
+                            case 'ape':
+                                $(this).jPlayer('setMedia', {
+                                    ape: songs[0]
+                                });
+                                break;
+                            default:
+                                $(this).jPlayer('setMedia', {
+                                    mp3: songs[0]
+                                });
+                                break
+                            }
+                            $('title').html(songs[1]);
+                            $('.openyy span').html(songs[1])
+                        },
+                        preload: 'none',
+                        ended: function() {
+                            $('#pause').click();
+                            $('#progress').width('0px')
+                        },
+                        swfPath: './',
+                        supplied: 'mp3,wma,ogg,ape'
+                    })
+                } else {
+                    $.ajax({
+                        url: 'http://imnerd.org/lab/search/api.php?id=' + song,
+                        type: 'GET',
+                        dataType: 'jsonp',
+                        async: false,
+                        success: function(d) {
+                            $('#jplayer').jPlayer({
+                                ready: function() {
+                                    $(this).jPlayer('setMedia', {
+                                        mp3: './music.php?location=' + d.location + '&id=' + d.id[0]
+                                    });
+                                    $('title').html(d.title);
+                                    $('.openyy span').html(d.title);
+                                    $.ajax({
+                                        url: 'http://imnerd.org/lab/search/lyric.php?url=' + d.lyric,
+                                        type: 'GET',
+                                        dataType: 'jsonp',
+                                        async: false,
+                                        success: function(lrc) {
+                                            var m = 0;
+                                            $('#jplayer').bind($.jPlayer.event.timeupdate,
+                                            function(e) {
+                                                if (e.jPlayer.status.currentTime > lrc[m][0]) $('.openyy span').html(lrc[m][1]),
+                                                m++
+                                            })
+                                        }
+                                    })
+                                },
+                                ended: function() {
+                                    $('#pause').click();
+                                    $('#progress').width('0px')
+                                },
+                                preload: 'none',
+                                swfPath: './',
+                                supplied: 'mp3'
+                            })
+                        }
+                    })
+                }
+                $('#jplayer').bind($.jPlayer.event.timeupdate,
+                function(e) {
+                    $('#progress').width(Math.round(e.jPlayer.status.currentPercentAbsolute / 100 * $('.openyy span').width()))
+                });
+                $('body').on('click', '#play',
+                function() {
+                    $('#jplayer').jPlayer('play');
+                    $(this).attr('id', 'pause')
+                });
+                $('body').on('click', '#pause',
+                function() {
+                    $('#jplayer').jPlayer('pause');
+                    $(this).attr('id', 'play')
+                })
+            });
+        </script>
+    </head>
+    
+    <body>
+        <div class="openyy">
+            <div id="progress">
+            </div>
+            <div id="jplayer">
+            </div>
+            <span>
+            </span>
+            <div id="play"></div>
+        </div>
+    </body>
+
+</html>

XiaMiPlayer/jplayer/music.php

@@ -0,0 +1,10 @@
+<?php
+header('Content-type: audio/mpeg');
+if(!isset($_GET['id']) && !isset($_GET['location'])) die();
+$id = $_GET['id'];
+$url = str_replace('|', '%', $_GET['location']);
+$curl = curl_init($url);
+curl_setopt($curl, CURLOPT_REFERER, 'http://img.xiami.com/res/player/widget/singlePlayer.swf?dataUrl=http://www.xiami.com/widget/xml-single/uid/0/sid/'.$id);
+curl_exec($curl);
+curl_close($curl);
+?>

XiaMiPlayer/style.css

@@ -0,0 +1,86 @@
+.wmd-button#wmd-music-button {
+  font-size: 20px;
+  text-align: center;
+  color: #AAA;
+  width: 20px
+}
+.wmd-prompt-background {
+  position: absolute;
+  top: 0px;
+  z-index: 1000;
+  opacity: 0.5;
+  left: 0px
+}
+input#xiami_search {
+  width: 270px;
+  height: 28px;
+  float: left
+}
+#searchPanel form {
+  padding: 6px
+}
+#DoSearch {
+  -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
+  -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
+  box-shadow: inset 0px 1px 0px 0px #ffffff;
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
+  background: -moz-linear-gradient(center top, #ededed 5 % , #dfdfdf 100 % );
+  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#ededed', endColorstr = '#dfdfdf');
+  background-color: #ededed;
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+  border: 1px solid#dcdcdc;
+  display: inline-block;
+  color: #777777;
+  font-family: arial;
+  font-size: 15px;
+  font-weight: normal;
+  padding: 10px 15px;
+  margin-left: 10px;
+  text-decoration: none;
+  text-shadow: 1px 1px 0px#ffffff
+}
+#DoSearch:hover {
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
+  background: -moz-linear-gradient(center top, #dfdfdf 5 % , #ededed 100 % );
+  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#dfdfdf', endColorstr = '#ededed');
+  background-color: #dfdfdf;
+  cursor: pointer
+}
+#DoSearch:active {
+  position: relative;
+  top: 1px
+}
+#searchPanel .close {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  cursor: pointer;
+  display: block;
+  padding: 6px;
+  -moz-border-radius: 3px;
+  -khtml-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  color: #000;
+  width: 10px;
+  height: 10px;
+  text-align: center;
+  line-height: 10px;
+  font-size: 20px
+}
+#searchPanel #xiami_list a {
+  display: block;
+  padding: 6px;
+  border-bottom: 1px solid#ddd
+}
+ul#tab {
+  margin: 0px;
+  padding: 0px
+}
+#tab li: hover {
+  cursor: pointer;
+  background: #467b96;
+  color: #FFF
+}