更换HTML5替代方案为miniAudioPlayer

README.md

@@ -1,12 +1,9 @@
 ### Typecho音乐播放器插件AudioPlayer
-2017年1月29日更新至**v1.2.5**: 
-- 修正摘要输出兼容feed提示
-
-2017年1月28日更新至**v1.2.4**: 
-- 重整结构优化嵌载模式效率
-- 修复短代码标签冲突等bug
-- 支持配色重置与中文url加密
-- 增加缺省可使用HTML5播放
+2018年6月27日更新至**v1.2.6**: 
+- 缺省调用mb.miniAudioPlayer
+- HTML5版支持配色/列表模式
+- HTML5版支持ID3及解密播放
+- 新增编辑器按钮重整文件结构
 
 #### 详细说明与效果演示见blog发布地址: 
  > http://www.yzmb.me/archives/net/audio-player-for-typecho

assets/audio-player-admin.css → admin/audio-player-admin.css

@@ -1,3 +1,67 @@
+/* AudioPlayer plugin */
+#description {
+	color: #999;
+	font-size: .92857em;
+}
+
+#description strong {
+	color:#467B96;
+}
+
+#description span {
+	font-weight:bold;
+	color:#444;
+}
+
+#sample {
+	color: #444;
+	font-size: .92857em;
+	font-weight: bold;
+	padding: 5px 8px;
+	width: 210px;
+	background: #E9E9E6;
+}
+
+#sample span {
+	color: #467B96;
+}
+
+#ap_fieldselector {
+	height: 23px;
+}
+
+.predes {
+	color: #999;
+	font-size: .92857em;
+	display: block;
+	margin-top: 3px;
+}
+
+#typecho-option-item--0 {
+	position: relative;
+}
+#ap_resetcolor {
+	position: absolute;
+	top: 29px;
+	left: 132px;
+	height: 22px;
+}
+
+.text {
+	width: 50px! important;
+}
+
+.typecho-label span {
+	font-size: 8px;
+	color: #467B96;
+	background-color: #E9E9E6;
+}
+.typecho-label span em {
+	font-weight: normal;
+	color: #8A1F11;
+}
+
+/* Selector sets*/
 #ap_colorscheme {
 	position: relative;
 }
@@ -14,7 +78,7 @@
 	padding: 2px;
 	width: 75px;
 	height: 23px;
-	text-transform : uppercase
+	text-transform: uppercase
 }
 
 #ap_colorsample {
@@ -51,15 +115,6 @@
 	color: #467B96;
 }
 
-#ap_resetcolor {
-	position: absolute;
-	bottom: 49px;
-	left: 132px;
-	height: 22px;
-	padding-bottom: 2px;
-	margin-bottom: 1.5px;
-}
-
 #ap_themecolor {
 	display: none;
 	width: 134px;

assets/audio-player-admin.js → admin/audio-player-admin.js

@@ -1,37 +1,59 @@
 (function ($) {
 	var fieldSelector,
-		currentKey,
 		colorField,
 		colorPicker,
 		colorSwatch,
+		colorInput,
+		colorDatas,
+		currentKey,
+		color,
 		player;
 
+	//初始化配色组件
 	var init = function () {
-
-		// 配色组件控制
 		fieldSelector = $("#ap_fieldselector");
-		currentKey = fieldSelector.val();
 		colorField = $("#ap_colorvalue");
 		colorPicker = $("#ap_picker-btn");
 		colorSwatch = $("#ap_colorsample");
+		colorInput = $("#ap_colors");
+		colorDatas = $.parseJSON(colorInput.val());
+		currentKey = fieldSelector.val();
+		color = colorDatas[currentKey];
+		updateVals(currentKey, color);
 
+		//菜单项切换事件
 		fieldSelector.change(function () {
 			currentKey = fieldSelector.val();
-			colorField.val(colorDatas[currentKey]);
-			colorPicker.ColorPickerSetColor(colorDatas[currentKey]);
-			colorSwatch.css("background-color", colorDatas[currentKey]);
+			color = colorDatas[currentKey];
+			updateVals(currentKey, color);
 		});
 
+		//手动框输入事件
 		colorField.keyup(function () {
 			var color = colorField.val();
 			if (color.match(/#?[0-9a-f]{6}/i)) {
 				colorDatas[currentKey] = color;
-				colorSwatch.css("background-color", color);
-				colorPicker.ColorPickerSetColor(colorDatas[currentKey]);
+				updateVals(currentKey, color);
+				updatePlayer();
+			}
+		});
+
+		//选色器提交事件
+		colorPicker.ColorPicker({
+			color: color,
+			onChange: function (hsb, hex, rgb) {
+				var color = "#" + hex;
+				colorDatas[currentKey] = color;
+				updateVals(currentKey, color);
 				updatePlayer();
+			},
+
+			onShow: function () {
+				themeColorPicker.hide();
 			}
 		});
 
+		//主题色提交事件
 		var themeColorPicker = $("#ap_themecolor");
 		if (themeColorPicker) {
 			themeColorPicker.css("display", "none");
@@ -49,9 +71,8 @@
 				if (color.length == 4) {
 					color = color.replace(/#(.)(.)(.)/, "#$1$1$2$2$3$3");
 				}
-				colorField.val(color);
 				colorDatas[currentKey] = color;
-				colorSwatch.css("background-color", color);
+				updateVals(currentKey, color);
 				updatePlayer();
 				$("#ap_themecolor").css("display", "none");
 				evt.stopPropagation();
@@ -60,40 +81,50 @@
 				themeColorPicker.hide();
 			});
 		}
-
-		colorPicker.ColorPicker({
-			onChange: function (hsb, hex, rgb) {
-				var color = "#" + hex;
-				colorField.val(color);
-				colorDatas[currentKey] = color;
-				colorSwatch.css("background-color", color);
-				updatePlayer();
-			},
-
-			onShow: function () {
-				themeColorPicker.hide();
-			}
-		});
-
-		selectColorField();
 	}
 
-	var selectColorField = function () {
-		currentKey = fieldSelector.val();
-		colorField.val(colorDatas[currentKey]);
-		colorPicker.ColorPickerSetColor(colorDatas[currentKey]);
-		colorSwatch.css("background-color", colorDatas[currentKey]);
+	//更新html元素预览
+	var updateVals = function (key,color) {
+		colorPicker.ColorPickerSetColor(color);
+		colorField.val(color);
+		colorSwatch.css("background-color", color);
+		switch (key) {
+			case ("bg") :
+			$("span.map_play, span.map_volume").css("border-color", color);
+			break;
+			case ("leftbg") :
+			$(".playerTable span").css("background-color", color);
+			break;
+			case ("lefticon") :
+			$(".playerTable span").not("span.map_title").css("color", color);
+			break;
+			case ("voltrack") :
+			$("span.map_volumeLevel a").css("background-color", color);
+			break;
+			case ("volslider") :
+			$("span.map_volumeLevel a.sel").css("background-color", color);
+			break;
+			case ("text") :
+			$("span.map_title").css("color", color);
+			break;
+			case ("track") :
+			$(".jp-load-bar").css("background-color", color);
+			break;
+			case ("tracker") :
+			$(".jp-play-bar").css("background-color", color);
+			break;
+		}
 	}
 
 	var updatePlayer = function () {
+		//更新json到隐藏域
+		colorInput.val(JSON.stringify(colorDatas));
+		//更新flash预览
 		player = audioplayer_swfobject.getObjectById("ap_demoplayer");
-
-		$.each(colorDatas, function(name,value){
+		$.each(colorDatas, function(name, value){
 			player.SetVariable(name, value.replace("#", ""));
 		});
 		player.SetVariable("setcolors", 1);
-		// 更新json到隐藏域
-		colorInput.val(JSON.stringify(colorDatas));
 	}
 
 	$(init);