STUDY_html_021

　　STUDY_html_021_E.html

html
CSS
JavaScript

<html>

<style>　　スタイル　　</style>

<main id="上下アップライト">
<!----A----><div class="ホワイト鍵盤"data-jazz-num="0"></div>
<!----B♭----><div class="ブラック鍵盤"data-jazz-num="1"></div>
<!----B----><div class="ホワイト鍵盤"data-jazz-num="2"></div>
<!----C----><div class="ホワイト鍵盤"data-jazz-num="3"></div>
<!----D♭----><div class="ブラック鍵盤"data-jazz-num="4"></div>
<!----D----><div class="ホワイト鍵盤"data-jazz-num="5"></div>
<!----E♭----><div class="ブラック鍵盤"data-jazz-num="6"></div>
<!----E----><div class="ホワイト鍵盤"data-jazz-num="7"></div>
<!----F----><div class="ホワイト鍵盤"data-jazz-num="8"></div>
<!----G♭----><div class="ブラック鍵盤"data-jazz-num="9"></div>
<!----G----><div class="ホワイト鍵盤"data-jazz-num="10"></div>
<!----A♭----><div class="ブラック鍵盤"data-jazz-num="11"></div>
<!----A----><div class="ホワイト鍵盤"data-jazz-num="12"></div>
<!----B♭----><div class="ブラック鍵盤"data-jazz-num="13"></div>
<!----B----><div class="ホワイト鍵盤"data-jazz-num="14"></div>
<!----C----><div class="ホワイト鍵盤"data-jazz-num="15"></div>
<!----D♭----><div class="ブラック鍵盤"data-jazz-num="16"></div>
<!----D----><div class="ホワイト鍵盤"data-jazz-num="17"></div>
<!----E♭----><div class="ブラック鍵盤"data-jazz-num="18"></div>
<!----E----><div class="ホワイト鍵盤"data-jazz-num="19"></div>
<!----F----><div class="ホワイト鍵盤"data-jazz-num="20"></div>
<!----G♭----><div class="ブラック鍵盤"data-jazz-num="21"></div>
<!----G----><div class="ホワイト鍵盤"data-jazz-num="22"></div>
<!----A♭----><div class="ブラック鍵盤"data-jazz-num="23"></div>
<!----A----><div class="ホワイト鍵盤"data-jazz-num="24"></div>
<!----B♭----><div class="ブラック鍵盤"data-jazz-num="25"></div>
<!----B----><div class="ホワイト鍵盤"data-jazz-num="26"></div>
<!----C----><div class="ホワイト鍵盤"data-jazz-num="27"></div>
<!----D♭----><div class="ブラック鍵盤"data-jazz-num="28"></div>
<!----D----><div class="ホワイト鍵盤"data-jazz-num="29"></div>
<!----E♭----><div class="ブラック鍵盤"data-jazz-num="30"></div>
<!----E----><div class="ホワイト鍵盤"data-jazz-num="31"></div>
</main>

</html>


<style>
#上下アップライト * {box-sizing:border-box;}
#上下アップライト{margin:0 auto;
width:924px;
display:flex;}
.ホワイト鍵盤{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;}
.ブラック鍵盤.押し込み{border-bottom:solid black 6px;
box-shadow:2px 0px 2px 0 black;
background:linear-gradient(black 99%,white);}
.キーボード{position:absolute;
display:block;}
</style>


<script>
let ふぉるだ="./▲/"
let 演奏=[]
let 番号=[]
let 鍵盤名=null
let 指=new Array(30)
指.fill(false)
let たっち=new Array(30)
たっち.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 getKeyNum(横,縦)
{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(event.which!==1){return}
let 横=event.pageX
let 縦=event.pageY
let 旋律
switch(event.type)
{case"mousedown":
旋律=getKeyNum(横,縦)
if(旋律!==null){曲名(旋律)}
鍵盤名=旋律
break
case"mouseup":
if(鍵盤名!==null){旋律=getKeyNum(横,縦)
if(旋律!==null){開放弦(旋律)}
鍵盤名=null}}}
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_021_E サンプル・ダウンロード

← Contents

STUDY_html_021_E.html

　　← Contents

　　STUDY_html_021_E.html