💛 メモ帳

doc = document;
Fid = a => typeof(a) == "object" ? a : doc.getElementById(a);
Ftag = (...e) => (e.length > 1 ? Fid(e[0]) : doc).getElementsByTagName(e[e.length - 1]);
Fcn = (...e) => (e.length > 1 ? Fid(e[0]) : doc).getElementsByClassName(e[e.length - 1]);
entry = () =>{
let css = doc.createElement("style");
css.type = "text/css";
css.innerHTML = Fid("piaCssDisp").textContent;
doc.body.append(css);
createPiano();
const o = Fcn("webPia", "loader");
o[0].href = "javascript:chgHost(0)";
o[1].href = "javascript:chgHost(1)";
o[useHost].classList.add("use");
};
piaMouse = false;
isCode = false;
playAuto = false;
isSin = true;

chgHost = n => {
if(n == useHost) return;
useHost = n;
createPiano();
const o = Fcn("webPia", "loader");
o[0].classList.toggle("use");
o[1].classList.toggle("use");
doc.body.classList.remove("mp3");
};

pia = (e, fg, no) => {
if(fg == -1 && piaMouse == false) return;
if(!isCode){
Fid("piaErea").value += e.textContent + " ";
Fid("piaPlayErea").value += no + " ";
}
e.classList.add("pia-act");
const o = e.nextSibling;
if(typeof(o.currentTime) != "undefined") o.currentTime = 0;
o.play();
setTimeout(() => { e.classList.remove("pia-act"); }, 250);
};
mix = e => {
e.classList.add("mix-act")
const o = e.nextSibling;
if(typeof(o.currentTime) != "undefined") o.currentTime = 0;
o.play();
setTimeout(() => { e.classList.remove("mix-act"); }, 500);
};

piaEntry = () => {
Fid("piaErea").value = "";
};
mainWide = o => {
doc.body.classList.toggle("main-wide");
};

piaCode = (obj,n) => {
obj.classList.add("code-act");
Fid("piaErea").value += obj.textContent + " ";
Fid("piaPlayErea").value += n + " ";
const o = Fcn("key");
const b = Fcn("harf");
isCode = true;
for(let i = 0; i != n.length; i++){
n[i] > -1 ? o[n[i]].click(): b[Math.abs(n[i])].click();
}
setTimeout(() => { isCode = false; }, 100);
setTimeout(() => { obj.classList.remove("code-act");}, 500);
};

piaPlay = () => {
playAuto = true;
if(playDAT.length == 0){
isCode = false;
return;
}
const dt = playDAT.shift().split(",");
isSin = dt.length > 1;
isCode = true;
for(let i = 0; i != dt.length; i++){
let a = dt[i];
let o = a > -1 ? Fcn("key")[a] : Fcn("harf")[Math.abs(a)];
o.classList.add("pia-act");
let obj = o.nextSibling;
if(typeof(obj.currentTime) != "undefined") obj.currentTime = 0;
obj.play();
setTimeout(() => { o.classList.remove("pia-act"); }, 250);
}
setTimeout("piaPlay()", isSin ? 250 : 600);
};
mp3Show = job => {
const o = Ftag("piaDisp", "audio");
for(i = 0; i != o.length; i++){
job ? o[i].removeAttribute("controls") : o[i].setAttribute("controls", "");
}
};

piaControl = (o, n, fg) => {
const obj = o.classList;
const job = obj.contains("act");
const par = doc.body.classList;
switch(n) {
case 0 : piaMouse = !piaMouse; break;
case 1 : par.toggle("mp3"); mp3Show(job); break;
case 2 : Fid("piaErea").value = ""; Fid("piaPlayErea").value = ""; break;
case 3 : playDAT = Fid("piaPlayErea").value.replace(/\s+$/, "").split(" ");
piaPlay(); break;
}
obj.toggle("act");
};

createPiano = () => {
let s = "\x3cspan class='harf lt'>\x3c/span>";
psc = "g3 a3 b3 c4 d4 e4 f4 g4 a4 b4 c5 d5 e5 f5 g5".split(" ");
const mp3 = '\x3c/span>\x3caudio preload="auto" src="';
const uri = "http://" +
["nancyan.main.jp/music/pia/", "aratan.iza-yoi.net/piano/"][useHost];
const type = '.mp3" type="audio/mp3">\x3c/audio>';
for(let i = 0; i != 15; i++){
let fg = i == 14;
s += '\x3cspan class="key" onclick="pia(this, 1,' + i + ')" ' +
'onmouseover="pia(this, -1, ' + i + ')">' + psc[i].toUpperCase() +
mp3 + uri + "web-piano-" + psc[i] + type + '\x3cspan class="harf';
s += fg ? ' last">' :
'" onclick="pia(this, 1, -' + (i + 1) + ')" ' +
'onmouseover="pia(this, -1, -' + (i + 1) + ')">' +
psc[i + 1] + mp3 + uri + "web-piano-" +
psc[i + 1].replace(/([a-g])/, "$1-") + type;
}
Fid("piaDisp").innerHTML = s;

Fid("webPia").classList.add("loaded");
Fid("piaInfo").addEventListener("click",mainWide, true);
Fid("piaCon").innerHTML =
`\x3cspan onclick="piaControl(this, 0, 0)">MO\x3c/span>
\x3cspan onclick="piaControl(this, 1, 0)">P3\x3c/span>
`;
Fid("piaCodeDisp").innerHTML = ("3,5,7,9:Cmaj7 4,6,8,10:Dm7 5,7,9,11:Em7 " +
"6,8,10,12:Fmaj7 7,9,11,13:G7 8,10,12,14:Am7 3,5,7:C 4,6,8:Dm 5,7,9:Em " +
"6,8,10:F 7,9,11:G 8,10,12:Am 10,12,14:Bdim ").replace(/([\d\,\-]+):([^\s]+)\s*/g,
'\x3cspan onclick="piaCode(this, [$1])">$2\x3c/span> ');

Fid("mixCode").innerHTML =
"Cmaj7 Dm7 Em7 Fmaj7 G7 Am7 Bm7-5 E7 ".replace(/([\w\-]+) /g,
(e0, e1) => {
return '\x3cspan onclick="mix(this)">' + e1 + mp3 + uri + "web-p-" +
e1.toLowerCase() + '.mp3" type="audio/mp3" controls="">\x3c/audio>';
});

Fid("piaEreaDisp").innerHTML = `
\x3cdiv>\x3cspan onclick="piaControl(this, 2, 1)">クリア\x3c/span>
\x3cspan onclick="piaControl(this, 3, 1)">仮演奏\x3c/span>
\x3ctextarea id="piaErea">\x3c/textarea>\x3c/div>\x3cdiv>
\x3ctextarea id="piaPlayErea">\x3c/textarea>\x3c/div>
`;
};
entry();

#piaPin, #webPia br {
display:none;
}

#piaCon {
text-align:left;
margin-bottom:1rem;
}
#piaCon span {
display:inline-block;
width:3rem;
line-height:3rem;
text-align:center;
border-radius:50%;
border:1px solid #ccc;
cursor:pointer;
margin-right:.25rem;
background-color:snow;
transition:background-color .5s;
}
#piaCon span:hover {
background-color:#ffc;
}
#piaCon span.act {
background-color:#ccf;
}

#piaDisp {
font-size:0px;
text-align:center;
position:relative;
margin-bottom:1rem;
background-color:#666;
transform:scale(0);
border-radius:6px;
transition:transform 1s, font-size 1s;
}
#webPia.loaded #piaDisp {
font-size:1rem;
transform:scale(1);
}
.key {
font-size:80%;
display:inline-block;
border:4px solid #000;
border-radius: 0 0 4px 4px;
line-height:1.5em;
padding-top:10em;
padding-bottom:.5em;
text-align:center;
width:6.5%;
background-color:#fff;
cursor:pointer;
}

.harf {
font-size:80%;
color:lightblue;
position:absolute;
display:inline-block;
border-radius:2px;
padding-top:4em;
padding-bottom:.5em;
text-align:center;
width:4.5%;
background-color:#333;
cursor:pointer;
transform:translate(-50%, 6px);
}

body:not(.mp3) .harf:nth-child(7n+3),
body:not(.mp3) .harf:nth-child(7n+5) {
display:none;
}

.harf:first-child {
width:calc(2.25% - 4px);
height:6.25em;
border-radius:0 2px 2px 0;
transform:translate(4px, 6px);
}
.harf.last {
width:calc(2.25% - 4px);
height:6.25em;
border-radius:2px 0 0 2px;
transform:translate(calc(-100% - 4px), 6px);
}
.key.pia-act {
background-color:#eef;
color:#f00;
}
.harf.pia-act {
background-color:#966;
}
.mp3 #piaDisp {
text-align:left;
padding:.5rem;
width:calc(100% - 6rem);
float:right;
}
.mp3 #piaDisp::after {
content:"";
display:block;
clear:both;
}
.mp3 #piaDisp * {
vertical-align:middle;
}
.mp3 audio {
width:calc(50% - 3rem - 8px);
height:2rem;
border:1px solid #900;
margin:2px;
}
.mp3 .key {
padding-top:0px;
padding-bottom:0px;
width:3rem;
margin:2px;
line-height:2rem;
border:1px solid #000;
border-radius:2px;
}
.mp3 .harf {
position:static;
padding-top:0px;
padding-bottom:0px;
height:2rem;
line-height:2rem;
width:3rem;
border:1px solid #000;
border-radius:2px;
transform:translate(0);
}
.mp3 .harf.lt, .mp3 .harf.last {
display:none;
}



#piaEreaDisp {
transform:scalce(0);
transition:transform .5s;
}
#webPia.loaded #piaDisp {
transform:scale(1);
}

#piaEreaDisp {
margin-top:1rem;
}
#piaEreaDisp textarea {
display:block;
padding:3px;
margin:.5em 0;
width:100%;
height:6em;
}
#piaEreaDisp span {
display:inline-block;
width:5em;
padding:.25em 0;
text-align:center;
border:1px solid #ccc;
box-shadow:2px 2px #ccc;
border-radius:6px;
cursor:pointer;
background-color:#ffefff;
}

#piaCodeDisp span {
display:inline-block;
width:5em;
padding:.25em 0;
text-align:center;
border:1px solid #ccc;
box-shadow:2px 2px #ccc;
border-radius:6px;
cursor:pointer;
background-color:#ffefff;
transform:scale(.97);
transition:color .5s, backgrund-color .5s, box-shadow .4s;
}
body.mp3 #piaCodeDisp {
width:6rem;
}
body.mp3 #piaCodeDisp span {
margin-bottom:.25rem;
font-size:95%;
}
#piaCodeDisp span:hover {
background-color:#ffc;
}
#piaCodeDisp span.code-act {
color:#600;
background-color:#eef;
box-shadow:0 0 1px #ccc inset;
}


body.main-wide #main {
margin-right:1.5rem;
}
body.main-wide #back_link a[target] {
right:80vw; top:80vh;
width:5rem; height:5rem;
}
body.main-wide #back_link a[target]::before {
display:none;
}

#piaInfo {
display:inline-block;
position:fixed; top:17vw; right:1rem;
width:15vw; height:15vw;
border:1px solid #ccc;
border-radius:50%;
box-shadow:0 0 4px #808080 inset;
background-color:#fff;
background-image:url("/home/default/files/yosei_0.gif");
background-position:center center;
background-repeat:no-repeat;
cursor:pointer;
transition:transform .5s, width .5s, height .5s, top .5s, right .5s, background-color .5s;
}
body.main-wide #piaInfo {
top:80vh; right:calc(80vw + 6rem);
width:5rem; height:5rem;
}
#piaInfo:hover {
background-color:#ffc;
transform:rotate(360deg);
}
#mixCode audio {
width:calc(85% - .5rem);
height:2rem;
vertical-align:top;
margin-bottom:2px;
}
#mixCode span {
display:inline-block;
width:14%;
padding-left:.5rem;
margin-right:.5rem;
cursor:pointer;
border:1px solid #808080;
border-radius:3px;
background-color:#ffe;
transition:background-color .4s;
}
#mixCode span:hover {
background-color:#ffc;
}
#mixCode span.mix-act {
background-color:#ccf;
}