STUDY_html_022_E.html
<html> <meta charset="UTF-8"> <style> スタイル </style> <script> すくりぷと </script> <main id="上下アップライト"> <!----A----><div class="ホワイト鍵盤"data-jazz-num="0"><span class="キーボード">z</span></div> <!----B♭----><div class="ブラック鍵盤"data-jazz-num="1"><span class="キーボード">s</span></div> <!----B----><div class="ホワイト鍵盤"data-jazz-num="2"><span class="キーボード">x</span></div> <!----C----><div class="ホワイト鍵盤"data-jazz-num="3"><span class="キーボード">c</span></div> <!----D♭----><div class="ブラック鍵盤"data-jazz-num="4"><span class="キーボード">f</span></div> <!----D----><div class="ホワイト鍵盤"data-jazz-num="5"><span class="キーボード">v</span></div> <!----E♭----><div class="ブラック鍵盤"data-jazz-num="6"><span class="キーボード">g</span></div> <!----E----><div class="ホワイト鍵盤"data-jazz-num="7"><span class="キーボード">b</span></div> <!----F----><div class="ホワイト鍵盤"data-jazz-num="8"><span class="キーボード">n</span></div> <!----G♭----><div class="ブラック鍵盤"data-jazz-num="9"><span class="キーボード">j</span></div> <!----G----><div class="ホワイト鍵盤"data-jazz-num="10"><span class="キーボード">m</span></div> <!----A♭----><div class="ブラック鍵盤"data-jazz-num="11"><span class="キーボード">k</span></div> <!----A----><div class="ホワイト鍵盤"data-jazz-num="12"><span class="キーボード">q<br>,</span></div> <!----B♭----><div class="ブラック鍵盤"data-jazz-num="13"><span class="キーボード">2<br>l</span></div> <!----B----><div class="ホワイト鍵盤"data-jazz-num="14"><span class="キーボード">w<br>.</span></div> <!----C----><div class="ホワイト鍵盤"data-jazz-num="15"><span class="キーボード">e<br>/</span></div> <!----D♭----><div class="ブラック鍵盤"data-jazz-num="16"><span class="キーボード">4<br>:</span></div> <!----D----><div class="ホワイト鍵盤"data-jazz-num="17"><span class="キーボード">r<br>_</span></div> <!----E♭----><div class="ブラック鍵盤"data-jazz-num="18"><span class="キーボード">5</span></div> <!----E----><div class="ホワイト鍵盤"data-jazz-num="19"><span class="キーボード">t</span></div> <!----F----><div class="ホワイト鍵盤"data-jazz-num="20"><span class="キーボード">y</span></div> <!----G♭----><div class="ブラック鍵盤"data-jazz-num="21"><span class="キーボード">7</span></div> <!----G----><div class="ホワイト鍵盤"data-jazz-num="22"><span class="キーボード">u</span></div> <!----A♭----><div class="ブラック鍵盤"data-jazz-num="23"><span class="キーボード">8</span></div> <!----A----><div class="ホワイト鍵盤"data-jazz-num="24"><span class="キーボード">i</span></div> <!----B♭----><div class="ブラック鍵盤"data-jazz-num="25"><span class="キーボード">9</span></div> <!----B----><div class="ホワイト鍵盤"data-jazz-num="26"><span class="キーボード">o</span></div> <!----C----><div class="ホワイト鍵盤"data-jazz-num="27"><span class="キーボード">p</span></div> <!----D♭----><div class="ブラック鍵盤"data-jazz-num="28"><span class="キーボード">-</span></div> <!----D----><div class="ホワイト鍵盤"data-jazz-num="29"><span class="キーボード">@</span></div> <!----E♭----><div class="ブラック鍵盤"data-jazz-num="30"><span class="キーボード">^</span></div> <!----E----><div class="ホワイト鍵盤"data-jazz-num="31"><span class="キーボード">[</span></div> </main> </html>
<style>
#上下アップライト * {box-sizing:border-box;
font-family:"Arial","メイリオ";
user-select:none;}
#上下アップライト{margin:0 auto;
margin-top:40px;
width:924px;
display:flex;}
#上下アップライト>div{position:relative;}
.ホワイト鍵盤{width:46px;
height:220px;
background-color:white;
border:solid 1px black;
border-bottom:solid gray 4px;
box-shadow:0 4px 0 0 #dddddd;
transition:90ms;
color:black;}
.ホワイト鍵盤.押し込み{border-bottom:solid #cccccc 2px;}
.ブラック鍵盤{width:24px;
height:120px;
background:linear-gradient(black 95%,white);
margin-left:-12px;
margin-right:-12px;
z-index:10;
border-bottom:solid black 8px;
border-left:solid black 3px;
border-right:solid black 3px;
box-shadow:2px 2px 2px 2px #aaaaaa;
transition:90ms;
text-align:center;
color:white;}
.ブラック鍵盤.押し込み{border-bottom:solid black 6px;
box-shadow:2px 0px 2px 0 black;
background:linear-gradient(black 99%,white);}
.キーボード{position:absolute;
display:block;
bottom:10px;
text-align:center;
width:100%;}
</style>
<script>
let ふぉるだ="./mp3_30_folder/"
let keyMap=[{割り当て:"z",音名番号:0},{割り当て:"s",音名番号:1},{割り当て:"x",音名番号:2},{割り当て:"c",音名番号:3},{割り当て:"f",音名番号:4},{割り当て:"v",音名番号:5},{割り当て:"g",音名番号:6},{割り当て:"b",音名番号:7},{割り当て:"n",音名番号:8},{割り当て:"j",音名番号:9},{割り当て:"m",音名番号:10},{割り当て:"k",音名番号:11},{割り当て:",",音名番号:12},{割り当て:"q",音名番号:12},{割り当て:"2",音名番号:13},{割り当て:"l",音名番号:13},{割り当て:".",音名番号:14},{割り当て:"w",音名番号:14},{割り当て:"e",音名番号:15},{割り当て:"/",音名番号:15},{割り当て:"4",音名番号:16},{割り当て:":",音名番号:16},{割り当て:"r",音名番号:17},{割り当て:"_",音名番号:17},{割り当て:"5",音名番号:18},{割り当て:"t",音名番号:19},{割り当て:"y",音名番号:20},{割り当て:"7",音名番号:21},{割り当て:"u",音名番号:22},{割り当て:"8",音名番号:23},{割り当て:"i",音名番号:24},{割り当て:"9",音名番号:25},{割り当て:"o",音名番号:26},{割り当て:"p",音名番号:27},{割り当て:"-",音名番号:28},{割り当て:"@",音名番号:29},{割り当て:"^",音名番号:30},{割り当て:"[",音名番号:31}]
let 演奏=[]
let 番号=[]
let 鍵盤名=null
let 指=new Array(32)
指.fill(false)
let たっち=new Array(32)
たっち.fill(null)
let 音色=document.getElementById("上下アップライト")
let 白鍵=document.querySelectorAll(".ホワイト鍵盤")
let 黒鍵=document.querySelectorAll(".ブラック鍵盤")
for(愛=0;愛<=31;愛++)
{let 波=new Audio(ふぉるだ+愛+".mp3")
波.volume=0
演奏.push(波)}
if(window.ontouchstart===null)
{音色.addEventListener("touchstart",function()
{まうす(event)})
音色.addEventListener("touchmove",function()
{まうす(event)})
音色.addEventListener("touchend",function()
{まうす(event)})
音色.addEventListener("touchcancel",function()
{まうす(event)})}
else{音色.addEventListener("mousedown",function()
{くりっく(event)})
音色.addEventListener("mouseup",function()
{くりっく(event)})
window.addEventListener("mousemove",function()
{くりっく(event)})}
function ぴあにすと(横,縦)
{for(let 時=0;時<黒鍵.length;時++)
{let 重さ=黒鍵[時].getBoundingClientRect()
if(横>=window.pageXOffset+重さ.left&&
横<=window.pageXOffset+重さ.right &&
縦>=window.pageYOffset+重さ.top&&
縦<=window.pageYOffset+重さ.bottom)
{return Number(黒鍵[時].dataset.jazzNum)}}
for(let 時=0;時<白鍵.length;時++)
{let 重さ=白鍵[時].getBoundingClientRect()
if(横>=window.pageXOffset+重さ.left&&
横<=window.pageXOffset+重さ.right &&
縦>=window.pageYOffset+重さ.top&&
縦<=window.pageYOffset+重さ.bottom)
{return Number(白鍵[時].dataset.jazzNum)}}
return null}
function まうす(event)
{if(typeof event.cancelable!=='boolean' || event.cancelable)
{event.preventDefault();}
let さんぷる=parse(stringify(番号))
番号.length=0
for(let 愛=0;愛<event.touches.length;愛++)
{let 横=event.touches[愛].pageX
let 縦=event.touches[愛].pageYz
let 旋律=ぴあにすと(横,縦)
if(旋律!==null)
{if(!番号.includes(旋律))
{番号.push(旋律)}}}
for(let 愛=0;愛<番号.length;愛++)
{if(!さんぷる.includes(番号[愛]))
{開放弦(番号[愛])}}
for(let 愛=0;愛<さんぷる.length;愛++)
{if(!番号.includes(さんぷる[愛]))
{手を離す(さんぷる[愛])}}}
function くりっく(event)
{if(event.which!==1){return}
let 横=event.pageX
let 縦=event.pageY
let 旋律
switch(event.type)
{case"mousedown":
旋律=ぴあにすと(横,縦)
if(旋律!==null)
{開放弦(旋律)}
鍵盤名=旋律
break
case"mouseup":
if(鍵盤名!==null)
{旋律=ぴあにすと(横,縦)
if(旋律!==null){手を離す(旋律)}
鍵盤名=null}
break
case"mousemove":
旋律=ぴあにすと(横,縦)
if(旋律!==null)
{if(旋律!==鍵盤名)
{手を離す(鍵盤名)
開放弦(旋律)
鍵盤名=旋律}}
else{手を離す(鍵盤名)
鍵盤名=null}
break}}
document.onkeydown=function(event)
{let 弱音=keyMap.find((練習)=>練習.割り当て===event.key)
if(typeof 弱音!=="undefined")
{開放弦(弱音.音名番号)}}
document.onkeyup =function(event)
{let 弱音=keyMap.find((練習)=>練習.割り当て===event.key)
if(typeof 弱音!=="undefined")
{手を離す(弱音.音名番号)}}
function 開放弦(旋律)
{if(!指[旋律])
{指[旋律]=true
document.querySelector(`[data-jazz-num="${旋律}"]`).classList.add("押し込み")
波Play(旋律)}}
function 手を離す(旋律)
{if(指[旋律])
{指[旋律]=false
document.querySelector(`[data-jazz-num="${旋律}"]`).classList.remove("押し込み")
波Stop(旋律)}}
function 波Play(波Num)
{clearInterval(たっち[波Num])
たっち[波Num]=null
演奏[波Num].volume=1
演奏[波Num].currentTime=0
演奏[波Num].play()}
</script>
sample_STUDY_html_022_E 
サンプル・ダウンロード 
