Magicode logo
Magicode
0
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を走らせることはできないようなので、 実際に動くものをご用意しました。

https://0x99bfbf1073acf9e613994dfbb9d11026d153a90c.on.fleek.co/fiddle.html

こちらでみんなもレッツフィドルです。

Discussion

コメントにはログインが必要です。