###[√] クリックされたら要素のinnerHTMLに合わせて音を鳴らしたい
やりたいこと
- class="key"の要素がクリックされたら、押された要素自身の直下子要素(今回はdiv)のinnerHTMLを取得し、変数selectedkeyに代入。
- index.htmlからの相対URLが「
"sound/piano" + selectedkey + ".ogg"
」の音を鳴らす。 - 押されている間は鳴らし続ける。
- さらに和音(同時複数入力)対応。
- キーボード入力対応。
現状↓ ここからどうやったら良いのか分からず停滞中
html
1 2<!DOCTYPE html> 3 4<html lang="ja"> 5 6 <head> 7 <meta charset="utf-8"> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 10 <style> 11 12 /*cmn*/ 13 @import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300'); 14 15 *, 16 *::before, 17 *::after{ 18 padding:0; 19 margin: 0; 20 box-sizing: border-box; 21 -webkit-tap-highlight-color:rgba(0,0,0,0); 22 } 23 24 a, 25 a:link, 26 a:visited{ 27 text-decoration: none; 28 margin: 0.1em; 29 border: 1px solid #ddd; 30 } 31 32 li{list-style-type: none;} 33 34 p::before{ content: "\0020\0020"; white-space: pre;} 35 p{word-wrap: break-word;} 36 37 img{ 38 max-width: 100%; 39 pointer-events: none; 40 } 41 42 .typography span{ 43 white-space: pre; 44 } 45 html{ 46 font-size: 17px; 47 } 48 body{ 49 position: relative; 50 width: 100vw; 51 min-height: 100vh; 52 overflow-x: hidden; 53 font-family: 'Roboto Mono', sans-serif; 54 } 55 56 p{ 57 font-size: 15px; 58 margin: 20px 100px; 59 padding: 10px; 60 border: 1px solid #ddd; 61 } 62 63 aside{ 64 margin: 10px 50px; 65 padding: 10px; 66 border: 1px solid #aaa; 67 border-radius: 5px; 68 } 69 70 #keyboard{ 71 position: relative; 72 text-align: center; 73 border: 1px solid #ddd; 74 user-select: none; 75 } 76 77 .key{ 78 position: relative; 79 display: inline-block; 80 width: 50px; 81 height: 240px; 82 border: 1px solid #777; 83 border-radius: 0 0 3px 3px; 84 margin: 10px 1px; 85 cursor: pointer; 86 } 87 .key> div{ 88 position: absolute; 89 left: 0; 90 bottom: 5.5%; 91 width: 100%; 92 text-align: center; 93 border-bottom: 1px solid #777; 94 border-radius: 0 0 3px 3px; 95 } 96 .key:active> div{ 97 bottom: 3.5%; 98 } 99 .black{ 100 position: absolute; 101 top: 0; 102 z-index: 1; 103 margin-left: -25px; 104 color: #fff; 105 height: 150px; 106 background: #555; 107 border: 1px solid #444; 108 } 109 110 </style> 111 112 <title>piano</title> 113 </head> 114 115 <body> 116 117 <h1>piano</h1> 118 <ul id="keyboard"><!-- 119 □ド--><li class="key"><div>C4</div></li><!-- 120 ■ド#--><li class="key black"><div>C#4</div></li><!-- 121 □レ--><li class="key"><div>D4</div><!-- 122 ■レ#--><li class="key black"><div>D#4</div></li><!-- 123 □ミ--><li class="key"><div>E4</div></li><!-- 124 □ファ--><li class="key"><div>F4</div></li><!-- 125 ■ファ#--><li class="key black"><div>F#4</div></li><!-- 126 □ソ--><li class="key"><div>G4</div></li><!-- 127 ■ソ#--><li class="key black"><div>G#4</div></li><!-- 128 □ラ--><li class="key"><div>A4</div></li><!-- 129 ■ラ#--><li class="key black"><div>A#4</div></li><!-- 130 □シ--><li class="key"><div>B4</div></li> 131 </ul> 132 133 <script> 134 //クリック・タップ受付 135 var selectedkey = document.getElementsByClassName('key'); 136 137 selectedkey[0].addEventListener('click', function () { 138 139 audio = new Audio(' '); 140 audio.play(); 141 }, false); 142 143 //キー入力受付 144 function keyInput(event) { 145 var key_event = event || window.event; 146 var key_any = key_event.keyCode; 147 } 148 </script> 149 </body> 150 151</html> 152
質問が多すぎるので分割した方がよいのではないでしょうか。innerHTMLの取得の方法が分からないのであれば、まずそこから始めるべきでしょう。
回答1件
あなたの回答
tips
プレビュー