この記事は Shanon Advent Calendar 2015 の 1日目の記事です。
というわけで、12月になり、今年も技術アドベントカレンダーの季節となりましたね！
munepom ( @__munepom__ ) です。
昨年は Qiita でちょっと小ネタを投稿しただけですが、今年はシャノンの技術ブログで小ネタを投稿し続けようと目論んでいます。
とはいいましても。。。
業務の合間にネタを作る時間がなかなか取れない現状ですので、
本日は会社ブログ初投稿記事で作ったキーボードを弾いてお楽しみください。
（キーボードを叩いても音が出る場合があるので、気をつけてください！！！）
キーボード (KeyBoard) #2
- Chrome or Firefox or Safari ブラウザで動作するはずです。
- 鍵盤をクリックするか、表示されている文字に対応するキーボードのキーを押すと、音が鳴ります。
- もし、音が鳴りっぱなしになったりした場合は、画面を更新 (リロード) してください。
(Please reload if ringing...) - Firefoxブラウザでは、音の終わりにプチプチ音が発生します...
表示オクターブ数 (Displayed Octave):
基底オクターブ (一番左のキーのオクターブ) (Octave of Left Key):
波形選択:
音量:
S
D
G
H
J
3
4
6
7
8
0
Z
X
C
V
B
N
M
W
E
R
T
Y
U
I
O
P
以前作ったキーボードにちょっと色付ければいいや、というつもりが、思わぬハマりどころもありました。
Firefox ブラウザの SVG 要素に対しては、element.style.fill ではなく、element.CSS2Properties.fill なるプロパティで要素の色を変更しないと、音が鳴らなくなるとは。。。
JavaScript もなかなか奥深いですねw
（事前に作成しておいた Oscillator 以外のソースは blogger で書き殴ったものなので、見るに堪えないレベルかもです。ご容赦を。。。）
Enjoy!
