Artifact
6802c73cc4a24b67d01e99700f9bc7f29179be574c137aa197a4e5a96b97d9f4:
0000: 3c 21 64 6f 63 74 79 70 65 20 68 74 6d 6c 3e 0a <!doctype html>.
0010: 3c 68 74 6d 6c 3e 0a 3c 68 65 61 64 3e 0a 20 20 <html>.<head>.
0020: 3c 6d 65 74 61 20 63 68 61 72 73 65 74 3d 22 75 <meta charset="u
0030: 74 66 2d 38 22 20 2f 3e 0a 20 20 3c 74 69 74 6c tf-8" />. <titl
0040: 65 3e 4d 75 73 69 63 69 61 6e 27 73 20 54 6f 6f e>Musician's Too
0050: 6c 6b 69 74 3c 2f 74 69 74 6c 65 3e 0a 20 20 3c lkit</title>. <
0060: 73 63 72 69 70 74 20 73 72 63 3d 22 2e 2e 2f 64 script src="../d
0070: 69 73 74 2f 4e 65 78 75 73 55 49 2e 6a 73 22 3e ist/NexusUI.js">
0080: 3c 2f 73 63 72 69 70 74 3e 0a 20 20 3c 73 63 72 </script>. <scr
0090: 69 70 74 20 73 72 63 3d 22 6a 73 2f 54 6f 6e 65 ipt src="js/Tone
00a0: 39 2e 6a 73 22 3e 3c 2f 73 63 72 69 70 74 3e 0a 9.js"></script>.
00b0: 20 20 3c 6d 65 74 61 20 6e 61 6d 65 3d 22 76 69 <meta name="vi
00c0: 65 77 70 6f 72 74 22 20 63 6f 6e 74 65 6e 74 3d ewport" content=
00d0: 22 77 69 64 74 68 3d 32 30 30 2c 20 69 6e 69 74 "width=200, init
00e0: 69 61 6c 2d 73 63 61 6c 65 3d 31 22 3e 0a 3c 2f ial-scale=1">.</
00f0: 68 65 61 64 3e 0a 3c 62 6f 64 79 20 73 74 79 6c head>.<body styl
0100: 65 3d 22 6d 61 72 67 69 6e 3a 30 3b 70 61 64 64 e="margin:0;padd
0110: 69 6e 67 3a 30 3b 22 3e 0a 20 20 3c 64 69 76 20 ing:0;">. <div
0120: 69 64 3d 22 61 6c 6c 2d 69 6e 74 65 72 66 61 63 id="all-interfac
0130: 65 73 22 3e 0a 20 20 20 20 3c 64 69 76 20 6e 65 es">. <div ne
0140: 78 75 73 2d 75 69 3d 22 64 69 61 6c 22 3e 3c 2f xus-ui="dial"></
0150: 64 69 76 3e 0a 20 20 20 20 3c 64 69 76 20 6e 65 div>. <div ne
0160: 78 75 73 2d 75 69 3d 22 73 6c 69 64 65 72 22 3e xus-ui="slider">
0170: 3c 2f 64 69 76 3e 0a 20 20 20 20 3c 64 69 76 20 </div>. <div
0180: 6e 65 78 75 73 2d 75 69 3d 22 74 6f 67 67 6c 65 nexus-ui="toggle
0190: 22 20 69 64 3d 22 74 6f 67 67 6c 65 22 3e 3c 2f " id="toggle"></
01a0: 64 69 76 3e 0a 20 20 20 20 3c 64 69 76 20 6e 65 div>. <div ne
01b0: 78 75 73 2d 75 69 3d 22 70 6f 73 69 74 69 6f 6e xus-ui="position
01c0: 22 20 69 64 3d 22 70 6f 73 69 74 69 6f 6e 22 3e " id="position">
01d0: 3c 2f 64 69 76 3e 0a 20 20 20 20 3c 64 69 76 20 </div>. <div
01e0: 6e 65 78 75 73 2d 75 69 3d 22 62 75 74 74 6f 6e nexus-ui="button
01f0: 22 20 69 64 3d 22 62 75 74 74 6f 6e 22 3e 3c 2f " id="button"></
0200: 64 69 76 3e 0a 20 20 20 20 3c 64 69 76 20 6e 65 div>. <div ne
0210: 78 75 73 2d 75 69 3d 22 74 65 78 74 62 75 74 74 xus-ui="textbutt
0220: 6f 6e 22 20 69 64 3d 22 74 65 78 74 62 75 74 74 on" id="textbutt
0230: 6f 6e 22 3e 3c 2f 64 69 76 3e 0a 20 20 20 20 3c on"></div>. <
0240: 64 69 76 20 6e 65 78 75 73 2d 75 69 3d 22 72 61 div nexus-ui="ra
0250: 64 69 6f 62 75 74 74 6f 6e 22 20 69 64 3d 22 72 diobutton" id="r
0260: 61 64 69 6f 62 75 74 74 6f 6e 22 3e 3c 2f 64 69 adiobutton"></di
0270: 76 3e 0a 20 20 20 20 3c 64 69 76 20 6e 65 78 75 v>. <div nexu
0280: 73 2d 75 69 3d 22 6e 75 6d 62 65 72 22 20 69 64 s-ui="number" id
0290: 3d 22 6e 75 6d 62 65 72 22 3e 3c 2f 64 69 76 3e ="number"></div>
02a0: 0a 20 20 20 20 3c 64 69 76 20 6e 65 78 75 73 2d . <div nexus-
02b0: 75 69 3d 22 73 65 6c 65 63 74 22 20 69 64 3d 22 ui="select" id="
02c0: 73 65 6c 65 63 74 22 3e 3c 2f 64 69 76 3e 0a 20 select"></div>.
02d0: 20 20 20 3c 64 69 76 20 6e 65 78 75 73 2d 75 69 <div nexus-ui
02e0: 3d 22 70 69 61 6e 6f 22 20 69 64 3d 22 70 69 61 ="piano" id="pia
02f0: 6e 6f 22 3e 3c 2f 64 69 76 3e 0a 20 20 20 20 3c no"></div>. <
0300: 64 69 76 20 6e 65 78 75 73 2d 75 69 3d 22 73 65 div nexus-ui="se
0310: 71 75 65 6e 63 65 72 22 20 69 64 3d 22 73 65 71 quencer" id="seq
0320: 75 65 6e 63 65 72 22 3e 3c 2f 64 69 76 3e 0a 20 uencer"></div>.
0330: 20 20 20 3c 64 69 76 20 6e 65 78 75 73 2d 75 69 <div nexus-ui
0340: 3d 22 70 61 6e 32 64 22 20 69 64 3d 22 70 61 6e ="pan2d" id="pan
0350: 32 44 22 3e 3c 2f 64 69 76 3e 0a 20 20 20 20 3c 2D"></div>. <
0360: 64 69 76 20 6e 65 78 75 73 2d 75 69 3d 22 74 69 div nexus-ui="ti
0370: 6c 74 22 20 69 64 3d 22 74 69 6c 74 22 3e 3c 2f lt" id="tilt"></
0380: 64 69 76 3e 0a 20 20 20 20 3c 64 69 76 20 6e 65 div>. <div ne
0390: 78 75 73 2d 75 69 3d 22 6d 75 6c 74 69 73 6c 69 xus-ui="multisli
03a0: 64 65 72 22 3e 3c 2f 64 69 76 3e 0a 20 20 20 20 der"></div>.
03b0: 3c 64 69 76 20 6e 65 78 75 73 2d 75 69 3d 22 70 <div nexus-ui="p
03c0: 61 6e 22 20 69 64 3d 22 70 61 6e 22 3e 3c 2f 64 an" id="pan"></d
03d0: 69 76 3e 0a 20 20 20 20 3c 64 69 76 20 6e 65 78 iv>. <div nex
03e0: 75 73 2d 75 69 3d 22 65 6e 76 65 6c 6f 70 65 22 us-ui="envelope"
03f0: 20 69 64 3d 22 65 6e 76 65 6c 6f 70 65 22 3e 3c id="envelope"><
0400: 2f 64 69 76 3e 0a 20 20 20 20 3c 64 69 76 20 6e /div>. <div n
0410: 65 78 75 73 2d 75 69 3d 22 6f 73 63 69 6c 6c 6f exus-ui="oscillo
0420: 73 63 6f 70 65 22 20 69 64 3d 22 6f 73 63 69 6c scope" id="oscil
0430: 6c 6f 73 63 6f 70 65 22 3e 3c 2f 64 69 76 3e 0a loscope"></div>.
0440: 20 20 20 20 3c 64 69 76 20 6e 65 78 75 73 2d 75 <div nexus-u
0450: 69 3d 22 6d 65 74 65 72 22 20 69 64 3d 22 6d 65 i="meter" id="me
0460: 74 65 72 22 3e 3c 2f 64 69 76 3e 0a 20 20 20 20 ter"></div>.
0470: 3c 64 69 76 20 6e 65 78 75 73 2d 75 69 3d 22 73 <div nexus-ui="s
0480: 70 65 63 74 72 6f 67 72 61 6d 22 20 69 64 3d 22 pectrogram" id="
0490: 73 70 65 63 74 72 6f 67 72 61 6d 22 3e 3c 2f 64 spectrogram"></d
04a0: 69 76 3e 0a 20 20 3c 2f 64 69 76 3e 0a 3c 2f 62 iv>. </div>.</b
04b0: 6f 64 79 3e 0a 3c 73 74 79 6c 65 3e 0a 23 61 6c ody>.<style>.#al
04c0: 6c 2d 69 6e 74 65 72 66 61 63 65 73 20 7b 0a 20 l-interfaces {.
04d0: 20 77 69 64 74 68 3a 35 30 30 70 78 3b 0a 20 20 width:500px;.
04e0: 6d 61 72 67 69 6e 3a 32 30 70 78 20 61 75 74 6f margin:20px auto
04f0: 3b 0a 20 20 66 6f 6e 74 2d 66 61 6d 69 6c 79 3a ;. font-family:
0500: 68 65 6c 76 65 74 69 63 61 2c 20 73 61 6e 73 2d helvetica, sans-
0510: 73 65 72 69 66 3b 0a 7d 0a 5b 6e 65 78 75 73 2d serif;.}.[nexus-
0520: 75 69 5d 20 7b 0a 20 20 6d 61 72 67 69 6e 3a 31 ui] {. margin:1
0530: 35 70 78 20 61 75 74 6f 3b 0a 20 20 64 69 73 70 5px auto;. disp
0540: 6c 61 79 3a 62 6c 6f 63 6b 3b 0a 7d 0a 23 73 79 lay:block;.}.#sy
0550: 6e 74 68 31 20 7b 0a 20 20 6d 61 72 67 69 6e 3a nth1 {. margin:
0560: 20 35 30 70 78 20 61 75 74 6f 3b 0a 20 20 64 69 50px auto;. di
0570: 73 70 6c 61 79 3a 62 6c 6f 63 6b 3b 0a 20 20 77 splay:block;. w
0580: 69 64 74 68 3a 20 33 30 30 70 78 3b 0a 7d 0a 3c idth: 300px;.}.<
0590: 2f 73 74 79 6c 65 3e 0a 3c 73 63 72 69 70 74 3e /style>.<script>
05a0: 0a 0a 20 20 4e 65 78 75 73 2e 63 6f 6e 74 65 78 .. Nexus.contex
05b0: 74 20 3d 20 54 6f 6e 65 2e 63 6f 6e 74 65 78 74 t = Tone.context
05c0: 3b 0a 0a 20 20 75 69 20 3d 20 6e 65 77 20 4e 65 ;.. ui = new Ne
05d0: 78 75 73 2e 52 61 63 6b 28 27 23 61 6c 6c 2d 69 xus.Rack('#all-i
05e0: 6e 74 65 72 66 61 63 65 73 27 29 3b 0a 20 20 75 nterfaces');. u
05f0: 69 2e 74 69 6c 74 2e 61 63 74 69 76 65 20 3d 20 i.tilt.active =
0600: 66 61 6c 73 65 0a 0a 20 20 76 61 72 20 70 6c 61 false.. var pla
0610: 79 65 72 32 20 3d 20 6e 65 77 20 54 6f 6e 65 2e yer2 = new Tone.
0620: 50 6c 61 79 65 72 28 22 2e 2f 6d 65 64 69 61 2f Player("./media/
0630: 44 2d 73 68 61 72 70 2e 6d 70 33 22 29 0a 20 20 D-sharp.mp3").
0640: 2f 2f 70 6c 61 79 20 61 73 20 73 6f 6f 6e 20 61 //play as soon a
0650: 73 20 74 68 65 20 62 75 66 66 65 72 20 69 73 20 s the buffer is
0660: 6c 6f 61 64 65 64 0a 20 20 70 6c 61 79 65 72 32 loaded. player2
0670: 2e 61 75 74 6f 73 74 61 72 74 20 3d 20 74 72 75 .autostart = tru
0680: 65 3b 0a 20 20 70 6c 61 79 65 72 32 2e 6c 6f 6f e;. player2.loo
0690: 70 20 3d 20 74 72 75 65 3b 0a 0a 20 20 75 69 2e p = true;.. ui.
06a0: 6f 73 63 69 6c 6c 6f 73 63 6f 70 65 2e 63 6f 6e oscilloscope.con
06b0: 6e 65 63 74 28 70 6c 61 79 65 72 32 29 0a 20 20 nect(player2).
06c0: 75 69 2e 6d 65 74 65 72 2e 63 6f 6e 6e 65 63 74 ui.meter.connect
06d0: 28 70 6c 61 79 65 72 32 29 3b 0a 20 20 75 69 2e (player2);. ui.
06e0: 73 70 65 63 74 72 6f 67 72 61 6d 2e 63 6f 6e 6e spectrogram.conn
06f0: 65 63 74 28 70 6c 61 79 65 72 32 29 3b 0a 0a 3c ect(player2);..<
0700: 2f 73 63 72 69 70 74 3e 0a 3c 2f 68 74 6d 6c 3e /script>.</html>
0710: 0a .