【H5钢琴示例代码】

在线操作：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.isLoopif(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。autoNextelse 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_ ||";

pianoVoice.js文件

var piano = {};

pianoVoice.js文件下载

1 https://blog.csdn.net/Lgwind2/article/details/125976839

2 https://blog.csdn.net/Lgwind2/article/details/125981506

3 https://blog.csdn.net/Lgwind2/article/details/125981543

4 https://blog.csdn.net/Lgwind2/article/details/125981567

5 https://blog.csdn.net/Lgwind2/article/details/125981585

6 https://blog.csdn.net/Lgwind2/article/details/125981591

7 https://blog.csdn.net/Lgwind2/article/details/125981628

8 https://blog.csdn.net/Lgwind2/article/details/125981643

9 https://blog.csdn.net/Lgwind2/article/details/125981674

91 https://blog.csdn.net/Lgwind2/article/details/125981703

92 https://blog.csdn.net/Lgwind2/article/details/125981721