在线操作:F12中执行即可
function exeObj(obj) {
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();
}
window.eval(jsStr);
}
let firstObj = $($("[class='language-javascript hljs']")[0]);
exeObj(firstObj);
//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>"+" "+(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_ ||";
pianoVoice.js文件
var piano = {};
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