・7 min read
キーボードでバイオリンの運指をやりたかった話
はじめまして。djhuguです。
トラックメイクをしながら楽曲を提供などしたりしています。
■バイオリンとフィドルは同じである
さて、みなさまはバイオリンとフィドルの違いをご存知でしょうか？
一説によると、バイオリン弾きはバイオリンよりも重いものを持ったことがない、フィドル弾きはなんでも持っていってしまう、
バイオリン弾きはあの世でフィドルを弾き、フィドル弾きは死んだことに気付かずあの世でも木こりをやっている
なんていう違いがあるそうです。
■運指を練習したいんです
我々エンジニアは業務中には楽器を練習することなんぞできないわけですが、
それでも常に頭の中にはメロディが流れているわけです・・・
これをなんとか、できないものかと。
そんなことを考えていると、キーボードは4列・・・
バイオリンの弦の数は4本・・・
ともすれば、キーボードはバイオリンなのではないか？？？
と考えるのも不思議ではないのではないでしょうか。
<html>
<head>
<meta content="text/html" charset="utf-8"/>
<title>fiddle</title>
<script src="https://cdn.rawgit.com/jashkenas/coffeescript/571e9df3/docs/v2/browser-compiler/coffeescript.js"></script>
<script type="text/coffeescript">
console.log "OK"
</script>
</head>
<body>
<div class="div">
<select id="osctype">
<option>sine</option>
<option>square</option>
<option>sawtooth</option>
<option>triangle</option>
</select><span>←ctrlでもきりかえ</span>
</div>
<div id="playnow"></div>
<script type="text/coffeescript">
AudioContext = window.AudioContext
ac = new AudioContext()
masterGain = ac.createGain()
masterGain.gain.value = 0.05
masterGain.connect(ac.destination)
note = (time, nn, dur)->
acgain = ac.createGain()
acgain.gain.value = 0.5
osc = ac.createOscillator()
osc.type = document.getElementById("osctype").selectedOptions[0].text
freq = 440 * Math.pow(2, (nn - 69) / 12)
osc.frequency.setValueAtTime freq, time
osc.connect acgain
acgain.connect masterGain
osc.start time
osc.stop time + dur
key = (root)->
document.getElementById("playnow").innerText = document.getElementById("playnow").innerText + root.toString()
note(ac.currentTime, root, 0.2)
window.onkeydown = (e)->
console.log e
document.getElementById("playnow").innerText = e.key + ":" + e.code + ":" + e.keyCode + ":" + e.charCode + ":" + e.shiftKey
switch e.code
when "KeyZ" then key(55) # z c
when "KeyX" then key(56) # x c
when "KeyC" then key(57) # c d
when "KeyV" then key(58) # v d
when "KeyB" then key(59) # b e
when "KeyN" then key(60) # n f
when "KeyM" then key(61) # m f
when "Comma" then key(62) # , g
when "Period" then key(63) # . g
when "Slash" then key(64) # / a
when "IntlRo" then key(65) # \ a
when "ShiftRight" then key(66) # shiftR b
when "KeyA" then key(62) # a c
when "KeyS" then key(63) # s c
when "KeyD" then key(64) # d d
when "KeyF" then key(65) # f d
when "KeyG" then key(66) # g e
when "KeyH" then key(67) # h f
when "KeyJ" then key(68) # j f
when "KeyK" then key(69) # k g
when "KeyL" then key(70) # l g
when "Semicolon" then key(71) # ; a
when "Quote" then key(72) # : a
when "Backslash" then key(73) # ] b
when "KeyQ" then key(69) # q
when "KeyW" then key(70) # w
when "KeyE" then key(71) # e
when "KeyR" then key(72) # r
when "KeyT" then key(73) # t
when "KeyY" then key(74) # y
when "KeyU" then key(75) # u
when "KeyI" then key(76) # i
when "KeyO" then key(77) # o
when "KeyP" then key(78) # p
when "BracketLeft" then key(79) # @
when "BracketRight" then key(80) # [
when "Digit1" then key(76) # 1
when "Digit2" then key(77) # 2
when "Digit3" then key(78) # 3
when "Digit4" then key(79) # 4
when "Digit5" then key(80) # 5
when "Digit6" then key(81) # 6
when "Digit7" then key(82) # 7
when "Digit8" then key(83) # 8
when "Digit9" then key(84) # 9
when "Digit0" then key(85) # 0
when "Minus" then key(86) # -
when "Equal" then key(87) # ^
when "IntlYen" then key(88) # \
when "ControlLeft"
console.log document.getElementById("osctype").selectedIndex
if document.getElementById("osctype").length - 1 <= document.getElementById("osctype").selectedIndex
document.getElementById("osctype").selectedIndex = 0
else
document.getElementById("osctype").selectedIndex = document.getElementById("osctype").selectedIndex + 1
</script>
</body>
</html>つーわけで、htmlでキーを押すと音を鳴らすやつを描いてみましたがいかがでしょうか？
magicorde(マジコルダ)ではHTMLをはしらせたり、ブラウザのjsを走らせることはできないようなので、
実際に動くものをご用意しました。
こちらでみんなもレッツフィドルです。
