押された要素のinnerHTMLを取得して音を鳴らしたい。（タップ/キーボード入力/和音対応）

###[√] クリックされたら要素の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

Lhankor_Mhy

2017/04/28 14:11

質問が多すぎるので分割した方がよいのではないでしょうか。innerHTMLの取得の方法が分からないのであれば、まずそこから始めるべきでしょう。

行動規範の内容に同意します

回答1件

ベストアンサー

キーダウンやマウスダウンで音を鳴らし、
キーアップやマウスアップで音を止めればいいです。

html
1        <script>
2            var sounds = {
3                // sound : audio obj
4                "C4"  : new Audio('音源ファイル'),
5                "C#4" : new Audio('以下同じ'),
6                "D4"  : new Audio(),
7                "D#4" : new Audio(),
8                "E4"  : new Audio(),
9            };
10
11            //クリック・タップ受付
12            document.getElementById('keyboard').addEventListener('mousedown', function(event) {
13                var sound = event.target.innerText;
14
15                if (sound in sounds) {
16                    sounds[sound].currentTime = 0;
17                    sounds[sound].play();
18                }
19            });
20
21            document.getElementById('keyboard').addEventListener('mouseup', function(event) {
22                var sound = event.target.innerText;
23
24                if (sound in sounds) {
25                    sounds[sound].pause();
26                }
27            });
28
29            //キー入力受付
30            var charSoundBinders = {
31                // key : sound
32                "z" : "C4",
33                "s" : "C#4",
34                "x" : "D4",
35                "d" : "D#4",
36                "c" : "E4",
37            };
38
39            document.onkeydown = function (event) {
40                var sound = charSoundBinders[String.fromCharCode(event.keyCode).toLowerCase()];
41                if (sound in sounds) {
42                    sounds[sound].currentTime = 0;
43                    sounds[sound].play();
44                }
45            };
46            document.onkeyup = function (event) {
47                var sound = charSoundBinders[String.fromCharCode(event.keyCode).toLowerCase()];
48                if (sound in sounds) {
49                    sounds[sound].pause();
50                }             
51            };     
52        </script>