⌈⌋ branch:  Bitrhythm


Hex Artifact Content

Artifact 815c303f06aeecfa7b5d6b8c28fceade38671376aaed3b0e9dabb78fe2ff5273:

  • File public/components/piano.riot — part of check-in [12a9bb700d] at 2021-08-11 18:56:04 on branch trunk — Import from git Added a changelog (user: dev size: 3164)

0000: 3c 70 69 61 6e 6f 3e 0a 0a 20 20 20 20 3c 64 69  <piano>..    <di
0010: 76 20 63 6c 61 73 73 3d 22 72 6f 77 22 3e 0a 20  v class="row">. 
0020: 20 20 20 20 20 20 20 3c 76 69 72 74 75 61 6c 20         <virtual 
0030: 65 61 63 68 3d 7b 20 6b 65 79 2c 20 69 6e 64 65  each={ key, inde
0040: 78 20 69 6e 20 73 74 61 74 65 2e 6b 65 79 73 20  x in state.keys 
0050: 7d 3e 0a 20 20 20 20 20 20 20 20 20 20 20 20 3c  }>.            <
0060: 64 69 76 20 63 6c 61 73 73 3d 22 63 6f 6c 2d 73  div class="col-s
0070: 6d 2d 31 22 3e 0a 20 20 20 20 20 20 20 20 20 20  m-1">.          
0080: 20 20 20 20 20 20 3c 64 69 76 20 63 6c 61 73 73        <div class
0090: 3d 22 64 69 61 6c 22 20 64 61 74 61 2d 69 6e 64  ="dial" data-ind
00a0: 65 78 3d 7b 69 6e 64 65 78 7d 3e 3c 2f 64 69 76  ex={index}></div
00b0: 3e 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20  >.              
00c0: 20 20 3c 62 75 74 74 6f 6e 20 6f 6e 63 6c 69 63    <button onclic
00d0: 6b 3d 7b 28 29 20 3d 3e 20 70 6c 61 79 28 6b 65  k={() => play(ke
00e0: 79 2e 66 72 65 71 2c 20 69 6e 64 65 78 29 7d 3e  y.freq, index)}>
00f0: 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20  .               
0100: 20 20 20 20 20 7b 6b 65 79 2e 66 72 65 71 7d 0a       {key.freq}.
0110: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20                  
0120: 3c 2f 62 75 74 74 6f 6e 3e 0a 20 20 20 20 20 20  </button>.      
0130: 20 20 20 20 20 20 3c 2f 64 69 76 3e 0a 20 20 20        </div>.   
0140: 20 20 20 20 20 3c 2f 76 69 72 74 75 61 6c 3e 0a       </virtual>.
0150: 20 20 20 20 3c 2f 64 69 76 3e 0a 20 20 20 20 3c      </div>.    <
0160: 64 69 76 20 63 6c 61 73 73 3d 27 70 69 61 6e 6f  div class='piano
0170: 2d 63 6f 6e 74 61 69 6e 65 72 27 3e 3c 2f 64 69  -container'></di
0180: 76 3e 0a 20 20 20 20 3c 66 6f 72 6d 3e 0a 20 20  v>.    <form>.  
0190: 20 20 20 20 20 20 3c 66 69 65 6c 64 73 65 74 3e        <fieldset>
01a0: 0a 20 20 20 20 20 20 20 20 20 20 20 20 3c 6c 65  .            <le
01b0: 67 65 6e 64 3e 3c 69 6e 70 75 74 20 74 79 70 65  gend><input type
01c0: 3d 22 72 61 64 69 6f 22 20 6e 61 6d 65 3d 22 6f  ="radio" name="o
01d0: 70 74 69 6f 6e 2d 74 79 70 65 22 20 76 61 6c 75  ption-type" valu
01e0: 65 3d 22 6f 63 74 61 76 65 22 20 63 68 65 63 6b  e="octave" check
01f0: 65 64 3e 20 4f 63 74 61 76 65 20 53 69 7a 65 3c  ed> Octave Size<
0200: 2f 6c 65 67 65 6e 64 3e 0a 20 20 20 20 20 20 20  /legend>.       
0210: 20 20 20 20 20 3c 69 6e 70 75 74 20 74 79 70 65       <input type
0220: 3d 22 6e 75 6d 62 65 72 22 20 6d 69 6e 3d 31 20  ="number" min=1 
0230: 6d 61 78 3d 39 20 69 64 3d 22 6f 63 74 61 76 65  max=9 id="octave
0240: 43 68 61 6e 67 65 72 22 20 76 61 6c 75 65 3d 22  Changer" value="
0250: 31 22 3e 0a 20 20 20 20 20 20 20 20 3c 2f 66 69  1">.        </fi
0260: 65 6c 64 73 65 74 3e 0a 20 20 20 20 20 20 20 20  eldset>.        
0270: 3c 66 69 65 6c 64 73 65 74 20 63 6c 61 73 73 3d  <fieldset class=
0280: 22 72 61 6e 67 65 22 3e 0a 20 20 20 20 20 20 20  "range">.       
0290: 20 20 20 20 20 3c 69 6e 70 75 74 20 74 79 70 65       <input type
02a0: 3d 22 6e 75 6d 62 65 72 22 20 6d 69 6e 3d 30 20  ="number" min=0 
02b0: 6d 61 78 3d 31 30 20 69 64 3d 22 73 74 61 72 74  max=10 id="start
02c0: 4f 63 74 61 76 65 22 20 76 61 6c 75 65 3d 22 33  Octave" value="3
02d0: 22 20 64 69 73 61 62 6c 65 64 3e 0a 20 20 20 20  " disabled>.    
02e0: 20 20 20 20 20 20 20 20 3c 73 70 61 6e 3e 74 6f          <span>to
02f0: 3c 2f 73 70 61 6e 3e 0a 20 20 20 20 20 20 20 20  </span>.        
0300: 20 20 20 20 3c 69 6e 70 75 74 20 74 79 70 65 3d      <input type=
0310: 22 6e 75 6d 62 65 72 22 20 6d 69 6e 3d 30 20 6d  "number" min=0 m
0320: 61 78 3d 31 30 20 69 64 3d 22 65 6e 64 4f 63 74  ax=10 id="endOct
0330: 61 76 65 22 20 76 61 6c 75 65 3d 22 35 22 20 64  ave" value="5" d
0340: 69 73 61 62 6c 65 64 3e 0a 20 20 20 20 20 20 20  isabled>.       
0350: 20 3c 2f 66 69 65 6c 64 73 65 74 3e 0a 20 20 20   </fieldset>.   
0360: 20 20 20 20 20 3c 66 69 65 6c 64 73 65 74 3e 0a       <fieldset>.
0370: 20 20 20 20 20 20 20 20 20 20 20 20 3c 6c 65 67              <leg
0380: 65 6e 64 3e 4c 6f 63 61 6c 65 3c 2f 6c 65 67 65  end>Locale</lege
0390: 6e 64 3e 0a 20 20 20 20 20 20 20 20 20 20 20 20  nd>.            
03a0: 3c 6c 61 62 65 6c 3e 53 68 6f 77 20 6e 61 6d 65  <label>Show name
03b0: 73 3a 20 3c 69 6e 70 75 74 20 74 79 70 65 3d 22  s: <input type="
03c0: 63 68 65 63 6b 62 6f 78 22 20 69 64 3d 22 6e 61  checkbox" id="na
03d0: 6d 65 73 22 3e 3c 2f 6c 61 62 65 6c 3e 0a 20 20  mes"></label>.  
03e0: 20 20 20 20 20 20 3c 2f 66 69 65 6c 64 73 65 74        </fieldset
03f0: 3e 0a 20 20 20 20 3c 2f 66 6f 72 6d 3e 0a 0a 20  >.    </form>.. 
0400: 20 20 20 3c 73 74 79 6c 65 3e 0a 20 20 20 20 20     <style>.     
0410: 20 20 20 62 75 74 74 6f 6e 20 7b 0a 20 20 20 20     button {.    
0420: 20 20 20 20 20 20 20 20 62 61 63 6b 67 72 6f 75          backgrou
0430: 6e 64 2d 63 6f 6c 6f 72 3a 20 23 66 63 66 63 66  nd-color: #fcfcf
0440: 39 3b 0a 20 20 20 20 20 20 20 20 20 20 20 20 62  9;.            b
0450: 6f 72 64 65 72 3a 20 32 70 78 20 73 6f 6c 69 64  order: 2px solid
0460: 20 23 32 32 32 3b 0a 20 20 20 20 20 20 20 20 20   #222;.         
0470: 20 20 20 63 6f 6c 6f 72 3a 20 23 32 32 32 3b 0a     color: #222;.
0480: 20 20 20 20 20 20 20 20 20 20 20 20 68 65 69 67              heig
0490: 68 74 3a 20 31 36 76 68 3b 0a 20 20 20 20 20 20  ht: 16vh;.      
04a0: 20 20 20 20 20 20 77 69 64 74 68 3a 20 38 76 77        width: 8vw
04b0: 3b 0a 20 20 20 20 20 20 20 20 20 20 20 20 62 6f  ;.            bo
04c0: 72 64 65 72 2d 72 61 64 69 75 73 3a 20 38 70 78  rder-radius: 8px
04d0: 3b 0a 20 20 20 20 20 20 20 20 20 20 20 20 6d 61  ;.            ma
04e0: 72 67 69 6e 3a 20 2d 32 70 78 3b 0a 20 20 20 20  rgin: -2px;.    
04f0: 20 20 20 20 20 20 20 20 74 65 78 74 2d 61 6c 69          text-ali
0500: 67 6e 3a 20 63 65 6e 74 65 72 3b 0a 20 20 20 20  gn: center;.    
0510: 20 20 20 20 20 20 20 20 74 65 78 74 2d 64 65 63          text-dec
0520: 6f 72 61 74 69 6f 6e 3a 20 6e 6f 6e 65 3b 0a 20  oration: none;. 
0530: 20 20 20 20 20 20 20 20 20 20 20 64 69 73 70 6c             displ
0540: 61 79 3a 20 69 6e 6c 69 6e 65 2d 62 6c 6f 63 6b  ay: inline-block
0550: 3b 0a 20 20 20 20 20 20 20 20 20 20 20 20 66 6f  ;.            fo
0560: 6e 74 2d 73 69 7a 65 3a 20 31 36 70 78 3b 0a 20  nt-size: 16px;. 
0570: 20 20 20 20 20 20 20 20 20 20 20 66 6f 6e 74 2d             font-
0580: 77 65 69 67 68 74 3a 20 62 6f 6c 64 3b 0a 20 20  weight: bold;.  
0590: 20 20 20 20 20 20 20 20 20 20 66 6f 6e 74 2d 73            font-s
05a0: 69 7a 65 3a 20 73 6d 61 6c 6c 3b 0a 20 20 20 20  ize: small;.    
05b0: 20 20 20 20 7d 0a 0a 20 20 20 20 20 20 20 20 62      }..        b
05c0: 75 74 74 6f 6e 3a 61 63 74 69 76 65 20 7b 0a 20  utton:active {. 
05d0: 20 20 20 20 20 20 20 20 20 20 20 62 61 63 6b 67             backg
05e0: 72 6f 75 6e 64 2d 63 6f 6c 6f 72 3a 20 23 66 34  round-color: #f4
05f0: 66 34 65 38 3b 0a 20 20 20 20 20 20 20 20 7d 0a  f4e8;.        }.
0600: 20 20 20 20 3c 2f 73 74 79 6c 65 3e 0a 0a 0a 20      </style>... 
0610: 20 20 20 3c 73 63 72 69 70 74 3e 0a 0a 0a 20 20     <script>...  
0620: 20 20 20 20 20 20 76 61 72 20 6f 73 63 20 3d 20        var osc = 
0630: 6e 65 77 20 54 6f 6e 65 2e 4f 73 63 69 6c 6c 61  new Tone.Oscilla
0640: 74 6f 72 28 7b 0a 20 20 20 20 20 20 20 20 20 20  tor({.          
0650: 20 20 22 74 79 70 65 22 3a 20 22 73 69 6e 65 22    "type": "sine"
0660: 2c 0a 20 20 20 20 20 20 20 20 20 20 20 20 22 66  ,.            "f
0670: 72 65 71 75 65 6e 63 79 22 3a 20 34 34 30 2c 0a  requency": 440,.
0680: 20 20 20 20 20 20 20 20 7d 29 3b 0a 0a 20 20 20          });..   
0690: 20 20 20 20 20 76 61 72 20 65 6e 76 20 3d 20 6e       var env = n
06a0: 65 77 20 54 6f 6e 65 2e 41 6d 70 6c 69 74 75 64  ew Tone.Amplitud
06b0: 65 45 6e 76 65 6c 6f 70 65 28 7b 0a 20 20 20 20  eEnvelope({.    
06c0: 20 20 20 20 20 20 20 20 22 63 75 72 76 65 22 3a          "curve":
06d0: 20 22 6c 69 6e 65 61 72 22 2c 0a 20 20 20 20 20   "linear",.     
06e0: 20 20 20 20 20 20 20 22 61 74 74 61 63 6b 22 3a         "attack":
06f0: 20 30 2e 32 2c 0a 20 20 20 20 20 20 20 20 20 20   0.2,.          
0700: 20 20 22 64 65 63 61 79 22 3a 20 30 2e 31 2c 0a    "decay": 0.1,.
0710: 20 20 20 20 20 20 20 20 20 20 20 20 22 73 75 73              "sus
0720: 74 61 69 6e 22 3a 20 30 2c 0a 20 20 20 20 20 20  tain": 0,.      
0730: 20 20 20 20 20 20 22 72 65 6c 65 61 73 65 22 3a        "release":
0740: 20 30 0a 20 20 20 20 20 20 20 20 7d 29 2e 74 6f   0.        }).to
0750: 4d 61 73 74 65 72 28 29 3b 0a 0a 0a 20 20 20 20  Master();...    
0760: 20 20 20 20 65 6e 76 2e 61 74 74 61 63 6b 43 75      env.attackCu
0770: 72 76 65 20 3d 20 22 6c 69 6e 65 61 72 22 3b 0a  rve = "linear";.
0780: 20 20 20 20 20 20 20 20 65 6e 76 2e 64 65 63 61          env.deca
0790: 79 43 75 72 76 65 20 3d 20 22 6c 69 6e 65 61 72  yCurve = "linear
07a0: 22 3b 0a 20 20 20 20 20 20 20 20 65 6e 76 2e 72  ";.        env.r
07b0: 65 6c 65 61 73 65 43 75 72 76 65 20 3d 20 22 6c  eleaseCurve = "l
07c0: 69 6e 65 61 72 22 3b 0a 0a 20 20 20 20 20 20 20  inear";..       
07d0: 20 6f 73 63 2e 63 6f 6e 6e 65 63 74 28 65 6e 76   osc.connect(env
07e0: 29 2e 73 74 61 72 74 28 29 3b 0a 0a 0a 20 20 20  ).start();...   
07f0: 20 20 20 20 20 65 78 70 6f 72 74 20 64 65 66 61       export defa
0800: 75 6c 74 20 7b 0a 0a 20 20 20 20 20 20 20 20 20  ult {..         
0810: 20 20 20 6f 6e 42 65 66 6f 72 65 4d 6f 75 6e 74     onBeforeMount
0820: 28 70 72 6f 70 73 2c 20 73 74 61 74 65 29 20 7b  (props, state) {
0830: 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20  .               
0840: 20 2f 2f 20 69 6e 69 74 69 61 6c 20 73 74 61 74   // initial stat
0850: 65 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20  e.              
0860: 20 20 74 68 69 73 2e 73 74 61 74 65 20 3d 20 7b    this.state = {
0870: 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20  .               
0880: 20 20 20 20 20 6b 65 79 73 3a 20 5b 7b 20 22 66       keys: [{ "f
0890: 72 65 71 22 3a 20 34 34 30 20 7d 2c 20 7b 20 22  req": 440 }, { "
08a0: 66 72 65 71 22 3a 20 38 38 30 20 7d 5d 2c 0a 20  freq": 880 }],. 
08b0: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 7d                 }
08c0: 0a 20 20 20 20 20 20 20 20 20 20 20 20 7d 2c 0a  .            },.
08d0: 0a 20 20 20 20 20 20 20 20 20 20 20 20 6f 6e 4d  .            onM
08e0: 6f 75 6e 74 65 64 28 29 20 7b 0a 20 20 20 20 20  ounted() {.     
08f0: 20 20 20 20 20 20 20 20 20 20 20 76 61 72 20 64             var d
0900: 69 61 6c 73 20 3d 20 63 6f 6e 74 61 69 6e 65 72  ials = container
0910: 44 69 76 2e 67 65 74 45 6c 65 6d 65 6e 74 73 42  Div.getElementsB
0920: 79 43 6c 61 73 73 4e 61 6d 65 28 27 64 69 61 6c  yClassName('dial
0930: 27 29 3b 0a 20 20 20 20 20 20 20 20 20 20 20 20  ');.            
0940: 20 20 20 20 64 69 61 6c 73 2e 6d 61 70 28 28 65      dials.map((e
0950: 29 20 3d 3e 20 7b 0a 0a 20 20 20 20 20 20 20 20  ) => {..        
0960: 20 20 20 20 20 20 20 20 20 20 20 20 63 6f 6e 73              cons
0970: 6f 6c 65 2e 6c 6f 67 28 65 29 0a 0a 20 20 20 20  ole.log(e)..    
0980: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20                  
0990: 76 61 72 20 69 6e 64 65 78 20 3d 20 24 28 65 29  var index = $(e)
09a0: 2e 64 61 74 61 28 27 69 6e 64 65 78 27 29 3b 0a  .data('index');.
09b0: 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20  .               
09c0: 20 20 20 20 20 76 61 72 20 64 69 61 6c 20 3d 20       var dial = 
09d0: 6e 65 77 20 4e 65 78 75 73 2e 44 69 61 6c 28 65  new Nexus.Dial(e
09e0: 2c 20 7b 0a 20 20 20 20 20 20 20 20 20 20 20 20  , {.            
09f0: 20 20 20 20 20 20 20 20 20 20 20 20 27 73 69 7a              'siz
0a00: 65 27 3a 20 5b 32 30 30 2c 20 32 30 30 5d 2c 0a  e': [200, 200],.
0a10: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20                  
0a20: 20 20 20 20 20 20 20 20 27 6d 69 6e 27 3a 20 30          'min': 0
0a30: 2c 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20  ,.              
0a40: 20 20 20 20 20 20 20 20 20 20 27 6d 61 78 27 3a            'max':
0a50: 20 38 38 30 2c 0a 20 20 20 20 20 20 20 20 20 20   880,.          
0a60: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 27 73                's
0a70: 74 65 70 27 3a 20 31 2c 0a 20 20 20 20 20 20 20  tep': 1,.       
0a80: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20                  
0a90: 20 27 76 61 6c 75 65 27 3a 20 34 34 30 0a 20 20   'value': 440.  
0aa0: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20                  
0ab0: 20 20 7d 29 3b 0a 0a 20 20 20 20 20 20 20 20 20    });..         
0ac0: 20 20 20 20 20 20 20 20 20 20 20 64 69 61 6c 2e             dial.
0ad0: 6f 66 66 28 27 63 68 61 6e 67 65 27 29 3b 0a 0a  off('change');..
0ae0: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20                  
0af0: 20 20 20 20 64 69 61 6c 2e 6f 6e 28 27 63 68 61      dial.on('cha
0b00: 6e 67 65 27 2c 20 28 76 29 20 3d 3e 20 7b 0a 20  nge', (v) => {. 
0b10: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20                  
0b20: 20 20 20 20 20 20 20 63 6f 6e 73 6f 6c 65 2e 6c         console.l
0b30: 6f 67 28 76 29 3b 0a 20 20 20 20 20 20 20 20 20  og(v);.         
0b40: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 74                 t
0b50: 68 69 73 2e 73 74 61 74 65 5b 22 6b 65 79 73 22  his.state["keys"
0b60: 5d 5b 69 6e 64 65 78 5d 5b 22 66 72 65 71 22 5d  ][index]["freq"]
0b70: 20 3d 20 76 3b 0a 20 20 20 20 20 20 20 20 20 20   = v;.          
0b80: 20 20 20 20 20 20 20 20 20 20 7d 29 0a 0a 20 20            })..  
0b90: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 7d 29                })
0ba0: 0a 20 20 20 20 20 20 20 20 20 20 20 20 7d 2c 0a  .            },.
0bb0: 0a 0a 20 20 20 20 20 20 20 20 20 20 20 20 70 6c  ..            pl
0bc0: 61 79 28 66 72 65 71 2c 20 69 6e 64 65 78 29 20  ay(freq, index) 
0bd0: 7b 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20  {.              
0be0: 20 20 6f 73 63 2e 66 72 65 71 75 65 6e 63 79 2e    osc.frequency.
0bf0: 76 61 6c 75 65 20 3d 20 66 72 65 71 3b 0a 20 20  value = freq;.  
0c00: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 65 6e                en
0c10: 76 2e 74 72 69 67 67 65 72 41 74 74 61 63 6b 52  v.triggerAttackR
0c20: 65 6c 65 61 73 65 28 29 3b 0a 20 20 20 20 20 20  elease();.      
0c30: 20 20 20 20 20 20 7d 0a 20 20 20 20 20 20 20 20        }.        
0c40: 7d 0a 0a 0a 20 20 20 20 3c 2f 73 63 72 69 70 74  }...    </script
0c50: 3e 0a 0a 3c 2f 70 69 61 6e 6f 3e 0a              >..</piano>.