【H5钢琴示例代码】

Lgwind233

已于 2022-07-26 08:25:36 修改

阅读量2.7k

点赞数 2

文章标签： java javascript 开发语言

于 2022-07-26 07:06:24 首次发布

本文链接：https://blog.csdn.net/lgwind2/article/details/122381648

版权

在线操作：F12中执行即可


//draw.js
let drawObj = $("[class='language-javascript hljs']")[2];
exeObj(drawObj);
//voice.js
let voiceObj = $("[class='language-javascript hljs']")[3];
exeObj(voiceObj);
//play.js
let playObj = $("[class='language-javascript hljs']")[4];
exeObj(playObj);
//music.js
let musicObj = $("[class='language-javascript hljs']")[5];
exeObj(musicObj);
//piano-ogg.js文件
let piano_oggObj = $("[class='language-javascript hljs']")[6];
exeObj(piano_oggObj, null, true);

/**
 * 执行相关代码
 */
function exeObj(obj, tag, tag2) {
	let dealObj = $(obj).find("li");
	let jsStr = "";
	for(let i=0; i<dealObj.length; i++){
		let tempObj = dealObj[i];
		let text = $(tempObj).text();
		jsStr += text+"\n";
	}
	if(dealObj.length==0){
		jsStr = $(obj).text();
	}
	if(tag=="css"){
		$("body").append('<style type="text/css">'+jsStr+'</style>');
	}else{
		if(tag2){
			jsStr = jsStr.replaceAll(/#/ig,"/");
		}
		window.eval(jsStr);
	}
}

//生成div
{
	$("body").append('<div id="lgwind"><div id="tMain">a</div><div id="main"></div><div id="sMain"></div><div id="music"></div><div id="lyric" class="scrollBar"></div><div id="create" class="crollBar" contenteditable="true"></div><div id="exeCreate" class="mBtn" >执行</div></div>');
	$("#lgwind").css({
		"position" : "absolute",
		"top" : "0px",
		"left" : "0px",
		"width" : "1368px",
		"height" : "665px",
		"background" : "#fff",
		"zIndex" : "900",
		"border" : "6px solid #555",
	});
}

//index.css
let indexCssObj = $("[class='language-css hljs']")[0];
exeObj(indexCssObj, "css");
//index.js
let inxexJsObj = $("[class='language-javascript hljs']")[1];
exeObj(inxexJsObj);


function findPiano(urlStr, func) {
	let iframe = document.createElement('iframe');
    iframe.src = urlStr;
	$("body").append(iframe);
    iframe.onload = function () {
		//后续操作
		let piano1Obj =$(iframe.contentWindow.document).find("code");
		exeObj(piano1Obj, null, true);
		if(func){
			func()
		};
	};
}

var pianoURL = [
	//piano1
	"https://blog.csdn.net/Lgwind2/article/details/125976839",
	//piano2
	"https://blog.csdn.net/Lgwind2/article/details/125981506",
	//piano3
	"https://blog.csdn.net/Lgwind2/article/details/125981543",
	//piano4
	"https://blog.csdn.net/Lgwind2/article/details/125981567",
	//piano5
	"https://blog.csdn.net/Lgwind2/article/details/125981585",
	//piano6
	"https://blog.csdn.net/Lgwind2/article/details/125981591",
	//piano7
	"https://blog.csdn.net/Lgwind2/article/details/125981628",
	//piano8
	"https://blog.csdn.net/Lgwind2/article/details/125981643",
	//piano9
	"https://blog.csdn.net/Lgwind2/article/details/125981674",
	//piano91
	"https://blog.csdn.net/Lgwind2/article/details/125981703",
	//piano92
	"https://blog.csdn.net/Lgwind2/article/details/125981721",
];

function dealPiano() {
	let urlStr = pianoURL.shift();
	findPiano(urlStr, function(){
		if(pianoURL.length>0){
			dealPiano();
		}else{
			getPiano();
		}
	});
}
dealPiano();
function getPiano(){
	$.extend(piano, piano1, piano2, piano3, piano4, piano5, piano6, piano7, piano8, piano9, piano91, piano92);
	voice.data=[];
	alert("音频加载成功");
	$("iframe").hide();
}

$(window).on("contextmenu", function(){ 
	let obj = $("#lgwind");
	if(obj.is(":hidden")){
		obj.show();
	}else{
		obj.hide();
	}
	return false;
});

效果展示图

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>H5piano</title>
		<link rel="stylesheet" href="index.css" />
		<script src='https://code.jquery.com/jquery-3.0.0.min.js'></script>
		<script src='js/draw.js'></script>
		<script src='js/voice.js'></script>
		<script src='js/play.js'></script>
		<script src='js/music.js'></script>
		<script src='js/pianoVoice.js'></script>
	</head>
	<body>
		<div id="tMain">a</div>
		<div id="main"></div>
		<div id="sMain"></div>
		<div id="music"></div>
		<div id="lyric" class='scrollBar'></div>
		<div id="create" class='scrollBar' contenteditable="true"></div>
		<div id="exeCreate" class='mBtn' >执行</div>
	</body>
	<script src='index.js'></script>
	<!--<script src='js/piano-ogg2.js'></script>-->
</html>

index.js

//# sourceURL=index.js

$(function(){	
	$play.loadState();	
	$draw.drawWhiteBtn();
	$draw.drawBlackBtn();
	$draw.drawMusicList();
	//显示按钮状态
	$draw.showBtnState();
});

index.css

/*所有元素*/
* { 
	padding: 0;
	margin: 0;
	font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;  
}

#tMain {
	position:absolute;
	width: calc(81.48% - 2px);
	left: calc(9% - 1px);
	top : calc(9% - 46px);
    height: 40px;
    line-height: 40px;
    background: #000;
    box-shadow: inset 0 -1px 2px hsla(0,0%,100%,.4), 0 2px 3px rgba(0,0,0,.4);
    border-color: #555 #222 #111 #777;
    border-style: solid;
    border-width: 3px 2px 2px;
    z-index: 100;
    color : #dbd8d8;
    text-align: center;
}

#main, #sMain {
	position:absolute;
	width: 82%;
	left: 9%;
	top: 9%;
    z-index: 100;
}

.whiteBtn {
	display: inline-block;
    position: relative;
	width: calc(2.76% - 2px);
	height: 217.778px;
	max-height: 100%;
    margin: 0 auto;
    background: #fff;
    background: linear-gradient(-30deg,#f5f5f5,#fff);
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #fff, inset 1px 0 0 #fff, inset -1px 0 0 #fff, 0 4px 3px rgba(0,0,0,.7);
    border-radius: 0 0 5px 5px;
    border: 1px solid #ccc;
    background-repeat: no-repeat;
    box-sizing: inherit;
    text-align: center;
    vertical-align: bottom;
    cursor: pointer;
    z-index: 200;
}
.whiteBtn:hover {
    border-radius: 0 0 0px 0px;
    border: 1px solid #FFEBCD;
    box-shadow: inset 0 2px 0 #FFEBCD, inset 0 -2px 0 #FFEBCD, inset 2px 0 0 #FFEBCD, inset -2px 0 0 #FFEBCD, 0 4px 3px rgba(0,0,0,.7);	
}

.whiteBtn span {
	display: block;
    position: relative;
	top: 69%;
	user-select: none;
}

.blackBtn {
	display: inline-block;
    position: absolute;
	width: calc(1.99% - 3px);
	height: 139.66px;
	/*max-height: 35%;*/
    background: linear-gradient(-20deg,#333,#000,#333);
    border-color: #666 #222 #111 #555;
    border-style: solid;
    border-width: 1px 2px 7px;
    border-radius: 0 0 2px 2px;
    box-shadow: inset 0 -1px 2px hsla(0,0%,100%,.4), 0 2px 3px rgba(0,0,0,.4);
    top: 0;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    z-index: 300;
}

.blackBtn:hover {
	box-shadow: inset 0 0 7px 0 #87cefa;
}

.blackBtn span {
	color : #fff;
	display: block;
    position: relative;
	top: 71%;
	font-size: 6px;
	user-select: none;
}

#music #listTitle, #lyric, #create {
	position: absolute;
	top : 48%;
	left: 9%;
	height: 6%;
	width: 20%;	
    border: 1px solid #ccc;
    border-radius: 5px;
    background: linear-gradient(-30deg,#f5f5f5,#fff);
    padding: 0px 20px;
}

#music #listTitle span {
	display: inline-block;
	line-height:100%;
	height : 100%;
    font-size: 24px;
	margin-left: 10px;
	margin-top: 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#music #list {
	position: absolute;
	top : 55%;
	left: 9%;
	height: 35%;
	width: 20%;
    background: linear-gradient(-30deg,#f5f5f5,#fff);
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px 20px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.scrollBar {	
    overflow-y: auto;
    overflow-x: hidden;
}
.scrollBar::-webkit-scrollbar{
  	background-color: #E9E9E9;
   	width: 8px;
}
.scrollBar::-webkit-scrollbar-thumb{
	background-color: #b3d2e4;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
.scrollBar::-webkit-scrollbar-track-piece{
  	/*background-color: red;*/
  	background-color: #f1f1f1;
  	-webkit-border-radius: 2em;
  	-moz-border-radius: 2em;
  	border-radius: 2em;
}

#music #list .music {
    cursor: pointer;
}

#music #list .num {
	display: inline-block;    
    width: 35px;
    height: 30px;
    font-size: 16px;
    margin-left: -15px;
    text-align: center;
    color: #ff5252;
}

#music #list .name {  
	display: inline-block;
    height: 30px;
    max-width: 50%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#music #list .name:hover {
	color: cornflowerblue;
}

#mBtn {	
	position: absolute;
	top : 48%;
	left: 55%;
}

#lyric {
	left: 33%;
    overflow-y: auto;
    /*overflow-x: scroll;*/
    margin-left: 4px;
    padding : 6px 15px;
	height: 43.33%;
	width: 18%;
	word-wrap: break-word;
	word-break: break-all;
}
#lyric span {
	display: inline-block;	
}

.scoreWord {
	min-width: 16px;
	height : 28px;
	text-align: center;
}
.scoreWord2 {
	/*min-width: 10px;*/
	height : 28px;
	text-align: center;
}
.scoreWordL{
	/*min-width: 14px;*/
	height : 28px;
	text-align: center;
	margin-left: 3px;
}
.scoreWordR{
	/*min-width: 19px;*/
	height : 28px;
	text-align: center;
	margin-right: 3px;
}
.hasBlace {
	height : 28px;
	text-align: center;
	margin-left: 5.5px;
}

.scoreLeftTop {	
	position : absolute;
	margin-left : -6px;
	font-size: 6px;
}
.scoreBottom {
	position : absolute;
	margin-left : -10.5px;
	margin-top: 18px;
	font-size: 6px;	
	height: 1px;
	width: 12px;
	border-bottom: 1px solid green;
}
.scoreBottom2 {
	position : absolute;
	margin-left : -10.5px;
	margin-top: 19px;
	font-size: 6px;	
	height: 1px;
	width: 12px;
	border-top: 1px solid green;
	border-bottom: 1px solid green;
	
}
.scoreAdd {
	position : absolute;
	margin-left : -5px;
	margin-top: 0px;
	font-size: 6px;	
	height: 1px;
	width: 2px;
	border-top: 2px solid red;	
}
.scoreAdd2 {
	position : absolute;
	margin-left : -5px;
	margin-top: -3px;
	font-size: 6px;	
	height: 1px;
	width: 2px;
	border-top: 2px solid red;	
	border-bottom: 2px solid red;	
}
.scoreAdd3 {
	position : absolute;
	margin-left : -5px;
	margin-top: -3px;
	font-size: 6px;	
	height: 1px;
	width: 2px;
	border-top: 2px solid red;	
	border-bottom: 2px solid red;
}
.scoreSub {
	position : absolute;
	margin-left : -5px;
	margin-top: 21px;
	font-size: 6px;	
	height: 1px;
	width: 2px;
	border-top: 2px solid blue;
}
.scoreSub2 {
	position : absolute;
	margin-left : -5px;
	margin-top: 21px;
	font-size: 6px;	
	height: 1px;
	width: 2px;
	border-top: 2px solid blue;
	border-bottom: 2px solid blue;
}
.scoreSub3 {
	position : absolute;
	margin-left : -5px;
	margin-top: 21px;
	font-size: 6px;	
	height: 1px;
	width: 2px;
	border-top: 2px solid blue;
	border-bottom: 2px solid blue;
}
.scoreSpilt {
	padding: 0px 5px;
}
.scoreSpot {
	position : absolute;
	margin-left : 16px;
	font-size: 6px;
}


#create {
	top : 71%;
	left: 55%;
	width: 25.45%;
    margin-left: 4px;
    padding : 6px 15px;	
    height : auto;
    min-height: 135px;
    /*height : 20.45%;*/
	word-wrap: break-word;
	word-break: break-all;
    overflow-y: auto;
    font-size: 14px;
    /*overflow-x: scroll;*/
}

#exeCreate {
	position: absolute;
	top : 70.5%;
	left: 83.1%;
	/*width: 5%;*/
	width : auto;
    padding : 50px 15px;	
    /*height : 7.32%;*/	
    height : auto;
    min-height: 46px;
    max-height: 135px;
}

.mBtn {
	display: inline-block;
	/*height: 30px;*/
	width: 133px;	
	max-width: 40%;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: linear-gradient(-30deg,#f5f5f5,#fff);
    font-size: 30px;
    padding: 20px 10px 20px 10px;
    margin: 4px;
    text-align: center;
    cursor:pointer;
	user-select: none;
	color : #666;
}

.mBtn:hover, .mLBtn span:hover {
	color : #b53939 !important;
}

.mLBtn {
	display: block;
	height: 16px;
	width: 100%;	
    font-size: 16px;
}
.mLBtn span {
	margin-left: 3px;
	margin-right: 20px;
    cursor:pointer;
	/*user-select: none;*/
}

.mLBtn .volume {
	margin-right: 4px;	
}
.mLBtn meter {
	display: inline-block;
	width: 110.8px;
	height: 8px;	
	margin-bottom: 5px;
	border-radius: 5px;
	background: #FFF;
	cursor: pointer;
	user-select: none;
}

.mLBtn meter::-webkit-meter-optimum-value {
	background: linear-gradient(to bottom, #FFD700, #FFA500);
}
/*meter::-webkit-meter-bar {
background: #FFF;
}
meter::-webkit-meter-optimum-value {
background: linear-gradient(to bottom, #62c462, #51a351);
}
meter::-webkit-meter-suboptimum-value {
background: linear-gradient(to bottom, #fbb450, #f89406);
}
meter::-webkit-meter-even-less-good-value {
background: linear-gradient(to bottom, #ee5f5b, #bd362f);
}*/

#musicTime {
	display: block;
	margin-top: 10px;
	margin-left: 3px;
	width:483px;
	height: 6px;
	cursor: pointer;
}

#time, #mName {
	display: inline-block;
	font-size: 12px;
	color : #aaa;
}

#mName {
	float : right;
	margin-right: 2px;
}

draw.js文件

//# sourceURL=draw.js
var draw = {
	//鼠标是否处于按下状态
	isPressKey : false,
	//是否是88键
	isKey88 : true,
}, $draw = draw;
var keyDic = {}, $keyDic=keyDic;
var scoreDic = { "=":"0",".":"۰", "-":"-", "~":"~"}, $scoreDic=scoreDic;

/**
 * 改成88键 - 白键
 * @param {Object} keyNumName
 * @param {Object} keyName
 * @param {Object} keyOnName
 */
draw.dealWhiteKey88 = function(keyNumName, keyName, keyOnName){
	var keyNumNameTemp = [
		"6….",  "7….",
		"1…",  "2…",  "3…",  "4…",  "5…",  "6…",  "7…",
		"1..", "2..", "3..", "4..", "5..", "6..", "7..",
		"1.",  "2.",  "3.",  "4.",  "5.",  "6.",  "7.",
		"1",   "2",   "3",   "4",   "5",   "6",   "7",
		"1'",  "2'",  "3'",  "4'",  "5'",  "6'",  "7'",
		"1\"", "2\"", "3\"", "4\"", "5\"", "6\"", "7\"",
		"1\"'", "2\"'", "3\"'", "4\"'", "5\"'", "6\"'", "7\"'",
		"1\"\"",
	];
	var keyNameTemp = [
		"A0", "B0",
		"C1", "D1", "E1", "F1", "G1", "A1", "B1",
		"C2", "D2", "E2", "F2", "G2", "A2", "B2",
		"C3", "D3", "E3", "F3", "G3", "A3", "B3",
		"C4", "D4", "E4", "F4", "G4", "A4", "B4",
		"C5", "D5", "E5", "F5", "G5", "A5", "B5",
		"C6", "D6", "E6", "F6", "G6", "A6", "B6",
		"C7", "D7", "E7", "F7", "G7", "A7", "B7",
		"C8",
	];
	var keyOnNameTemp = [
		"#w", "#e",
		"#r","#t","#y","#u","#i","#o","#p",
		"1", "2", "3", "4", "5", "6", "7",
		"8", "9", "0", "q", "w", "e", "r",
		"t", "y", "u", "i", "o", "p", "a",
		"s", "d", "f", "g", "h", "j", "k",
		"l", 'z', "x", "c", "v", "b", "n",
		"m","#a","#s","#d","#f","#g","#h",
		"#j",
	];
	//添加数据
	for(var i=0; i<keyNumNameTemp.length; i++) {
		keyNumName.push(keyNumNameTemp[i]);
	}
	//添加数据
	for(var i=0; i<keyNameTemp.length; i++) {
		keyName.push(keyNameTemp[i]);
	}
	//添加数据
	for(var i=0; i<keyOnNameTemp.length; i++) {
		keyOnName.push(keyOnNameTemp[i]);
	}
	
};

/**
 * 画白色按钮-36个
 */
draw.drawWhiteBtn = function() {
	var keyNumName = [
		"1..", "2..", "3..", "4..", "5..", "6..", "7..",
		"1.",  "2.",  "3.",  "4.",  "5.",  "6.",  "7.",
		"1",   "2",   "3",   "4",   "5",   "6",   "7",
		"1'",  "2'",  "3'",  "4'",  "5'",  "6'",  "7'",
		"1\"", "2\"", "3\"", "4\"", "5\"", "6\"", "7\"",
		"1\"'",
	];
	var keyName = [
		"C2", "D2", "E2", "F2", "G2", "A2", "B2",
		"C3", "D3", "E3", "F3", "G3", "A3", "B3",
		"C4", "D4", "E4", "F4", "G4", "A4", "B4",
		"C5", "D5", "E5", "F5", "G5", "A5", "B5",
		"C6", "D6", "E6", "F6", "G6", "A6", "B6",
		"C7",
	];
	var keyOnName = [
		"1", "2", "3", "4", "5", "6", "7",
		"8", "9", "0", "q", "w", "e", "r",
		"t", "y", "u", "i", "o", "p", "a",
		"s", "d", "f", "g", "h", "j", "k",
		"l", 'z', "x", "c", "v", "b", "n",
		"m",
	];
	if($draw.isKey88) {
		keyNumName=[]; keyName=[]; keyOnName=[];
		draw.dealWhiteKey88(keyNumName, keyName, keyOnName);
	}
	$("#main").html("");
	for(var i=0; i<keyName.length; i++) {
		var htmlStr = "<div id='key_"+keyName[i]
					+"' class='whiteBtn'></div>";
		//添加白色钢琴按钮
		$("#main").append(htmlStr);
		//保存字典
		$keyDic[keyName[i]] = keyOnName[i];
		$keyDic[keyOnName[i]] = keyName[i];
		$scoreDic[keyOnName[i]] = keyNumName[i];
		//添加按键提示
		var id = "key_"+keyName[i];
		$("#"+id).attr("key", keyName[i]);
		$("#"+id).attr("on", keyOnName[i]);
		$("#"+id).append("<span>"+keyOnName[i]+"</span>");
		$("#"+id).append("<span>"+keyName[i]+"</span>");
		$("#"+id).append("<span>"+keyNumName[i]+"</span>");
		//鼠标按下时，播放音乐，修改样式
		$("#"+id).on("mousedown", function(){
			var keyName = $(this).attr("key");
			$voice.playKeyVoice(keyName);
			$(this).css({
				"background": "#fbb957",
				"border-radius": "0 0 0px 0px",
				"border" : "1px solid #FFEBCD",				
			});
		});
		//鼠标移入时，若鼠标为按下状态，则视为按下鼠标
		$("#"+id).on("mouseenter", function(){
			//若鼠标处于按下状态，则视为按下按钮
			if($draw.isPressKey) {
				$(this).trigger("mousedown");
			}
		});
		//鼠标松开时，样式复原
		$("#"+id).on("mouseup", function(){					
			$(this).trigger("mouseleave");
		});
		//鼠标移出时，样式复原
		$("#"+id).on("mouseleave", function(){
			$(this).css({
				"background": "linear-gradient(-30deg,#f5f5f5,#fff)",
			    "border-radius": "0 0 5px 5px",
			    "border" : "1px solid #ccc",
			});
		});
	}
	if($draw.isKey88) {		
		$("#tMain").css({
			"width" : "calc(99.62% - 2px)",
			"left" : "calc(0% + 1px)",
		});
		$("#main").css({
			"width" : "99.73%",
			"left" : "0.3%",
		});
		$(".whiteBtn").css({
			"width" : "calc(1.916% - 2px)",
		});
	}else{
		$("#tMain").css({
			"width" : "calc(81.48% - 2px)",
			"left" : "calc(9% - 1px)",
		});
		$("#main").css({
			"width" : "82%",
			"left" : "9%",
		});
		$(".whiteBtn").css({
			"width" : "calc(2.76% - 2px)",
		});		
	}
}

/**
 * 改成88键 - 黑键
 * @param {Object} keyName
 * @param {Object} keyOnName
 */
draw.dealBlackKey88 = function(keyNumName, keyName, keyOnName){
	var keyNumNameTemp = [
		"6….", "",
		"1…",  "2…",  "", "4…",  "5…",  "6…",  "",
		"1..", "2..", "", "4..", "5..", "6..", "",
		"1.",  "2.",  "", "4.",  "5.",  "6.",  "",
		"1",   "2",   "", "4",   "5",   "6",   "",
		"1'",  "2'",  "", "4'",  "5'",  "6'",  "",
		"1\"", "2\"", "", "4\"", "5\"", "6\"", "",
		"1\"'","2\"'","", "4\"'","5\"'","6\"'", "",
	];
	var keyNameTemp = [
		"As0", "",
		"Cs1", "Ds1", "", "Fs1", "Gs1", "As1", "",
		"Cs2", "Ds2", "", "Fs2", "Gs2", "As2", "",
		"Cs3", "Ds3", "", "Fs3", "Gs3", "As3", "",
		"Cs4", "Ds4", "", "Fs4", "Gs4", "As4", "",
		"Cs5", "Ds5", "", "Fs5", "Gs5", "As5", "",
		"Cs6", "Ds6", "", "Fs6", "Gs6", "As6", "",
		"Cs7", "Ds7", "", "Fs7", "Gs7", "As7", "",
	];
	var keyOnNameTemp = [
		"#W", "",
		"#R","TT","","#U","#I","#O", "",
		"!", "@", "", "$", "%", "^", "",
		"*", "(", "", "Q", "W", "E", "",
		"T", "Y", "", "I", "O", "P", "",
		"S", "D", "", "G", "H", "J", "",
		"L", 'Z', "", "C", "V", "B", "",
		"M", "#A","", "#D","#F","#G", "",
	];
	//添加数据
	for(var i=0; i<keyNumNameTemp.length; i++) {
		keyNumName.push(keyNumNameTemp[i]);
	}
	//添加数据
	for(var i=0; i<keyNameTemp.length; i++) {
		keyName.push(keyNameTemp[i]);
	}
	//添加数据
	for(var i=0; i<keyOnNameTemp.length; i++) {
		keyOnName.push(keyOnNameTemp[i]);
	}
};

/**
 * 画黑键
 */
draw.drawBlackBtn = function() {
	var keyNumName = [
		"1..", "2..", "", "4..", "5..", "6..", "",
		"1.",  "2.",  "", "4.",  "5.",  "6.",  "",
		"1",   "2",   "", "4",   "5",   "6",   "",
		"1'",  "2'",  "", "4'",  "5'",  "6'",  "",
		"1\"", "2\"", "", "4\"", "5\"", "6\"", "",
	];
	var keyName = [
		"Cs2", "Ds2", "", "Fs2", "Gs2", "As2", "",
		"Cs3", "Ds3", "", "Fs3", "Gs3", "As3", "",
		"Cs4", "Ds4", "", "Fs4", "Gs4", "As4", "",
		"Cs5", "Ds5", "", "Fs5", "Gs5", "As5", "",
		"Cs6", "Ds6", "", "Fs6", "Gs6", "As6", "",
	];
	var keyOnName = [
		"!", "@", "", "$", "%", "^", "",
		"*", "(", "", "Q", "W", "E", "",
		"T", "Y", "", "I", "O", "P", "",
		"S", "D", "", "G", "H", "J", "",
		"L", 'Z', "", "C", "V", "B", "",
	];
	if($draw.isKey88) {
		keyNumName=[]; keyName=[]; keyOnName=[];
		draw.dealBlackKey88(keyNumName, keyName, keyOnName);
	}
	$("#sMain").html("");
	for(var i=0; i<keyName.length; i++) {
		if(keyName[i]!="") {
			var htmlStr = "<div id='skey_"+keyName[i]
						+"' class='blackBtn'></div>";
			//添加黑色钢琴按钮
			$("#sMain").append(htmlStr);
			//保存字典
			$keyDic[keyName[i]] = keyOnName[i];
			$keyDic[keyOnName[i]] = keyName[i];
			$scoreDic[keyOnName[i]] = "##"+keyNumName[i];
			//添加按键提示
			var id = "skey_"+keyName[i];
			$("#"+id).attr("key", keyName[i]);
			$("#"+id).attr("on", keyOnName[i]);;
			$("#"+id).append("<span>"+keyOnName[i]+"</span>");
			$("#"+id).append("<span>"+keyName[i].replace(/s/ig,"")+"</span>");
			//当鼠标按下时，播放音乐，并修改样式
			$("#"+id).on("mousedown", function(){
				var keyName = $(this).attr("key");
				$voice.playKeyVoice(keyName);	
				$(this).css("background", "#a93030");
			});
			//当鼠标移入时，若处于按下状态，则视为按下鼠标
			$("#"+id).on("mouseenter", function(){
				if($draw.isPressKey) {
					$(this).trigger("mousedown");
//					var keyName = $(this).attr("key");
//					$voice.playKeyVoice(keyName);	
//					$(this).css("background", "#a93030");
				}
			});
			//当鼠标松开时，样式复原
			$("#"+id).on("mouseup", function(){
				$(this).trigger("mouseleave");	
			});
			//当鼠标移出时，样式复原
			$("#"+id).on("mouseleave", function(){
				$(this).css("background", "linear-gradient(-20deg,#333,#000,#333)");	
			});
			//调整位置
			var margin = $("#sMain").offset().left;
			var left = $("#key_"+keyName[i].replace(/s/ig,"")).offset().left-margin;
			var margin2 = $("#key_"+keyName[i].replace(/s/ig,"")).width();
			var margin3 = $("#skey_"+keyName[i]).width();
			$("#skey_"+keyName[i]).css("left", left+margin2-margin3/2+"px");
		}
	}
	//当鼠标按下时，保存鼠标的按下状态
	$("#tMain").unbind("dblclick");
	$("#tMain").on("dblclick", function(){
		$draw.isKey88 = !$draw.isKey88;
		if($draw.isKey88) {
			$voice.volume += 0.5;
		}else{
			$voice.volume -= 0.5;
		}
		$voice.data = {};
		$draw.drawWhiteBtn();
		$draw.drawBlackBtn();
		$draw.drawMusicList();
	});
	$(window).unbind("mousedown");
	$(window).unbind("mouseup");
	//当鼠标按下时，保存鼠标的按下状态
	$(window).on("mousedown", function(){
		$draw.isPressKey = true;
	});
	//当鼠标松开时，取消保存鼠标的按下状态
	$(window).on("mouseup", function(){
		$draw.isPressKey = false;
	});
}

/**
 * 画音乐列表
 */
draw.drawMusicList = function() {
	$("#music").html("");
	$("#music").append("<div id='listTitle'><span>乐曲</span></div>");
	$("#music").append("<div id='list' class='scrollBar'></div>");
	var num = 1;
	for(var key in $play.music) {
		var id = "m_"+key;
		var htmlStr = "<div id='"+id+"' class='music'></div>";
		$("#music #list").append(htmlStr);
		$("#"+id).append("<span class='num'>"+(num++)+"</span");
		$("#"+id).append("<span class='name'>"+key+"</span");
		$("#"+id).attr("music", key);
		$("#"+id).on("click", function() {
			var music = $(this).attr("music");
			if(music!=$play.playMusicName) {
				$draw.playNewMusic(music);
			}else{
				$("#play").click();				
			}
		});
	}
	$("#music").append("<div id='mBtn'></div>");
	//播放按钮
	$("#music #mBtn").append("<div id='play' class='mBtn'>播放</div>");
	$("#music #mBtn").append("<div id='last' class='mBtn'>上一首</div>");
	$("#music #mBtn").append("<div id='next' class='mBtn'>下一首</div>");
	//播放次级按钮
	$("#music #mBtn").append("<div class='mLBtn'></div>");
	$("#music #mBtn .mLBtn").append("<span class='loop'>☑ 列表循环</span>");
	$("#music #mBtn .mLBtn").append("<span class='autoNext'>☑ 自动下一首</span>");
	$("#music #mBtn .mLBtn").append("<span class='autoNow'>☑ 单曲循环</span>");
	$("#music #mBtn .mLBtn").append("<span class='volume'>音量</span>");
	$("#music #mBtn .mLBtn").append("<meter value='5' min='0' max='100'></meter>");
	//播放进度条
	$("#music #mBtn").append("<meter id='musicTime' value='5' min='0' max='100'></meter>");
	$("#music #mBtn").append("<div id='time'>0/0</div>");
	$("#music #mBtn").append("<div id='mName'></div>");
	//显示按钮状态
	$draw.showBtnState();
	//音量控制
	$(".mLBtn meter").on("click", function(e){
		var x = e.offsetX;
		var left = $(".mLBtn meter").offset().left;
		var width = $(".mLBtn meter").outerWidth();
		var value = (x)/width*100;
		//console.log(e.offsetX);
		$(".mLBtn meter").attr("value", value);
		$voice.volume = parseInt($(".mLBtn meter").attr("value"))/100;
	});
	//音乐进度条控制
	$("#musicTime").on("click", function(e){
		var x = e.offsetX;
		var left = $("#musicTime").offset().left;
		var width = $("#musicTime").outerWidth();
		var value = (x)/width*100;
		$("#musicTime").attr("value", value);
		var data = parseInt(parseInt($("#musicTime").attr("value"))/100*$play.taskNum);
		var taskNum = $play.hTask.length;
		if(data>taskNum) {
			for(var i=0; i<data-taskNum && $play.task.length>0; i++) {
				var task = $play.task.shift();
				$play.hTask.push(task);
			}
		}else{
			for(var i=0; i<taskNum-data && $play.hTask.length>0; i++) {
				var task = $play.hTask.pop();
				$play.task.unshift(task);
			}
			$(".keyShow").css("color", "#000");
		}
	});
	//乐谱
	$("#listTitle").on("dblclick", function(){
		var url_is = "https://www.autopiano.cn/";
		window.open(url_is, '_blank');
	});
	//歌词
	$("#lyric").on("dblclick", function() {
		$play.isAutoMoveLyric = !$play.isAutoMoveLyric;
	});
	//播放
	$("#play").on("click", function(){
		$play.isPlay = !$play.isPlay;
		if($play.isPlay && $play.task.length==0) {
			if($play.playMusicName=="") {
				$("#next").click();
			}
			$draw.playNewMusic($play.playMusicName, true);
		}
		//显示按钮状态
		$draw.showBtnState();
	});
	//上一首
	$("#last").on("click", function(){
    	var lastKey = null;
    	for(var key in $play.music) {
    		if(key == $play.playMusicName) {
				$draw.playNewMusic(lastKey);
    			break;
    		}
    		lastKey = key;
    	}
	});
	//下一首
	$("#next").on("click", function(){
		var isPlay = false;
    	if($play.playMusicName=="") {
    		isPlay = true;
    	}
    	for(var key in $play.music) {
    		if(isPlay) {
				$draw.playNewMusic(key);
    			isPlay = false;
    			break;
    		}
    		if(key == $play.playMusicName) {
    			isPlay = true;
    		}
    	}
    	//循环播放 $play.isLoop
    	if(isPlay && $play.isLoop) {
	    	$play.playMusicName="";
	    	$(this).click();
	    }
	});
	//列表循环
	$("#mBtn .loop").on("click", function(){
		$play.isLoop = !$play.isLoop;
		//显示按钮状态
		$draw.showBtnState();
	});
	//自动播放
	$("#mBtn .autoNext").on("click", function(){
		$play.autoNext = !$play.autoNext;
		//显示按钮状态
		$draw.showBtnState();	
	});
	//列表循环
	$("#mBtn .autoNow").on("click", function(){
		$play.isAutoNow = !$play.isAutoNow;
		//显示按钮状态 
		$draw.showBtnState();
	});
	//执行自创作
	$("#exeCreate").on("click", function() {
		var music = "自定义";
		$play.music[music] = $("#create").text();
		$draw.playNewMusic(music);
	});
};

/**
 * 展示按钮状态
 */
draw.showBtnState = function() {
	if(!$play.isPlay) {
		$("#play").text("播放");
		$("#play").css("color", "#666")
	}else{
		$("#play").text("暂停");		
		$("#play").css("color", "#c14e4e")	
	}
	if($play.isLoop) {
		$(".loop").text("☑ 列表循环");
		$(".loop").css("color", "#c14e4e");
	}else{
		$(".loop").text("☐ 列表循环");	
		$(".loop").css("color", "#000");		
	}		
	if($play.autoNext) {
		$(".autoNext").text("☑  自动下一首");
		$(".autoNext").css("color", "#c14e4e");
	}else{
		$(".autoNext").text("☐  自动下一首");	
		$(".autoNext").css("color", "#000");		
	}		
	if($play.isAutoNow) {
		$(".autoNow").text("☑  单曲循环");
		$(".autoNow").css("color", "#c14e4e");
	}else{
		$(".autoNow").text("☐  单曲循环");	
		$(".autoNow").css("color", "#000");		
	}
	
	if($("#lyric").text()=="") {		
		//展示歌词
		$draw.showLyric($play.playMusicName);
	}
	//音量显示
	$(".mLBtn meter").attr("value", $voice.volume*100);			
}

/**
 * 播放音乐
 * @param {Object} music
 */
draw.playNewMusic = function(music, canNow) {
	if(music!=$play.playMusicName || music=="自定义" || canNow) {
		$play.createTask(music);
		if(!$play.isPlay) {
			console.log("test");
			$("#play").click();
		}
		//展示歌词
		$draw.showLyric(music);
	}	
}

draw.showLyric = function(music) {
	if(!music) return;
	var score = "<br>乐谱：<br>"+$play.getScore(music);
	var lyric = "<br>音谱：<br>" +$play.music[music];
	lyric = lyric.replace(/\|\|/ig, "<br>");
	//展示歌词
	$("#lyric").html(music+score+lyric);
	$("#lyric").scrollTop(0);	
	//自动移动歌曲位置
	var moveObj = $("#m_"+music);
	if(moveObj.length>0) {
		var moveTop = moveObj.offset().top-8;
		var listTop = $("#list").offset().top;
		var listHeight = $("#list").height();
		var nowTop = $("#list").scrollTop();
		if(moveTop<listTop || moveTop> listTop+listHeight) {
			$("#list").scrollTop(nowTop+(moveTop-listTop));
		}
	} 
}

/*
 * 键盘事件
 */
document.onkeydown=function(event){
	var e = event || window.event || arguments.callee.caller.arguments[0];
	if(!e) return;
	var keyEnter = e.key;
	if(e.keyCode==13 && e.ctrlKey){ // ctrl+Enter
		$("#exeCreate").click();
	}else if(e.altKey) {
		if(e.key!="Alt") {
			$play.click("#"+e.key, true, true);
		}
	}else if(keyEnter.length==1) {
		$play.click(e.key, false, true);
	}
	//按钮控制
	if(e.ctrlKey) {
		if(e.keyCode == 32) { //空格
			$("#play").click();
		}else if(e.keyCode == 37) {//←
			//上一首
			$("#last").click();			
		}else if(e.keyCode == 39) {//→
			//下一首
			$("#next").click();			
		}
	}
	if(e.altKey) {
		return false;
	}
}

document.onkeyup=function(event){
	var e = event || window.event || arguments.callee.caller.arguments[0];
	if(!e) return;
	var keyEnter = e.key;
	if(keyEnter.length==1) {
		//按键样式复原
		$(".blackBtn").css("background", "linear-gradient(-20deg,#333,#000,#333)");
		$(".whiteBtn").css("background", "linear-gradient(-30deg,#f5f5f5,#fff)");
	}
}

voice.js文件

//# sourceURL=voice.js
var voice = {
	volume : 1,
	data : {},
}, $voice=voice;

/** 音频缓存上限 */
voice.saveMax = 400;

/**
 * 寻找一个音频
 * @param {Object} voiceName 声音文件名
 */
voice.findAudioElement = function(voiceName) {
	var result =false;
	for(var i=0; i<$voice.saveMax; i++) {
		var voiceNameTemp = voiceName + (i?("_"+i):"");
		var voiceObj = voice.data[voiceNameTemp];
		if(voiceObj && voiceObj.paused) {
			voiceObj.volume = voice.volume;
			voiceObj.play();
			result = true;
			break;
			//break;
		}else if(!voiceObj) {
			//break;
		}
	}
	return result;
};

/**
 * 添加一个音频并缓存
 * @param {Object} voiceName 声音文件名
 * @param {Object} voicePath 声音文件路径
 */
voice.addAudioElement = function(voiceName, voicePath) {
	for(var i=0; i<$voice.saveMax; i++) {
		var voiceNameTemp = voiceName + (i?("_"+i):"");
		var voiceObj = voice.data[voiceNameTemp];
		if(!voiceObj) {
			//创造并播放新的音频
			var audioElement = $voice.createAudioElement(voiceName, voicePath);
			voice.data[voiceNameTemp] = audioElement;
			break;
		}
	}
};

/**
 * 新建一个音频
 * @param {Object} voicePath 声音文件名
 * @param {Object} voicePath 声音文件路径
 */
voice.createAudioElement = function(voiceName, voicePath) {
	var audioElement = document.createElement('audio');
	//若是声音字符串
	if($voice.isVoiceStr) {
		//将声音字符串转为声音文件
		voicePath = voice.getVoiceByStr(voiceName);
	}
   	audioElement.setAttribute('src', voicePath);
    audioElement.setAttribute('autoplay', 'autoplay'); //打开自动播放
	//$.get();
	audioElement.addEventListener("load", function() {
		//第一次加载时会自动播放，所有不需要继续播放
		//audioElement.play();
	}, true);
	//音量调整
	if(audioElement.volume!=voice.volume) {
		audioElement.volume = voice.volume;
	}
	return audioElement;
};

/**
 * 声音字符串转声音文件
 * @param {Object} key 声音字符串文件名
 */
voice.getVoiceByStr = function(key) {
	if(key.indexOf("s")!=-1) {
		key = key.replace(/Cs/ig, "Db");
		key = key.replace(/Ds/ig, "Eb");
		key = key.replace(/Fs/ig, "Gb");
		key = key.replace(/Gs/ig, "Ab");
		key = key.replace(/As/ig, "Bb");
		
	}
	var data = piano[key];
	//var data = MIDI.Soundfont.acoustic_grand_piano[key];
	if(!data) {
		//出现异常
		debugger;
		return key;
	}
	var index = data.indexOf(",")+1;
	data=data.substring(index);
	var bufs = base64toBlob(data);
	var sblod = new Blob([bufs]);//bufs为二进制
    var voicePath = window.URL.createObjectURL(sblod);
    return voicePath; 
    /**
     * 字符串转二进制码
     * @param {Object} base64
     */
    function base64toBlob(base64) {
	    var bstr = atob(base64); // 获得base64解码后的字符串
	    var bstrAdd = "";
	    for(var i=0; i<bstr.length; i++) {
	    	bstrAdd+=bstr[i];
	    }
	    var n = bstrAdd.length;
	    var u8arr = new Uint8Array(n); // 新建一个8位的整数类型数组，用来存放ASCII编码的字符串
	    while (n--) {
	    	var code = bstrAdd.charCodeAt(n)
	    	if(code!=0) {
	    		//debugger;
	    	}
	    	u8arr[n] = code; // 转换编码后才使用charCodeAt 找到Unicode编码
	    }
	    return u8arr;
	}
};

/**
 * 播放声音
 * @param {Object} voiceName 声音缓存名字
 * @param {Object} voicePath 声音文件路径
 */
voice.playVoice = function(voiceName, voicePath) {
	//音量控制范围
	if(voice.volume<0) {
		voice.volume=0;
	}else if(voice.volume>1){
		voice.volume=1;
	}
	try{
		//寻找缓存的音频并播放
		var canFind = $voice.findAudioElement(voiceName);
		if(!canFind) {
			//找不到缓存则新增缓存
			$voice.addAudioElement(voiceName, voicePath);
		}	
	}catch(e) {
		console.error("voiceName:"+voiceName);
		console.error(e);
	}	
};

/**
 * 播放系统声音
 * @param {Object} name
 */
voice.playKeyVoice = function(name) {
	var vName = name;
	if(name.length==1) {
		vName = $keyDic[name];
	}
	var path = "voice"
	//使用88键钢琴
	if($draw.isKey88) {
		//使用声音字符串文件
		$voice.isVoiceStr = true;
		if(!$voice.isVoiceStr) {
			//调整键名
			var nameNum = parseInt(vName.replace(/[^\d]/g, ''))-1;
			vName = vName.replace(/\d+/g,'')+nameNum;
			//使用小写
			vName = vName.toLocaleLowerCase();
			path =  "voice88";
		}
	}
	var voicePath =  "resource/"+path+"/" + vName+".mp3";
	voice.playVoice(vName, voicePath);
}

play.js文件

//# sourceURL=play.js
var play = {
	num : 0,
	//历史任务
	hTask : [],
	//任务
	task : [],
	//任务长度
	taskNum : 0,
	//是否播放
	isPlay : false,
	//自动播放下一首
	autoNext : true,
	//列表循环
	isLoop : true,
	//单曲循环
	isAutoNow : true,
	//正在播放的音乐
	playMusicName : "",
	//是否自动移动歌词
	isAutoMoveLyric : true,
	//音乐
	music : {},
}, $play=play;

/**
 * 根据字符串生成任务
 * @param {Object} str
 */
play.createTask = function(str) {
	if(!str) return;
	var name = str;
	str = $play.music[str];	
	str = str.replace(/<br>/ig, "");
	str = str.replace(/<div>/ig, "");
	str = str.replace(/<\/div>/ig, "");
	$play.task=[];
	$play.hTask = [];
	var isAdd = true;
	var task = "";
	for(var i=0; i<str.length; i++) {
		//去除中文
		if(/.*[\u4e00-\u9fa5]+.*$/.test(str[i])) {
			continue;
		}
		if(str[i]=="_" || str[i].trim()=="" || str[i]=="|"){
			continue;
		}
		task += str[i];
		if(str[i]=="#") {
			continue;
		}else if(str[i]=="[" || str[i]=="{"){
			isAdd = false;
		}else if(str[i]=="]" || str[i]=="}"){
			isAdd = true;
		}		
		if(isAdd) {
			if(task=="~" || task=="-") {//延音符		
				$play.task.push(task);
			}else if(task=="=") {//休止符 0 	
				$play.task.push(task);
			}else{
				$play.task.push(task);
			}			
			if(i>=0 && i<str.length-2) {
				if(str[i+1]=="_" && str[i+2]=="_") {//十六分分音符					
				}else if(str[i+1]=="_"||str[i]==".") {//八分音符、附点音符
					$play.task.push("");
				}else{//四分音符
					$play.task.push("");
					$play.task.push("");
					$play.task.push("");			
				}
			}else if(i<str.length-1){
				if(str[i+1]=="_"||str[i]==".") {//八分音符
					$play.task.push("");
				}else{//四分音符
					$play.task.push("");
					$play.task.push("");
					$play.task.push("");			
				}
			}else{
				$play.task.push("");
				$play.task.push("");
				$play.task.push("");
			}
			task = "";
		}
	}
	$play.taskNum = $play.task.length;
	$play.playMusicName = name;
};

/**
 * 执行任务
 */
play.exeTask = function() {
	//按钮样式复原计数
	for(var key in $play.clickKey) {
		var value = $play.clickKey[key];
		if(value>0) {
			$play.clickKey[key]--;
		}
	}
	//获取任务
	var task = $play.task.shift();
	$play.hTask.push(task);
	if(!task) {
		return;
	}
	var keyName = null;
	if(task.length==1) {
		keyName = task;
	}else if(task.length==2 && task[0]=="#") {
		keyName = task;
	}else if(task.length>1) {
		var left = task.indexOf("[");
		if(left==-1) {
			left = task.indexOf("{");
		}
		var right = task.indexOf("]");
		if(right==-1) {
			right = task.indexOf("}");
		}
		if(left<right) {
			keyName = task.substring(left+1, right);
		}
	}
	{
		//打印音符
		var dicStr = $scoreDic[keyName];
		var keyNameShow = keyName;
		if(keyName.length>1 && !(task.length==2 && task[0]=="#")) {
			dicStr = "";
			for(var i=0; i<keyName.length; i++) {
				var keyNameTemp = keyName[i];
				if(keyNameTemp=="[" || keyNameTemp=="]" 
					|| keyNameTemp=="{" || keyNameTemp=="}") {
					dicStr += keyNameTemp;
				}else{
					if(i>0&&keyName[i-1]=="#") {
						keyNameTemp = "#"+keyNameTemp;
					}
					var dicTemp = $scoreDic[keyNameTemp];
					dicStr += dicTemp?dicTemp:"";					
				}
			}
			keyNameShow = "["+keyNameShow+"]";
			dicStr = "["+dicStr+"]";			
		}else{
			dicStr = dicStr?dicStr:"";
		}
		var tKey = $("#tMain").attr("key");
		var tVoice = $("#tMain").attr("voice");
		if(!tKey) tKey=""; if(!tVoice) tVoice="";
		dicStr = dicStr.replace(/##/ig,"#");
		$("#tMain").html((tKey+"<span style='color:#fbb957'>"+keyNameShow)+"</span>"+"&nbsp;&nbsp;"+(tVoice+"<span style='color:#fbb957'>"+dicStr+"</span>"));
		//console.log(keyName+" "+dicStr);
		var maxLength = 20;
		if(tKey.length>maxLength) {
			tKey = tKey.substring(tKey.length-maxLength);
		}
		if(tVoice.length>maxLength) {			
			tVoice = tVoice.substring(tVoice.length-maxLength);
		}
		$("#tMain").attr("key", tKey+=keyNameShow);
		$("#tMain").attr("voice", tVoice+=dicStr);
	}
	$play.click(keyName);
}

/**
 * 播放钢琴
 * @param {Object} keyName  按键1
 * @param {Object} isOne 是否是单键
 * @param {Object} isWait 是否等待20毫秒执行
 * @param {Object} isNotRecover 是否不复原按键样式 
 */
play.click = function(keyName, isOne, isWait) {
	//按钮样式复原
	{
		if(isOne) {
			var tempKey = $keyDic[keyName];
			tempKey = toneChange(tempKey);
			if(tempKey) {	
				//复原将要按下的按钮
				$play.clickKey[tempKey] = 0;
			}
		}else{
			var tempKey = "";
			for(var i=0; i<keyName.length; i++) {
				tempKey += keyName[i];
				if(tempKey=="#") {
					continue;
				}
				tempKey = $keyDic[tempKey];
				tempKey = toneChange(tempKey);
				if(tempKey) {
					//复原将要按下的按钮
					$play.clickKey[tempKey] = 0;
				}
				tempKey = "";
			}
		}	
		for(var key in $play.clickKey) {
			var value = $play.clickKey[key];
			if(value<=0 && value>-9) {
				$play.clickKey[key]=-9;
				$(".blackBtn[key="+key+"]").trigger("mouseup");
				$(".whiteBtn[key="+key+"]").trigger("mouseup");		
			}
		}
	}
	if(!keyName || keyName=="-" || keyName=="~") return;	
	if(!isWait) {
		//按键样式复原
		//$(".blackBtn").css("background", "linear-gradient(-20deg,#333,#000,#333)");
		//$(".whiteBtn").css("background", "linear-gradient(-30deg,#f5f5f5,#fff)");
		setTimeout(function() {
			play.click(keyName, isOne, true);
		}, 20);
		return;
	}
	if(isOne) {
		var tempKey = $keyDic[keyName];
		tempKey = toneChange(tempKey);
		if(tempKey) {
			$(".blackBtn[key="+tempKey+"]").trigger("mousedown");
			$(".whiteBtn[key="+tempKey+"]").trigger("mousedown");	
			//记录按下的按钮
			$play.clickKey[tempKey] = 2;
			if($play.task.length>3) {
				var taskNum = $play.task.length;
				if($play.task[0]=="" 
					&& play.task[1]=="" 
					&& play.task[2]=="" ) {
					$play.clickKey[tempKey] = 4;					
				}
			}
		}
	}else{
		var tempKey = "";
		for(var i=0; i<keyName.length; i++) {
			tempKey += keyName[i];
			if(tempKey=="#") {
				continue;
			}
			tempKey = $keyDic[tempKey];
			tempKey = toneChange(tempKey);
			if(tempKey) {
				$(".blackBtn[key="+tempKey+"]").trigger("mousedown");
				$(".whiteBtn[key="+tempKey+"]").trigger("mousedown");
				//记录按下的按钮
				$play.clickKey[tempKey] = 2;
				if($play.task.length>3) {
					var taskNum = $play.task.length;
					if($play.task[0]=="" 
						&& play.task[1]=="" 
						&& play.task[2]=="" ) {
						$play.clickKey[tempKey] = 4;					
					}
				}
			}
			tempKey = "";
		}
	}	
	//防触碰
	$draw.isPressKey = false;
	/**
	 * 升降调
	 * @param {Object} keyName
	 */
	function toneChange(keyName) {
		if(!keyName) return keyName;
		//升降调
		var tone = 0;
		var nameNum = parseInt(keyName.replace(/[^\d]/g, ''))+tone;
		keyName = keyName.replace(/\d+/g,'')+nameNum;	
		return keyName;
	}
};
play.clickKey={};

/**
 * 获取乐谱
 */
play.getScore = function(name) {
	var music = $music[name];
	var score = [];
	for(var mNum=0; mNum<music.length; mNum++) {
		var word = music[mNum];
		if(mNum>0) {
			if(music[mNum-1]=="#") {
				word = "#"+word;
			}
		}
		//去除中文
		if(/.*[\u4e00-\u9fa5]+.*$/.test(word)) {
			continue;
		}		
		var sWord = scoreDic[word];
		if(sWord) {
			score.push(sWord);
		}else if(score.length>0) {
			if(word==".") {
				score.push("۰");
			}else if(word=="_") {
				if(score.length>1) {
					if(score[score.length-1]=="]") {
						score[score.length-2] += word;
					}else{
						score[score.length-1] += word;
					}
				}else{
					score[score.length-1] += word;
				}
			}else if(word=="|") {
				if(score[score.length-1]=="|") {
					score[score.length-1] += word;					
				}else{
					score.push(word);
				}
			}
		}
		if(word=="["||word=="]" ||word=="{"||word=="}"
			||word=="="||word=="-") {
			if(!sWord) {
				score.push(word);
			}
		}
	}
	//生成HTML文件
	var scoreHtml = "";
	var lastLittle = false;
	var keyNum=0, lastKeyNum=0;
	var isAddKeyNum=true;
	var waitAddKey = 4;
	for(var sNum=0; sNum<score.length; sNum++) {
		var sWord = score[sNum];
		var isLittle = false;
		if(sWord.indexOf("_")!=-1) {
			isLittle = true;
		}
		if(isLittle&&!lastLittle) {
			lastLittle = true;
		}else if(sWord!="["&&sWord!="]"
			&&sWord!="{"&&sWord!="}"&&sWord!="۰"){
			lastLittle = false;			
		}
		//判断键音长
		if(sWord=="[" || sWord=="{"){
			isAddKeyNum = false;
			waitAddKey = 4;
		}else if(sWord=="]" || sWord=="}"){
			isAddKeyNum = true;
			keyNum+=waitAddKey;
		}else if(sWord=="|" || sWord=="||" || !sWord.trim()){
			//小节线和空格不计算音符
		}else if(isAddKeyNum){
			if(sWord.indexOf("__")!=-1) {
				//十六分音符
				keyNum+=1;
			}else if(sWord.indexOf("_")!=-1 || sWord=="۰") {
				//八分音符和附点音符
				keyNum+=2;
			}else{
				//四分音符
				keyNum+=4;
			}
		}else{//判断括号里的音符长度	
			if(sWord.indexOf("__")!=-1) {
				//十六分音符
				waitAddKey = 1;
			}else if(sWord.indexOf("_")!=-1 || sWord=="۰") {
				//八分音符
				waitAddKey = 2;
			}
		}
		//是否有黑键
		var isHasBlace = false;
		if(sWord.indexOf("##")!=-1) {
			isHasBlace = true;
		}		
		//
		sWord = sWord.replace(/<br>/ig, "||");
		sWord = sWord.replace(/=/ig, "0");
		//高音
		sWord = sWord.replace(/""/ig, "一一一");
		sWord = sWord.replace(/"'/ig, "一一");
		sWord = sWord.replace(/"/ig, "一");
		sWord = sWord.replace(/'/ig, "<span class='scoreAdd'></span>");
		sWord = sWord.replace(/一一一/ig, "<span class='scoreAdd4'></span>");
		sWord = sWord.replace(/一一/ig, "<span class='scoreAdd3'></span>");
		sWord = sWord.replace(/一/ig, "<span class='scoreAdd2'></span>");
		//低音
		sWord = sWord.replace(/…/ig, "<span class='scoreSub3'></span>");
		sWord = sWord.replace(/\.\./ig, "<span class='scoreSub2'></span>");
		sWord = sWord.replace(/\./ig, "<span class='scoreSub'></span>");
		//十六分音符
		sWord = sWord.replace(/__/ig, "<span class='scoreBottom2'></span>");
		//八分音符
		sWord = sWord.replace(/_/ig, "<span class='scoreBottom'></span>");
		//特殊按键
		sWord = sWord.replace(/##/ig, "<span class='scoreLeftTop'>#</span>");
		//特殊符号
		sWord = sWord.replace(/\|\|/ig, "<br>");
		sWord = sWord.replace(/\|/ig, "<span class='scoreSpilt'>|</span>");	
//		sWord = sWord.replace(/\۰/ig, "<span class='scoreSpot'>۰</span>");			
		//音阶
		var keyClass = " key='"+(lastKeyNum==0?"1":lastKeyNum+1)+"'";		
		lastKeyNum = keyNum;
		var wordClass = "";
		if(sWord=="<br>") {
			scoreHtml+=sWord;
		}else if(!isAddKeyNum || sWord=="۰"||sWord=="["||sWord=="]" 
				  || sWord=="{"||sWord=="}") {
			wordClass += "scoreWord2";
		}else if(isLittle&&!lastLittle) {
			wordClass += "scoreWordR";
		}else if(isLittle) {
			wordClass += "scoreWordL";
		}else{
			wordClass += "scoreWord";
		}
		if(isHasBlace) {
			wordClass += " hasBlace";
		}
		scoreHtml+="<span class='"+wordClass+" keyShow'"+keyClass+">" + sWord +"</span>";
	}
	return scoreHtml;
};

/**
 * 保存播放状态
 */
play.saveState = function() {
	var playTemp = {
		task : $play.task,
		hTask : $play.hTask,
		//任务长度
		taskNum : $play.taskNum,
		//是否播放
		isPlay : $play.isPlay,
		//自动播放下一首
		autoNext : $play.autoNext,
		//列表循环
		isLoop : $play.isLoop,
		//单曲循环
		isAutoNow : $play.isAutoNow,
		//正在播放的音乐
		playMusicName : $play.playMusicName,
		//自定义
		doBySelf : $("#create").html(),	
		//音量
		volume : $voice.volume,
		//是否是88键
		isKey88 : $draw.isKey88,
	};
	//保存$play对象
	var tempPlay = JSON.stringify(playTemp);
	var lastPlay = localStorage.getItem("$play");
	if(tempPlay!=lastPlay) {
		localStorage.setItem("$play", tempPlay);
		result = true;
	}
	//console.log("save:"+playTemp.isPlay);
};

/**
 * 加载播放状态
 */
play.loadState = function() {
	var nowPlayTemp = {
		task : $play.task,
		hTask : $play.hTask,
		//任务长度
		taskNum : $play.taskNum,
		//是否播放
		isPlay : $play.isPlay,
		//自动播放下一首
		autoNext : $play.autoNext,
		//列表循环
		isLoop : $play.isLoop,
		//单曲循环
		isAutoNow : $play.isAutoNow,
		//正在播放的音乐
		playMusicName : $play.playMusicName,	
		//自定义
		doBySelf : $("#create").html(),		
		//音量
		volume : $voice.volume,
		//是否是88键
		isKey88 : $draw.isKey88,
	};
	//加载$play对象
	var tempPlay = localStorage.getItem("$play");
	var nowPlay = JSON.stringify(nowPlayTemp);
	if(!tempPlay || tempPlay==nowPlay) {
	}else{
		var oldPlayTemp = JSON.parse(tempPlay);
//		console.log("load:"+oldPlayTemp.isPlay);
//		if(oldPlayTemp.isPlay==false) {
//			debugger;
//		}
		//加载数据
		for(var key in oldPlayTemp) {
			$play[key] = oldPlayTemp[key];
		}	
		//自定义
		$("#create").html(oldPlayTemp["doBySelf"]),
		$music["自定义"] = oldPlayTemp["doBySelf"],
		//音量
		$voice.volume = oldPlayTemp.volume;
		//是否是88键
		$draw.isKey88 = oldPlayTemp.isKey88;
	}
	//加载完成
	$play.isLoad = true;
};

/**
 * 循环动画
 */
window.requestAnimFrame = (function(){
    return  function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / 55);
            } || window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            window.oRequestAnimationFrame      ||
            window.msRequestAnimationFrame;
})();
function animate() {
    requestAnimFrame(animate);
    //未加载完成不执行
    if(!$play.isLoad) return;
    play.num++;
    if(play.num==500) {
    	play.num==0;
    }
    if(play.num%5==0 && $play.isPlay) {
    	play.exeTask();
    	//自动移动歌词
    	var moveData = $play.taskNum-$play.task.length;
    	var moveObj = $(".keyShow[key="+moveData+"]");
    	if(moveObj.length>0 && $play.isAutoMoveLyric) {
    		var moveTop = moveObj.offset().top;
    		var lyricTop = $("#lyric").offset().top;
    		var lyricHeight = $("#lyric").height();
    		var nowTop = $("#lyric").scrollTop();
    		if(moveTop<lyricTop || moveTop>lyricTop+lyricHeight-8.8) {
    			$("#lyric").scrollTop(nowTop+(moveTop-lyricTop-4.8));
    		}
    	} 
    }
    //乐谱变红
    var moveData = $play.taskNum-$play.task.length;
	$(".keyShow[key="+(moveData)+"]").css("color", "red");
	//进度条
    var value = 100;
    if($play.taskNum>0) {
    	var data = $play.taskNum-$play.task.length;
		value = data/$play.taskNum*100; 
    	if($("#musicTime").attr("data")!=data){
		    $("#musicTime").attr("data", data); 
		    $("#musicTime").attr("value", value); 
		    $("#mBtn #time").text(($play.taskNum-$play.task.length)+"/"+$play.taskNum);	
    	}
    	if($play.playMusicName!=$("#mBtn #mName").text()) {
		    $("#mBtn #mName").text($play.playMusicName);
		    $(".music").css("color", "#000000");
		    $("#m_"+$play.playMusicName).css("color", "cornflowerblue");
    	}
    }
    //播放完毕 
    if(value==100) {
    	//暂停
    	if($play.isPlay) {
    		$("#play").click();
    	}
		//单曲循环
		if($play.isAutoNow) {
    		$("#play").click();			
		}
    	//自动下一首 $play。autoNext
    	else if($play.autoNext) {
    		$("#next").click();
    	}
    }
    if(play.num>30 && play.num%30==5) {
    	play.saveState();
    }
}
animate();

music.js文件

//# sourceURL=music.js
var music = {}, $music=music;$play.music = music;

/** 千本樱乐谱  */
music["千本樱"] = "[y4]ue_w_e_w_[y5]ue_w_e_w_[y6]ue_w_e_w_[t6]rew [y4]ue_w_e_w_[y5]ue_w_e_w_[y6]uos[a6]_s_a_p_ou [y4]ue_w_e_w_[y5]ue_w_e_w_[y6]ue_w_e_w_[t6]rew [u4]_y_u_o_p_o_u_y_[t5]_y_u_o_u_y_t_w_[e6].e.w[e6]-";

/** 天空之城  **/
music["天空之城"] = "pas--as-f-a---==u-p--op-s-o---==u-i--ui-p-u---==s-a--II-a-a---==pas-.as-f-a---==u-p--op-s-o---==u-i-sa--s-d-f-s--sap-a-O-p---==";

/** 千与千寻  **/
music["千与千寻"] = "sdfs[hto]--fd-h-d-sp[feu]--sa---sa[p9e]-a-sd[o8w]-s-df[gri]-gfds[dwy]---sdfs[hto]--fd-h-d-sp[feu]--sa---sa[p9e]-a-sd[o8w]-s-df[gri]--fds[sqt]---fg[hto]-h-h-h--jhg[feu]-f-f-f--gfd[sqt]-s-sap-a-as[dwy]-dfdfd---fg[hto]-h-h-h--jhg[feu]-f-f-fgfdsa[p9e]-a-sd[8wo]-s-df[gri]--fds[sqte]---sdfs[hto]--fd-h-d-sp[feu]--sa---sa[p9e]-a-sd[o8w]-s-df[gri]-gfds[dwy]---sdfs[hto]--fd-h-d-sp[feu]--sa---sa[p9e]-a-sd[o8w]-s-df[gri]--fds[sqt]---[80w]";


music["大鱼"] = "uyup uyua uyus a-o  uyup uyua-o-uyup uyua uyus a-o  yue-yuewe-ety-te- ety-tu-uop pouy t-y-u-ety-te- ety-tu-yue-yuewe-uos-au-uyt-tyu-uyt-psapoy u-uos-au-uyt-tyu-yue-yuewe-";


music["黑人抬棺"] = "yy_p_oi | uu_u_oi_u_ | yy_g_f_g_f_g_ | yy_g_f_g_f_g_ | yy_p_oi | uu_u_oi_u_ | yy_g_f_g_f_g_ | yy_g_f_g_f_g_ | i_i_i_i_p_p_p_p_ | o_o_o_o_s_s_s_s_ | d_d_d_d_d_d_d_d_ | d_d_== | o_i_u_t_y";


music["夜的钢琴曲五"] = "pasf[jq]8we  [pt]asf[jw]9er[d9]sas[pe]0wet - e0we[pt]asf[jq]8we  [pt]asf[jw]9er[d9]sas[pe]0wet - e0we[ut]opf[dq]8w[fe][dt]fds[dw]9er[dy]fhf[o0]r0[uw][or]uod[se]0we[pt]asf[jq]8w[fe][ft]dfd[aw]9er[dy]sas[pe]0wtu0wt[se]0we[pt]asf[jq]8we [pt]asf[jw]9er[dy]sds[pe]0wtu0wt[se]0we[pt]asf[jq]8we [pt]asf[jw]9er[dy]sas[pe]0wtu0wt[se]0weuopf[dq]8w[fe][dt][fe][dq]s[dw]9er[dy][fr][hw]f[o0]r0[uw][or]uod[se]0wetyup[pq]to[fp][ft][de][fq]d[aw]9er[dy]sas[pe]0wtu - e0op[st]dfj[jq]8we [st][de][fq]j[jw]9er [sy]dfj[je]0wtu0wt[te]0we tyup[pq]8wetyup[pq]8w[fp][ft][de][fq]h[dw]9er [dy][fr][hw]f[o0]r0[uw][or]uod[se]0we tyup[pq]to[fe][ft]dfd[aw]9er[dy]sas[pe]0wtu0wt[te]0weertu[pq]8w[fe][ft]dfh[dw]9er[dy]s a s[pe] 0wt up d [je] -- ";


//music["霞光"] = "i--|t-o|O.o_i|Y-t|T.t_E|t-W|E.q_E|t-t|i--|t-o|O.o_i|Y-t|T.t_E|tis|P-O|o-t|O-o_i_|osD|g-D|s-s|PsS|s-O|o.y_i|u-t|O-o_i_|osD|g-D|s-s|SsP|sgi|o.y_u|i--|i--|t-o|O.o_i|Y-t|T.t_E|t-W|E.q_E|t-t|i--|t-o|O.o_i|Y-t|T.t_E|tis|P-O|o-t|O-o_i_|osD|g-D|s-s|PsS|s-O|o.y_i|u-t|O-o_i_|osD|g-D|s-s|SsP|sgi|o.y_u|i-s|H-h_g_|hlZ|c-Z|l-l|JlL|l-H|h.d_g|f-s|H-h_g_|hlZ|c-Z|l-l|L.l_J|lcg|h-d|f-h|g--|";


music["霞光"] = "==u|s-a_p_|afh|j-h|f-f||dfg|f-s|a.I_p|O-u|s-a_p_||afh|j-h|f-f|gfd|fjp||a.I_O|p-=||p--|u-a|s.a_p|o-ui.u_y||u-t|y.p_y|u-u|p--|u-a||s.a_p|o-u|i.u_y|upf|d.s_s_a_||a-u|s-a_p_|afh|j-h|f-f||dfg|f-s|a.I_p_O_|O-u|s-a_p_||afh|j-h|f-f|gfd|fjp||a.I_O|p-=|a.I_O|p-u|s-a_p_||afh|j-h|f-f|dfg|f-s||a.I_p|O-u|s-a_p_|afh|j-h||f-f|gfd|fjp|a-I|O-a||p--|p--|";


music["穿越时空的思念"] = "uo[p4]-ps[d5]-fh[f6]-ds[p6]-fd[p4]-fd[p5]-o-[u6]-7-8-0w[e4]-et[y5]-uo[u6]-yt[e6]-uy[e4]-uy[e5]-w-[e6]3678-";

music["起风了"] = "tyut[p4][o8]_[pq]- t_[a5][p9]_[aw]- [a3][p7]_[a0]u[s6]_d_[s0]_a_[pe]o [p4][o8]_[pq]o_p_o_ [p5][o9]_[yw]o [u1]580 [tw]y[u0]t [p4][o8]_[pq]-t_ [a5][p9]_[aw]- [a3][p7]_[a0]u[s6]_d_[s0]_a_[pe]o [p4][f8]_[fq]o[p5][f9]_[fw]o [p6]3680-";


music["世上只有妈妈好"] = "p.o_uo|sp_o_p-|uo_p_ou_y_|t_.e__o_u_y-|y.u_oo_p_|u.y_t-|o.u_y_t_e_t_|w-==|p.o_uo|sp_o_p-|uo_p_ou_y_|t_.e__o_u_y-|y.u_oo_p_|u.y_t-|o.u_y_t_e_t_|w-==|";


//music["练习"] = "自然大调蜜雪冰城:| [u起] o [o强调]. p_ | o u [t强调]. t_ | u u y t | [y听起来不稳定，因为歌曲未结束]--- | u o [o强调]. p_ | o u [t强调]. t_ | u u y y | [t结束，尘埃落定的感觉]--- |小星星：|  [1起] 1 | 5 5 | 6 6 | [5强调]- | 4 4 | 3 3 | 2 2 | [1结束]- |自然小调：坏苹果：| [e起]_ r_ t_ y_ [u强调] p_ o_ | [u强调] e u_ y_ t_ r_ | e_ r_ t_ y_ [u强调] y_ t_ | r_ e_ r_ t_ r_ e_ w_ r_ | == |小星星小调版本：| [e起] e | u u | i i | [u强调]- | y y | t t | r r | [e结束]- |";


music["小星星"] = "[t8]too | [pq]p[o8]- | [iw]i[u8]u | [yw]y[t8]- ||[o8]o[iq]i | [u8]u[yw]- | [o8]o[iq]i | [u8]u[yw]- ||"; 

/** 自定义音乐  */
music["自定义"] = "";


music["错位时空"] = "=-eu|u_y_u_p_ou|o-pt|e_r_t_i_uy|r-te_r_|t_t_t_i_u_ut_|y-u-|er--|=-0u|u_y_u_p_ou|o-pt|e_r_t_i_uy|r-te_r_|t_t_t_i_u_ut_|y-u-|er--|We--";


//play.music["平凡之路"] = "6eut 8qit 8wut rtyw6eut 8qit 8wut rtyw=uup_p_~ tyu_u_~t rtyw=uup_p_~o_o_~i_u_.~t rtyw=uup~tyu~t rtyw=uutii_i_~ut~=[up6]up_p_~tyu_u_~t rtyw=[up]up_p_~o_o_~i_u_.~t rtyw=u_u_up~ t_y_uu~t rtyw=uutii_i_~ut~===opasa_s_~o_pp=oi_u_~uu_i_~yopasa_s_~o_pp=pa_s_~sss_d_~opasa_s_~f.j.hgf~fd~=pas~sd_s_~s_as_d_~sa_s~6eut 8qit 8wut rtyw6eut 8qit 8wut rtyw=uup_p_~ tyu_u_~t rtyw=uup_p_~o_o_~i_u_.~t rtyw=u_u_up~ t_y_uu~t rtyw=uutii_i_~ut~===opasa_s_~o_pp=oi_u_~uu_i_~yopasa_s_~o_pp=pa_s_~sss_d_~opasa_s_~f.j.hgf~fd~=pas~sd_s_~s_as_d_~sa_s~=oa_s_~o_a_sa_s_aooa_s_~s_s_ao_p_aooa_s_~o_a_sa_s_dooa_s_~=_a_~s_dda_s_~s_a_sa_s_aooo_s_~=_s_ao_p_aooa_s_~=_a_sa_s_gfs=_s_d=_d_~f_gfo_s_a_s_ s_s_a_s_s_s_a_s_ aoo_s_a_s_ s_s_a_s_s_s_a_s_ aoo_s_a_s_ s_s_a_s_s_s_a_s_ do_s_a_s_ s_s_s_a_a_s_d_f_ ao=d_f_~ fg_h_jhh-gff =a_s_~.a_sd_f_gfo_s_a_s d_s_o_s_d_f_gf=sss=sds=sssasss=sss=sds=sssasss=sss=sds=sssasss=sss=sds=ssa=opasa_s_~o_pp=oi_u_~uu_i_~yopasa_s_~o_pp=pa_s_~sss_d_~opasa_s_~f.j.hgf~fd~=pas~sd_s_~s_as_d_~sa_s~opasa_s_~o_pp=oi_u_~uu_i_~yopasa_s_~o_pp=pa_s_~sss_d_~opasa_s_~f.j.hgf~fd~=pas~sd_s_~s_as_d_~sa_s~opasa_s_~o_pp=oi_u_~uu_i_~yopasa_s_~o_pp=pa_s_~sss_d_~opasa_s_~f.j.hgf~fd~=pas~sd_s_~s_as_d_~sa_s~~~=uup_p_~tyu_u_~t rtyw=uup_p_~o_o_~i_u_.~t rtyw=u_u_up~ t_t_uu~t rtyw=uutii_i_~ut~~~~";

music["残酷天使的行动纲领"] = "一[pt]sd_s__s_d_|d_d_h_g_f__d_f__f|fhj_d__d_s_|[ha]_h_f_h_||五h_.j__j--|et[yeq]_.t__t_y_|[yrw]_y_o_i_u__y_u__u|[ut]o[piy]_.y__y_t_||九[oyr]_[oyr]_[uyr]_[oyr]_[ou]_.[pu]_[pu]|-s_o__o__o-_s_|s_.d__d_o_o-_o_|f_.g__g_f_d_.s__s_d_||一三f_.g__g_f_p-_p__a__|s_.s__s_a_a-_s__d__|g_.f__f_d_s-_f_|f_.d__d_S_dp|[pIy].a_[aOu]-|-s_o__o__o-_s_|s_.d__d_o_o-_o_|f_.g__g_f_d_.s__s_d_||二一f_.g__g_f_p-_p__a__|s_.s__s_a_a-_s__d__|g_.f__f_d_s-_f_|f_.d__d_S_d_.f__f_g_||二五[fpI][Ou][pi][ao]|[spu]_.s__s_a_s_.s__s_a_|[dao]_.d__d_s_[aou]_.p__p_a_|[spi]_.s__s_a_[dpi]_.a__a_p_||[fao][fs][gd][hf]|[sp]_.[sp]__[sp]_[ao]_[sp]_.[sp]__[sp]_[ao]_|[da]_.[da]__[da]_[sp]_[ao]_.[sp]__[sp]_[fs]|[fap]_.[gap]__[gap]_[fap]_[dap]_.[sp]__[sp]_[dap]_||三三[fdpI]-[faO]_.[Gdp]__[gdp]_[Hfa]_|p[spu]d_.s__s_d_|d_d_h_g_f__d_f__f_|[fs][hfs][jgs]_.d__d_s_||三七a_a_p_a_d__s_s__s|p[spu]d_.s__s_d_|d_d_h_g_f__d_f__f|[fs][hfs][jgs]_.d__d_s_||四一[hda]_[hda]_[fda]_[hda]_[hda]_.[jfs]__[jfs]|p[spu]d_.s__s_d_|d_d_h_g_f__d_f__f|[fs][hfs][jgs]_.d__d_s_||四五[hda]_[hda]_[fda]_[hda]_[hda]_.[jfs]__[jfs]|---=||五二[piut]_[piut]_[piut]_.[piut]__[ue][ye]||五五[py]-[e0][e0]|[ue]-[ue][ye]|[py].o_[or]r||五八[ue].e_uy|[py]--[or]|[aot]---|[aot]---||六二et[yeq]_.t__t_y_|[yrw]_.y_o_i_u__y_u__u_|[ut]o[piy]_.y__y_t_||六五[oyr]_[oyr]_[oyr]_[oyr]_[ou]_.[pu]__[pu]|[hda]_[hda]_[fda]_[hda]_[hda]_.[jfs]__[jfs]|[spu]_.s__s_a_s_.s__s_a_||六八d_.d__d_s_a_.p__p_a_|[spi]_.s__s_a_[dpi]_.a__a_p_|[dao][fs][gd][hf]|[sp]_.[sp]__[sp]_[ao]_[sp]_.[sp]__[sp]_[ao]_||七二[da]_.[da]__[da]_[sp]_[ao]_.[sp]__[sp]_[da]_|[fap]_.[gap]__[gap]_[fap]_[dap]_.[sp]__[sp]_[dap]_|[fdpI]-[faO]_.[Gdp]__[gdp]_[Hfa]_||七五p[spu]d_.s__s_d_|d_d_h_g_f__d_f__f|[fs][hfs][jgs]_.d__d_s_||七八a_a_p_a_d__s_s__s|p[spu][dpi]_.s__s_d_|d_d_h_g_f__d_f__f||八一[fs][hfs][jgs]_.d__d_s_|[hda]_[hda]_[fda]_[hda]_[hda]_.[jfs]__[jfs]|p[spu][dpi]_.s__s_d_||八四d_d_h_g_f__d_f__f|[fs][hfs][jgs]_.d__d_s_|[hda]_[hda]_[fda]_[hda]_[hda]_.[jfs]__[jfs]|";

music["onlyMyRailgun"] = "--=_s_a_o_|o_p__p__p_o_o_p__p__p_o_|o_o__p__p_p_p_a_s_d_||aogd|d_.d__d_f_=_s_a_o_|o_p__p__p_o_p__p__p_o_|o_p__p__p_p_p_a_s_d_||p-p_a_s_d_|a_a__o__o_u_=_s_a_o_|o_p__p__p_o_o_p__p__p_o_||o_p__p__p_p_p_a_s_d_|aogd|d_.d__d_f_=_s_a_o_|o_p__p__p_o_o_p__p__p_o_||o_p__p__p_p_p_a_s_d_|p-p_a_s_d_|[fe]h[fe]-||||--=_s_a_o_|o_p__p__p_o_o_p__p__p_o_|o_o__p__p_p_p_a_s_d_||aogd|d_.d__d_f_=_s_a_o_|o_p__p__p_o_p__p__p_o_|o_p__p__p_p_p_a_s_d_||p-p_a_s_d_|a_a__o__o_u_=_s_a_o_|o_p__p__p_o_o_p__p__p_o_||o_p__p__p_p_p_a_s_d_|aogd|d_.d__d_f_=_s_a_o_|o_p__p__p_o_o_p__p__p_o_||o_p__p__p_p_p_a_s_d_|p-p_a_s_d_|aouo||o_p__p__p_s_a_o__u__u_o_|o_p__p__p--|";

music["卡农"] = "[u8]-[y5]-|[t6]-[r3] | [e4]-[w5]-| [e4]-[r5]- ||[fo8]-[do5]- | [su6]-[au3]- | [pt4]-[ot8]-|[pt4]-[ay5]- ||[fo8]_w_t_u_[do7]_9_[iw]_r_ | [s6]_-0_e_t_[a3]_0_[ow]_r_ | [p4]_8_q_e_[o8]_0_[uw]_t_ | [pi4]_8_q_e_[oy5]_9_[iw]_r_ ||[s8]_[a0]_[sw]_[ut]_[o5]_9_[aw]_r_ | [s6]_0_[fe]_t_[h0]_[f3]_[hw]_[jr]_ | [g4]_[f8]_[dq]_[ge]_[f8]_[d0]_[sw]_[at]_ | [p4]_[i8]_[sq]_e_[a5]_[o9]_[sw]_[ar]_ ||[s8]_[a0]_[sw]_[ut]_[ow]_9_[aw]_r_ | [s6]_0_[fe]_[st]_[h0]_[f0]_[hw]_[jr]_ | [gq]_[f8]_[dq]_[ge]_[f8]_[d0]_[sw]_[at]_ | [p4]_[o8]_[iq]_e_[s5]_9__o__[aw]_[dr]__o__ ||";

music["沧海一声笑"] = "DS_POI- PO_IYT- | TY_TY_IO_PS_DS_P_O_IO ||D[DS]_POI- PO_IYT- |TY_TY_IO_PS_DS_P_O_IO ";

music["aLIEz"] = "[#y30]_w_0_w_Q_7_.7_  | [180]_w_0_w_Q_7_.7_ | [#o60]_w_0_w_Q_7_.7_ | [#p70]_w_0_w_[(Q]_7._7_ ||一五||[30of]_[ah]__Q__[of]_[0ah]_[pG]__r_[ua]__Q_[0ua]_ | [#i5of]_[ah]__Q__[of]_[0ah]_[pG]__r_[ua]__Q_[0ua]_ | [#o6of]_[ah]__Q__[of]_[0ah]_[pG]__r_[ua]__Q_[0ua]_ | [18of]_[ah]__Q__[of]_[0ah]_[29oG]_r__[uIa]_r__[uIa]_ ||二四||37__0_[7r]__r__r_r__7__[0y]_u_ | 1.5__0_[5r]__[1r]__r__1__r__5__[0y]_u_ | 6_r__0__[eu]_[0u]__6_.r__[0r]__[eu]_u_ | [7I]_o__Q__[rI]_[Qo]__7__I__#p__[7y]__7__[ry]__Q__7__7__ ||三四[3af]_7__[0I]__w_[rk]__r__r__3__[7r]__0__[wy]__0__[3u]_ | [1sf]_w__[tG]__[uo]_[Ik]__8_8__[wo]__t__[tu]__w__8_ | [6sf]_0__[eG]__[tu]_[Ik]__6__o__6__[0u]__e__[tI]__e__[6o]_ | [7pf]_[wo]__[rG]__[uo]_[Ik]__7__I__#p__7__[(r]__Q__(__7_ ||四四||[1u]__8__[1y]__8__[0wu]__8__[8o]__[1u]__8__1__[1y]__8__[0wu]__8__[8o]__[8p]__ | [2p]__9__[2o]__9__[Qeo]__9__[9u]__2__[9p]__2__2__[9u]__[Qe]__9__9__9__ | [6u]__0__[6y]__0__[etu]__0__[0o]__[6u]__0__6__[6y]__0__[etu]__0__[0o]__[0I]__ | 5__9__[5y]__9__[wry]__9__[9r]__5__[9I]__5__5__[9y]__[wr]__9__9__9__ ||五四||[1of]__8__[1d]__8__[0wof]__8__[8h]__[1f]__8__1__[1d]__8__[0wof]__8__[8h]__[8pdGj]__ | 2__9__[2h]__9__[Qeph]__9__[9f]__2__[9pdGj]__2__2__[9f]__[Qe]__9__9__9__ | [5a]__9__[5h]__9__[wraG]__9__[9d]__[5f]__9__5__[5h]__9__[wraG]__9__[9f]__[9paG]__ | 6_0__e__r__u__I__a[ak][of]_.3__ ||零一零三||[#yafhk]_0__w__[rudhkz]_[3ak]__0_3__[0afhk]__0__[ru]__[wf]__0__3__ | [#r1afhk]_8__0__[wtdhkz]_[1ak]__8_1__[8afhk]__8__[wt]__[0uf]__8__1__ | [#o6afhk]_6__8__[0esfhl]_[#oak]__6_#o__[6afhk]_6__[0e]__[8uf]__6__#o__ | [#i5pdGj]_[oh]__0__[wrpdGj]_[oh]__0__[#p7afGk]_7__[QuIaf]__r__[Quf]__7__#p__ ||零一一三||[#y3afhk]_0__w__[rudhkz]_[3ak]__0_3__[0afhk]__0__[ru]__[wf]__0__3__ | [#r1afhk]_8__0__[wtdhkz]_[1ak]__8_1__[8afhk]__8__[wt]__[0uf]__8__1__ | [#i5afhk]_0__[wasfhl]_[#iak]__5_#i__[5afhk]__5__[wr]__[0uf]__5__#i__ | [#o6psfj]_[ak]__0__[etpsfj]_[ak]__0__[#p7pdGj]_7__[QrdGjz]_7__[QrafGk]_ ||零一二三||[#y3]_[ro]__0__u__7__[0ro]__7__[wI]_7__[0r]_7__[Qr]__0__ | [18u]_[to]__0__u__8__[0to]__8__[wI]_8__[0r]_8__[Ir]__0__ | [#o6u]_[to]__0__u__6__[0to]__6__[wI]_6__[0r]_6__[Qr]__0__ | [#i5u]_[ro]__0__u__7__[0ro]__7__[#p7I]_7__[0Qr]_7__[0Qr]__7__ ||零一三二||[3of]__0__[Qah]__r__[0of]__Q__[rah]__0__[upG]__r__0__[ruIa]__Q__0__[ra]__0__ |  ";

//music["aLIEz"] = "=_e_p_s_p_s_a__u_.u | p_s_p_s_a__u_.u | p_s_p_s_a__u_.u | p_s_p_s_a__u_.u ||==_u__u__u_u__u__o_p_ | ==_u__u__u_u__u__o_p_ | =_u__u__o_p_=_u__u__o_p_ | a_s_a_s_a_o_o ||==_u__u__u_u__u__o_p_ | =sasp | =p_a_s_p_a_s_ |d_s_s_a_a_.u__u ||p_o_p_s__p__p_o_p__s__d__ | d_s_s_p_d_.p__p | p_o_p_s__p__p_o_p_s__a__ | a_o_o_u_a_.o__o ||p_o_p_s__p__p_o_p_s__d__ | d_s_s_p_d_.p__p | u_s_a_o__p__p_s_a_p_ | a-a_f_f__p_. ||fh_ff_f__p_. | fh_ff_f__p_. | fg_ff_f__p_. | d_s_d_s_f_.p__p_p_ ||fh_ff_f__p_. | fh_ff_f__p_. | f g_ff_f__p_. | d_f_d_f_d_.h__h_f_ ||";
//e.rte_ | u.t_t- | e.0re_ | 0.w_w-||e.rty_ | o.u_u- | e.ruy_ | e.0_0-||e.rty_ | o.u_u- | e.ruy_ | e.0_u__y_s__s_a__s__ ||=_h_dd_.s__s_p_ | =_h_dd_.s__s_p_ | =_h_dd_.s__s_p_ | p_s_p_s_a__u_.u ||=_h_dd_.s__s_p_ | =_h_dd_.s__s_p_ | =_h_dd_.s__s_p_ | p_s_p_s_a__u_.u ||e.rte_ | u.t_t- | e.0re_ | 0.w_w- ||p_s_p_s_a__u_.u | p_s_p_s_a__u_.u | p_s_p_s_a__u_.u | p_s_p_s_a__u_.u_ ||";