Artifact
815c303f06aeecfa7b5d6b8c28fceade38671376aaed3b0e9dabb78fe2ff5273:
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>.