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 09 0a <html>.<head>...
0020: 3c 21 2d 2d 41 75 74 68 6f 72 3a 20 42 65 6e 20 <!--Author: Ben
0030: 54 61 79 6c 6f 72 20 2d 2d 3e 0a 09 3c 74 69 74 Taylor -->..<tit
0040: 6c 65 3e 4e 65 78 75 73 20 57 65 62 20 41 75 64 le>Nexus Web Aud
0050: 69 6f 20 49 6e 74 65 72 66 61 63 65 73 3c 2f 74 io Interfaces</t
0060: 69 74 6c 65 3e 0a 09 3c 6d 65 74 61 20 68 74 74 itle>..<meta htt
0070: 70 2d 65 71 75 69 76 3d 22 43 6f 6e 74 65 6e 74 p-equiv="Content
0080: 2d 54 79 70 65 22 20 63 6f 6e 74 65 6e 74 3d 22 -Type" content="
0090: 74 65 78 74 2f 68 74 6d 6c 3b 20 63 68 61 72 73 text/html; chars
00a0: 65 74 3d 75 74 66 2d 38 22 3e 0a 09 3c 6d 65 74 et=utf-8">..<met
00b0: 61 20 6e 61 6d 65 3d 22 76 69 65 77 70 6f 72 74 a name="viewport
00c0: 22 20 63 6f 6e 74 65 6e 74 3d 22 69 6e 69 74 69 " content="initi
00d0: 61 6c 2d 73 63 61 6c 65 3d 31 2e 2c 20 75 73 65 al-scale=1., use
00e0: 72 2d 73 63 61 6c 61 62 6c 65 3d 6e 6f 2c 20 77 r-scalable=no, w
00f0: 69 64 74 68 3d 64 65 76 69 63 65 2d 77 69 64 74 idth=device-widt
0100: 68 22 2f 3e 0a 09 3c 6c 69 6e 6b 20 72 65 6c 3d h"/>..<link rel=
0110: 22 69 63 6f 6e 22 20 74 79 70 65 3d 22 69 6d 61 "icon" type="ima
0120: 67 65 2f 70 6e 67 22 20 68 72 65 66 3d 22 66 61 ge/png" href="fa
0130: 76 69 63 6f 6e 2e 70 6e 67 22 20 2f 3e 0a 09 3c vicon.png" />..<
0140: 21 2d 2d 20 66 6f 6e 74 73 20 2d 2d 3e 0a 09 3c !-- fonts -->..<
0150: 6c 69 6e 6b 20 68 72 65 66 3d 22 68 74 74 70 73 link href="https
0160: 3a 2f 2f 66 6f 6e 74 73 2e 67 6f 6f 67 6c 65 61 ://fonts.googlea
0170: 70 69 73 2e 63 6f 6d 2f 63 73 73 3f 66 61 6d 69 pis.com/css?fami
0180: 6c 79 3d 4d 75 6c 69 22 20 72 65 6c 3d 22 73 74 ly=Muli" rel="st
0190: 79 6c 65 73 68 65 65 74 22 3e 0a 09 3c 6c 69 6e ylesheet">..<lin
01a0: 6b 20 68 72 65 66 3d 27 68 74 74 70 3a 2f 2f 66 k href='http://f
01b0: 6f 6e 74 73 2e 67 6f 6f 67 6c 65 61 70 69 73 2e onts.googleapis.
01c0: 63 6f 6d 2f 63 73 73 3f 66 61 6d 69 6c 79 3d 4f com/css?family=O
01d0: 70 65 6e 2b 53 61 6e 73 3a 33 30 30 2c 34 30 30 pen+Sans:300,400
01e0: 2c 36 30 30 27 20 72 65 6c 3d 27 73 74 79 6c 65 ,600' rel='style
01f0: 73 68 65 65 74 27 20 74 79 70 65 3d 27 74 65 78 sheet' type='tex
0200: 74 2f 63 73 73 27 3e 0a 09 3c 21 2d 2d 20 6a 71 t/css'>..<!-- jq
0210: 75 65 72 79 20 6c 69 6e 6b 73 20 2d 2d 3e 0a 09 uery links -->..
0220: 3c 73 63 72 69 70 74 20 73 72 63 3d 22 2f 2f 61 <script src="//a
0230: 6a 61 78 2e 67 6f 6f 67 6c 65 61 70 69 73 2e 63 jax.googleapis.c
0240: 6f 6d 2f 61 6a 61 78 2f 6c 69 62 73 2f 6a 71 75 om/ajax/libs/jqu
0250: 65 72 79 2f 31 2e 31 31 2e 32 2f 6a 71 75 65 72 ery/1.11.2/jquer
0260: 79 2e 6d 69 6e 2e 6a 73 22 3e 3c 2f 73 63 72 69 y.min.js"></scri
0270: 70 74 3e 0a 09 3c 73 63 72 69 70 74 20 74 79 70 pt>..<script typ
0280: 65 3d 22 74 65 78 74 2f 6a 61 76 61 73 63 72 69 e="text/javascri
0290: 70 74 22 20 73 72 63 3d 22 61 70 69 2f 6a 73 2f pt" src="api/js/
02a0: 54 6f 6e 65 39 2e 6a 73 22 3e 3c 2f 73 63 72 69 Tone9.js"></scri
02b0: 70 74 3e 0a 09 3c 21 2d 2d 20 6e 65 78 75 73 20 pt>..<!-- nexus
02c0: 6c 69 6e 6b 73 20 2d 2d 3e 0a 09 3c 73 63 72 69 links -->..<scri
02d0: 70 74 20 74 79 70 65 3d 22 74 65 78 74 2f 6a 61 pt type="text/ja
02e0: 76 61 73 63 72 69 70 74 22 20 73 72 63 3d 22 64 vascript" src="d
02f0: 69 73 74 2f 4e 65 78 75 73 55 49 2e 6a 73 22 3e ist/NexusUI.js">
0300: 3c 2f 73 63 72 69 70 74 3e 0a 0a 20 20 3c 6c 69 </script>.. <li
0310: 6e 6b 20 72 65 6c 3d 27 73 74 79 6c 65 73 68 65 nk rel='styleshe
0320: 65 74 27 20 68 72 65 66 3d 27 61 70 69 2f 70 72 et' href='api/pr
0330: 69 73 6d 2f 70 72 69 73 6d 2e 63 73 73 27 20 2f ism/prism.css' /
0340: 3e 0a 20 20 3c 73 63 72 69 70 74 20 73 72 63 3d >. <script src=
0350: 22 61 70 69 2f 70 72 69 73 6d 2f 70 72 69 73 6d "api/prism/prism
0360: 2e 6a 73 22 3e 3c 2f 73 63 72 69 70 74 3e 0a 0a .js"></script>..
0370: 09 3c 6d 65 74 61 20 6e 61 6d 65 3d 22 74 77 69 .<meta name="twi
0380: 74 74 65 72 3a 63 61 72 64 22 20 63 6f 6e 74 65 tter:card" conte
0390: 6e 74 3d 22 73 75 6d 6d 61 72 79 5f 6c 61 72 67 nt="summary_larg
03a0: 65 5f 69 6d 61 67 65 22 3e 0a 09 3c 6d 65 74 61 e_image">..<meta
03b0: 20 6e 61 6d 65 3d 22 74 77 69 74 74 65 72 3a 73 name="twitter:s
03c0: 69 74 65 22 20 63 6f 6e 74 65 6e 74 3d 22 40 73 ite" content="@s
03d0: 75 6e 63 61 6e 6f 6e 22 3e 0a 09 3c 6d 65 74 61 uncanon">..<meta
03e0: 20 6e 61 6d 65 3d 22 74 77 69 74 74 65 72 3a 63 name="twitter:c
03f0: 72 65 61 74 6f 72 22 20 63 6f 6e 74 65 6e 74 3d reator" content=
0400: 22 40 73 75 6e 63 61 6e 6f 6e 22 3e 0a 09 3c 6d "@suncanon">..<m
0410: 65 74 61 20 6e 61 6d 65 3d 22 74 77 69 74 74 65 eta name="twitte
0420: 72 3a 74 69 74 6c 65 22 20 63 6f 6e 74 65 6e 74 r:title" content
0430: 3d 22 4e 65 78 75 73 55 49 3a 20 57 65 62 20 41 ="NexusUI: Web A
0440: 75 64 69 6f 20 49 6e 74 65 72 66 61 63 65 73 22 udio Interfaces"
0450: 3e 0a 09 3c 6d 65 74 61 20 6e 61 6d 65 3d 22 74 >..<meta name="t
0460: 77 69 74 74 65 72 3a 64 65 73 63 72 69 70 74 69 witter:descripti
0470: 6f 6e 22 20 63 6f 6e 74 65 6e 74 3d 22 41 20 4a on" content="A J
0480: 61 76 61 53 63 72 69 70 74 20 74 6f 6f 6c 6b 69 avaScript toolki
0490: 74 20 66 6f 72 20 62 75 69 6c 64 69 6e 67 20 69 t for building i
04a0: 6e 73 74 72 75 6d 65 6e 74 73 20 69 6e 20 74 68 nstruments in th
04b0: 65 20 62 72 6f 77 73 65 72 2e 22 3e 0a 09 3c 6d e browser.">..<m
04c0: 65 74 61 20 6e 61 6d 65 3d 22 74 77 69 74 74 65 eta name="twitte
04d0: 72 3a 69 6d 61 67 65 22 20 63 6f 6e 74 65 6e 74 r:image" content
04e0: 3d 22 68 74 74 70 73 3a 2f 2f 6e 65 78 75 73 2d ="https://nexus-
04f0: 6a 73 2e 67 69 74 68 75 62 2e 69 6f 2f 75 69 2f js.github.io/ui/
0500: 69 6d 61 67 65 73 2f 63 61 72 64 2e 70 6e 67 22 images/card.png"
0510: 3e 0a 0a 3c 2f 68 65 61 64 3e 0a 3c 62 6f 64 79 >..</head>.<body
0520: 3e 0a 0a 3c 73 74 79 6c 65 3e 0a 0a 09 62 6f 64 >..<style>...bod
0530: 79 20 7b 0a 09 09 6c 69 6e 65 2d 68 65 69 67 68 y {...line-heigh
0540: 74 3a 6e 6f 72 6d 61 6c 3b 0a 09 09 66 6f 6e 74 t:normal;...font
0550: 2d 66 61 6d 69 6c 79 3a 27 4f 70 65 6e 20 53 61 -family:'Open Sa
0560: 6e 73 27 2c 20 68 65 6c 76 65 74 69 63 61 20 6e ns', helvetica n
0570: 65 75 65 3b 0a 09 7d 0a 0a 09 2e 72 6f 77 20 7b eue;..}....row {
0580: 0a 09 09 6d 61 78 2d 77 69 64 74 68 3a 6e 6f 6e ...max-width:non
0590: 65 3b 0a 09 7d 0a 0a 09 61 20 7b 0a 09 09 63 6f e;..}...a {...co
05a0: 6c 6f 72 3a 20 72 67 62 28 32 30 2c 20 31 36 30 lor: rgb(20, 160
05b0: 2c 20 31 37 30 29 3b 0a 09 7d 0a 0a 09 61 3a 68 , 170);..}...a:h
05c0: 6f 76 65 72 20 7b 0a 09 09 74 65 78 74 2d 64 65 over {...text-de
05d0: 63 6f 72 61 74 69 6f 6e 3a 75 6e 64 65 72 6c 69 coration:underli
05e0: 6e 65 3b 0a 09 7d 0a 0a 09 68 31 2c 20 68 32 2c ne;..}...h1, h2,
05f0: 20 68 33 20 7b 0a 09 09 66 6f 6e 74 2d 66 61 6d h3 {...font-fam
0600: 69 6c 79 3a 20 22 4d 75 6c 69 22 2c 20 73 61 6e ily: "Muli", san
0610: 73 2d 73 65 72 69 66 3b 0a 09 09 66 6f 6e 74 2d s-serif;...font-
0620: 77 65 69 67 68 74 3a 20 33 30 30 3b 0a 09 09 63 weight: 300;...c
0630: 6f 6c 6f 72 3a 23 33 33 33 3b 0a 09 09 66 6f 6e olor:#333;...fon
0640: 74 2d 73 69 7a 65 3a 32 30 70 74 3b 0a 09 09 64 t-size:20pt;...d
0650: 69 73 70 6c 61 79 3a 62 6c 6f 63 6b 3b 0a 09 09 isplay:block;...
0660: 6c 69 6e 65 2d 68 65 69 67 68 74 3a 32 30 70 74 line-height:20pt
0670: 3b 0a 09 09 70 61 64 64 69 6e 67 3a 33 70 78 20 ;...padding:3px
0680: 30 70 78 3b 0a 09 09 6d 61 72 67 69 6e 3a 30 70 0px;...margin:0p
0690: 78 20 30 70 78 3b 0a 09 7d 0a 0a 09 68 32 20 7b x 0px;..}...h2 {
06a0: 0a 09 09 66 6f 6e 74 2d 73 69 7a 65 3a 31 36 70 ...font-size:16p
06b0: 74 3b 0a 09 7d 0a 0a 09 68 33 20 7b 0a 09 09 70 t;..}...h3 {...p
06c0: 61 64 64 69 6e 67 2d 74 6f 70 3a 30 70 78 3b 0a adding-top:0px;.
06d0: 09 09 66 6f 6e 74 2d 73 69 7a 65 3a 31 33 70 74 ..font-size:13pt
06e0: 3b 0a 09 09 66 6f 6e 74 2d 77 65 69 67 68 74 3a ;...font-weight:
06f0: 20 31 30 30 30 3b 0a 09 7d 0a 0a 0a 09 2e 63 6f 1000;..}.....co
0700: 64 65 64 69 73 70 6c 61 79 20 7b 0a 09 09 62 6f dedisplay {...bo
0710: 72 64 65 72 3a 73 6f 6c 69 64 20 30 70 78 20 23 rder:solid 0px #
0720: 61 61 61 3b 0a 09 09 6f 75 74 6c 69 6e 65 3a 6e aaa;...outline:n
0730: 6f 6e 65 3b 0a 09 09 62 61 63 6b 67 72 6f 75 6e one;...backgroun
0740: 64 2d 63 6f 6c 6f 72 3a 23 66 37 66 37 66 37 3b d-color:#f7f7f7;
0750: 0a 09 09 66 6f 6e 74 2d 66 61 6d 69 6c 79 3a 20 ...font-family:
0760: 63 6f 75 72 69 65 72 3b 0a 09 09 66 6f 6e 74 2d courier;...font-
0770: 73 69 7a 65 3a 31 30 70 74 3b 0a 09 09 63 6f 6c size:10pt;...col
0780: 6f 72 3a 23 31 39 62 3b 0a 09 09 70 61 64 64 69 or:#19b;...paddi
0790: 6e 67 3a 32 30 70 78 20 21 69 6d 70 6f 72 74 61 ng:20px !importa
07a0: 6e 74 3b 0a 09 09 62 6f 72 64 65 72 2d 72 61 64 nt;...border-rad
07b0: 69 75 73 3a 36 70 78 3b 0a 09 09 62 6f 78 2d 73 ius:6px;...box-s
07c0: 68 61 64 6f 77 3a 6e 6f 6e 65 3b 0a 09 09 2d 77 hadow:none;...-w
07d0: 65 62 6b 69 74 2d 62 6f 78 2d 73 68 61 64 6f 77 ebkit-box-shadow
07e0: 3a 6e 6f 6e 65 3b 0a 09 09 72 65 73 69 7a 65 3a :none;...resize:
07f0: 6e 6f 6e 65 3b 0a 09 09 77 69 64 74 68 3a 31 30 none;...width:10
0800: 30 25 3b 0a 09 7d 0a 0a 09 74 65 78 74 61 72 65 0%;..}...textare
0810: 61 20 7b 0a 09 09 75 73 65 72 2d 73 65 6c 65 63 a {...user-selec
0820: 74 3a 6e 6f 6e 65 3b 0a 09 09 2d 77 65 62 6b 69 t:none;...-webki
0830: 74 2d 75 73 65 72 2d 73 65 6c 65 63 74 3a 6e 6f t-user-select:no
0840: 6e 65 3b 0a 09 09 2d 6d 6f 7a 2d 75 73 65 72 2d ne;...-moz-user-
0850: 73 65 6c 65 63 74 3a 20 6e 6f 6e 65 3b 0a 09 7d select: none;..}
0860: 0a 0a 09 2e 64 6c 20 7b 0a 09 09 62 6f 72 64 65 ....dl {...borde
0870: 72 2d 72 61 64 69 75 73 3a 35 70 78 3b 0a 09 09 r-radius:5px;...
0880: 62 6f 72 64 65 72 3a 6e 6f 6e 65 3b 0a 09 09 66 border:none;...f
0890: 6f 6e 74 2d 77 65 69 67 68 74 3a 6e 6f 72 6d 61 ont-weight:norma
08a0: 6c 3b 0a 09 09 70 61 64 64 69 6e 67 3a 31 30 70 l;...padding:10p
08b0: 78 20 32 30 70 78 3b 0a 09 09 74 65 78 74 2d 64 x 20px;...text-d
08c0: 65 63 6f 72 61 74 69 6f 6e 3a 6e 6f 6e 65 3b 0a ecoration:none;.
08d0: 09 09 63 75 72 73 6f 72 3a 70 6f 69 6e 74 65 72 ..cursor:pointer
08e0: 3b 0a 09 09 74 72 61 6e 73 69 74 69 6f 6e 3a 30 ;...transition:0
08f0: 2e 32 73 3b 0a 09 09 64 69 73 70 6c 61 79 3a 69 .2s;...display:i
0900: 6e 6c 69 6e 65 2d 62 6c 6f 63 6b 3b 0a 09 09 6d nline-block;...m
0910: 61 72 67 69 6e 3a 32 30 70 78 20 61 75 74 6f 3b argin:20px auto;
0920: 0a 0a 09 09 6d 61 72 67 69 6e 3a 20 35 70 78 20 ....margin: 5px
0930: 31 30 70 78 20 30 70 78 20 30 70 78 3b 0a 09 09 10px 0px 0px;...
0940: 70 61 64 64 69 6e 67 3a 34 70 78 20 32 30 70 78 padding:4px 20px
0950: 3b 0a 09 09 62 6f 72 64 65 72 2d 72 61 64 69 75 ;...border-radiu
0960: 73 3a 30 70 78 3b 0a 09 7d 0a 0a 09 2e 64 6c 2d s:0px;..}....dl-
0970: 6f 6e 65 2c 20 2e 64 6c 2d 6f 6e 65 3a 76 69 73 one, .dl-one:vis
0980: 69 74 65 64 20 7b 0a 09 09 62 61 63 6b 67 72 6f ited {...backgro
0990: 75 6e 64 2d 63 6f 6c 6f 72 3a 20 72 67 62 28 33 und-color: rgb(3
09a0: 34 2c 20 31 38 37 2c 20 31 38 37 29 3b 0a 09 09 4, 187, 187);...
09b0: 63 6f 6c 6f 72 3a 77 68 69 74 65 20 21 69 6d 70 color:white !imp
09c0: 6f 72 74 61 6e 74 3b 0a 09 7d 0a 0a 09 2e 64 6c ortant;..}....dl
09d0: 2d 74 77 6f 2c 20 2e 64 6c 2d 74 77 6f 3a 76 69 -two, .dl-two:vi
09e0: 73 69 74 65 64 20 7b 0a 09 09 62 61 63 6b 67 72 sited {...backgr
09f0: 6f 75 6e 64 2d 63 6f 6c 6f 72 3a 23 64 64 64 3b ound-color:#ddd;
0a00: 0a 09 09 63 6f 6c 6f 72 3a 23 30 30 30 20 21 69 ...color:#000 !i
0a10: 6d 70 6f 72 74 61 6e 74 3b 0a 09 7d 0a 0a 09 2e mportant;..}....
0a20: 64 6c 2d 6f 6e 65 3a 68 6f 76 65 72 20 7b 0a 09 dl-one:hover {..
0a30: 09 62 61 63 6b 67 72 6f 75 6e 64 2d 63 6f 6c 6f .background-colo
0a40: 72 3a 72 67 62 28 33 34 2c 20 31 38 37 2c 20 31 r:rgb(34, 187, 1
0a50: 38 37 29 3b 0a 09 09 63 6f 6c 6f 72 3a 77 68 69 87);...color:whi
0a60: 74 65 3b 0a 09 09 74 65 78 74 2d 64 65 63 6f 72 te;...text-decor
0a70: 61 74 69 6f 6e 3a 6e 6f 6e 65 3b 0a 09 7d 0a 0a ation:none;..}..
0a80: 09 2e 64 6c 2d 74 77 6f 3a 68 6f 76 65 72 20 7b ..dl-two:hover {
0a90: 0a 09 09 62 61 63 6b 67 72 6f 75 6e 64 2d 63 6f ...background-co
0aa0: 6c 6f 72 3a 23 63 63 63 3b 0a 09 09 63 6f 6c 6f lor:#ccc;...colo
0ab0: 72 3a 23 31 31 31 3b 0a 09 09 74 65 78 74 2d 64 r:#111;...text-d
0ac0: 65 63 6f 72 61 74 69 6f 6e 3a 6e 6f 6e 65 3b 0a ecoration:none;.
0ad0: 09 7d 0a 0a 09 62 75 74 74 6f 6e 20 7b 0a 09 09 .}...button {...
0ae0: 6f 75 74 6c 69 6e 65 3a 6e 6f 6e 65 3b 0a 09 7d outline:none;..}
0af0: 0a 0a 09 23 63 6f 6c 75 6d 6e 20 7b 0a 09 09 77 ...#column {...w
0b00: 69 64 74 68 3a 36 30 30 70 78 3b 0a 09 09 6d 61 idth:600px;...ma
0b10: 72 67 69 6e 3a 35 30 70 78 20 61 75 74 6f 3b 0a rgin:50px auto;.
0b20: 09 7d 0a 0a 09 40 6d 65 64 69 61 20 73 63 72 65 .}...@media scre
0b30: 65 6e 20 61 6e 64 20 28 6d 61 78 2d 77 69 64 74 en and (max-widt
0b40: 68 3a 20 39 30 30 70 78 29 20 7b 0a 09 09 23 63 h: 900px) {...#c
0b50: 6f 6c 75 6d 6e 20 7b 0a 09 09 09 77 69 64 74 68 olumn {....width
0b60: 3a 20 61 75 74 6f 3b 0a 09 09 09 70 61 64 64 69 : auto;....paddi
0b70: 6e 67 3a 30 70 78 20 34 30 70 78 3b 0a 09 09 7d ng:0px 40px;...}
0b80: 0a 09 7d 0a 0a 3c 2f 73 74 79 6c 65 3e 0a 0a 3c ..}..</style>..<
0b90: 21 2d 2d 20 67 65 6e 65 72 61 6c 20 63 6f 6e 74 !-- general cont
0ba0: 61 69 6e 65 72 20 2d 2d 3e 0a 3c 64 69 76 20 69 ainer -->.<div i
0bb0: 64 3d 22 63 6f 6c 75 6d 6e 22 3e 0a 0a 09 3c 64 d="column">...<d
0bc0: 69 76 20 73 74 79 6c 65 3d 22 6f 76 65 72 66 6c iv style="overfl
0bd0: 6f 77 3a 61 75 74 6f 3b 68 65 69 67 68 74 3a 32 ow:auto;height:2
0be0: 31 32 70 78 22 3e 0a 0a 09 09 3c 68 31 3e 4e 65 12px">....<h1>Ne
0bf0: 78 75 73 55 49 3c 2f 68 31 3e 0a 09 09 3c 68 32 xusUI</h1>...<h2
0c00: 3e 57 65 62 20 41 75 64 69 6f 20 49 6e 74 65 72 >Web Audio Inter
0c10: 66 61 63 65 73 3c 2f 68 32 3e 3c 62 72 3e 0a 09 faces</h2><br>..
0c20: 09 3c 64 69 76 20 69 64 3d 22 64 65 6d 6f 72 61 .<div id="demora
0c30: 63 6b 22 20 73 74 79 6c 65 3d 22 6d 61 72 67 69 ck" style="margi
0c40: 6e 2d 74 6f 70 3a 31 30 70 78 22 3e 0a 0a 09 09 n-top:10px">....
0c50: 09 3c 64 69 76 20 73 74 79 6c 65 3d 22 66 6c 6f .<div style="flo
0c60: 61 74 3a 6c 65 66 74 22 3e 0a 09 09 09 09 3c 64 at:left">.....<d
0c70: 69 76 20 6e 65 78 75 73 2d 75 69 3d 22 64 69 61 iv nexus-ui="dia
0c80: 6c 22 20 69 64 3d 22 64 65 6d 6f 32 22 20 73 74 l" id="demo2" st
0c90: 79 6c 65 3d 22 77 69 64 74 68 3a 38 30 70 78 3b yle="width:80px;
0ca0: 68 65 69 67 68 74 3a 37 30 70 78 3b 6d 61 72 67 height:70px;marg
0cb0: 69 6e 2d 74 6f 70 3a 31 30 70 78 3b 22 3e 3c 2f in-top:10px;"></
0cc0: 64 69 76 3e 0a 09 09 09 09 3c 64 69 76 20 6e 65 div>.....<div ne
0cd0: 78 75 73 2d 75 69 3d 22 6e 75 6d 62 65 72 22 20 xus-ui="number"
0ce0: 69 64 3d 22 64 65 6d 6f 33 22 20 73 74 79 6c 65 id="demo3" style
0cf0: 3d 22 77 69 64 74 68 3a 35 30 70 78 3b 68 65 69 ="width:50px;hei
0d00: 67 68 74 3a 32 35 70 78 3b 6d 61 72 67 69 6e 3a ght:25px;margin:
0d10: 35 70 78 20 61 75 74 6f 20 30 70 78 3b 22 3e 3c 5px auto 0px;"><
0d20: 2f 64 69 76 3e 0a 09 09 09 3c 2f 64 69 76 3e 0a /div>....</div>.
0d30: 09 09 09 3c 64 69 76 20 6e 65 78 75 73 2d 75 69 ...<div nexus-ui
0d40: 3d 22 73 6c 69 64 65 72 22 20 69 64 3d 22 64 65 ="slider" id="de
0d50: 6d 6f 73 6c 31 22 20 73 74 79 6c 65 3d 22 77 69 mosl1" style="wi
0d60: 64 74 68 3a 32 30 70 78 3b 68 65 69 67 68 74 3a dth:20px;height:
0d70: 31 30 30 70 78 3b 66 6c 6f 61 74 3a 6c 65 66 74 100px;float:left
0d80: 3b 6d 61 72 67 69 6e 3a 31 30 70 78 20 30 70 78 ;margin:10px 0px
0d90: 20 30 70 78 20 35 70 78 3b 22 3e 3c 2f 64 69 76 0px 5px;"></div
0da0: 3e 0a 09 09 09 3c 64 69 76 20 6e 65 78 75 73 2d >....<div nexus-
0db0: 75 69 3d 22 73 6c 69 64 65 72 22 20 69 64 3d 22 ui="slider" id="
0dc0: 64 65 6d 6f 73 6c 32 22 20 73 74 79 6c 65 3d 22 demosl2" style="
0dd0: 77 69 64 74 68 3a 32 30 70 78 3b 68 65 69 67 68 width:20px;heigh
0de0: 74 3a 31 30 30 70 78 3b 66 6c 6f 61 74 3a 6c 65 t:100px;float:le
0df0: 66 74 3b 6d 61 72 67 69 6e 3a 31 30 70 78 20 30 ft;margin:10px 0
0e00: 70 78 20 30 70 78 20 35 70 78 3b 22 3e 3c 2f 64 px 0px 5px;"></d
0e10: 69 76 3e 0a 09 09 09 3c 64 69 76 20 6e 65 78 75 iv>....<div nexu
0e20: 73 2d 75 69 3d 22 73 6c 69 64 65 72 22 20 69 64 s-ui="slider" id
0e30: 3d 22 64 65 6d 6f 73 6c 33 22 20 73 74 79 6c 65 ="demosl3" style
0e40: 3d 22 77 69 64 74 68 3a 32 30 70 78 3b 68 65 69 ="width:20px;hei
0e50: 67 68 74 3a 31 30 30 70 78 3b 66 6c 6f 61 74 3a ght:100px;float:
0e60: 6c 65 66 74 3b 6d 61 72 67 69 6e 3a 31 30 70 78 left;margin:10px
0e70: 20 30 70 78 20 30 70 78 20 35 70 78 3b 22 3e 3c 0px 0px 5px;"><
0e80: 2f 64 69 76 3e 0a 09 09 09 3c 64 69 76 20 6e 65 /div>....<div ne
0e90: 78 75 73 2d 75 69 3d 22 73 65 71 75 65 6e 63 65 xus-ui="sequence
0ea0: 72 22 20 69 64 3d 22 64 65 6d 6f 34 22 20 73 74 r" id="demo4" st
0eb0: 79 6c 65 3d 22 77 69 64 74 68 3a 32 30 30 70 78 yle="width:200px
0ec0: 3b 68 65 69 67 68 74 3a 31 30 30 70 78 3b 66 6c ;height:100px;fl
0ed0: 6f 61 74 3a 6c 65 66 74 3b 6d 61 72 67 69 6e 3a oat:left;margin:
0ee0: 31 30 70 78 20 30 70 78 20 30 70 78 20 35 70 78 10px 0px 0px 5px
0ef0: 3b 22 3e 3c 2f 64 69 76 3e 0a 0a 09 09 3c 2f 64 ;"></div>....</d
0f00: 69 76 3e 0a 0a 09 09 3c 73 63 72 69 70 74 3e 0a iv>....<script>.
0f10: 0a 09 09 4e 65 78 75 73 2e 63 6f 6e 74 65 78 74 ...Nexus.context
0f20: 20 3d 20 54 6f 6e 65 2e 63 6f 6e 74 65 78 74 3b = Tone.context;
0f30: 0a 0a 09 09 76 61 72 20 72 61 63 6b 31 20 3d 20 ....var rack1 =
0f40: 6e 65 77 20 4e 65 78 75 73 2e 52 61 63 6b 28 22 new Nexus.Rack("
0f50: 64 65 6d 6f 72 61 63 6b 22 29 0a 09 09 72 61 63 demorack")...rac
0f60: 6b 31 2e 64 65 6d 6f 33 2e 6c 69 6e 6b 28 72 61 k1.demo3.link(ra
0f70: 63 6b 31 2e 64 65 6d 6f 32 29 0a 09 09 72 61 63 ck1.demo2)...rac
0f80: 6b 31 2e 64 65 6d 6f 73 6c 31 2e 76 61 6c 75 65 k1.demosl1.value
0f90: 20 3d 20 30 2e 37 0a 09 09 72 61 63 6b 31 2e 64 = 0.7...rack1.d
0fa0: 65 6d 6f 73 6c 32 2e 76 61 6c 75 65 20 3d 20 30 emosl2.value = 0
0fb0: 2e 35 0a 09 09 72 61 63 6b 31 2e 64 65 6d 6f 73 .5...rack1.demos
0fc0: 6c 33 2e 76 61 6c 75 65 20 3d 20 30 2e 33 0a 09 l3.value = 0.3..
0fd0: 09 72 61 63 6b 31 2e 64 65 6d 6f 32 2e 76 61 6c .rack1.demo2.val
0fe0: 75 65 20 3d 20 30 2e 35 0a 09 09 72 61 63 6b 31 ue = 0.5...rack1
0ff0: 2e 64 65 6d 6f 34 2e 63 6f 6c 75 6d 6e 73 20 3d .demo4.columns =
1000: 20 31 30 3b 0a 09 09 72 61 63 6b 31 2e 64 65 6d 10;...rack1.dem
1010: 6f 34 2e 6d 61 74 72 69 78 2e 73 65 74 2e 61 6c o4.matrix.set.al
1020: 6c 28 5b 0a 09 09 09 5b 30 2c 30 2c 30 2c 30 2c l([....[0,0,0,0,
1030: 30 2c 30 2c 30 2c 30 2c 30 2c 30 5d 2c 0a 09 09 0,0,0,0,0,0],...
1040: 09 5b 30 2c 30 2c 30 2c 30 2c 30 2c 30 2c 30 2c .[0,0,0,0,0,0,0,
1050: 30 2c 30 2c 30 5d 2c 0a 09 09 09 5b 30 2c 30 2c 0,0,0],....[0,0,
1060: 30 2c 31 2c 30 2c 30 2c 30 2c 30 2c 31 2c 30 5d 0,1,0,0,0,0,1,0]
1070: 2c 0a 09 09 09 5b 30 2c 30 2c 31 2c 30 2c 31 2c ,....[0,0,1,0,1,
1080: 30 2c 30 2c 31 2c 30 2c 31 5d 2c 0a 09 09 09 5b 0,0,1,0,1],....[
1090: 31 2c 30 2c 30 2c 30 2c 30 2c 31 2c 30 2c 30 2c 1,0,0,0,0,1,0,0,
10a0: 30 2c 30 5d 0a 09 09 5d 29 0a 09 09 72 61 63 6b 0,0]...])...rack
10b0: 31 2e 64 65 6d 6f 34 2e 73 74 61 72 74 28 29 3b 1.demo4.start();
10c0: 0a 0a 09 09 3c 2f 73 63 72 69 70 74 3e 0a 0a 09 ....</script>...
10d0: 3c 2f 64 69 76 3e 0a 0a 0a 09 3c 64 69 76 20 73 </div>....<div s
10e0: 74 79 6c 65 3d 22 63 6c 65 61 72 3a 62 6f 74 68 tyle="clear:both
10f0: 3b 6d 61 72 67 69 6e 3a 34 30 70 78 20 30 70 78 ;margin:40px 0px
1100: 20 30 70 78 3b 22 3e 0a 0a 09 09 3c 70 20 63 6c 0px;">....<p cl
1110: 61 73 73 3d 22 6f 76 65 72 76 69 65 77 22 3e 0a ass="overview">.
1120: 20 20 20 20 20 20 4e 65 78 75 73 55 49 20 69 73 NexusUI is
1130: 20 61 20 63 6f 6c 6c 65 63 74 69 6f 6e 20 6f 66 a collection of
1140: 20 48 54 4d 4c 35 20 69 6e 74 65 72 66 61 63 65 HTML5 interface
1150: 73 20 61 6e 64 20 4a 61 76 61 73 63 72 69 70 74 s and Javascript
1160: 20 68 65 6c 70 65 72 20 66 75 6e 63 74 69 6f 6e helper function
1170: 73 20 74 6f 20 61 73 73 69 73 74 20 77 69 74 68 s to assist with
1180: 20 62 75 69 6c 64 69 6e 67 20 77 65 62 20 61 75 building web au
1190: 64 69 6f 20 69 6e 73 74 72 75 6d 65 6e 74 73 20 dio instruments
11a0: 69 6e 20 74 68 65 20 62 72 6f 77 73 65 72 2e 0a in the browser..
11b0: 20 20 20 20 3c 2f 70 3e 0a 0a 20 20 20 20 3c 70 </p>.. <p
11c0: 20 63 6c 61 73 73 3d 22 6f 76 65 72 76 69 65 77 class="overview
11d0: 22 3e 0a 09 09 09 49 6e 20 61 64 64 69 74 69 6f ">....In additio
11e0: 6e 20 74 6f 20 69 6e 74 65 72 66 61 63 65 73 2c n to interfaces,
11f0: 20 69 74 20 6f 66 66 65 72 73 20 61 20 66 65 77 it offers a few
1200: 20 68 65 6c 70 65 72 20 6d 65 74 68 6f 64 73 20 helper methods
1210: 66 6f 72 20 3c 62 3e 74 75 6e 69 6e 67 3c 2f 62 for <b>tuning</b
1220: 3e 20 61 6e 64 20 3c 62 3e 74 69 6d 69 6e 67 3c > and <b>timing<
1230: 2f 62 3e 2e 0a 09 09 09 49 74 20 64 6f 65 73 20 /b>.....It does
1240: 6e 6f 74 20 70 72 6f 76 69 64 65 20 61 6e 79 20 not provide any
1250: 73 6f 75 6e 64 2d 6d 61 6b 69 6e 67 20 63 61 70 sound-making cap
1260: 61 62 69 6c 69 74 69 65 73 20 e2 80 93 e2 80 93 abilities ......
1270: 20 66 6f 72 20 74 68 61 74 2c 20 63 68 65 63 6b for that, check
1280: 20 6f 75 74 20 74 68 65 20 3c 61 20 68 72 65 66 out the <a href
1290: 3d 22 68 74 74 70 73 3a 2f 2f 64 65 76 65 6c 6f ="https://develo
12a0: 70 65 72 2e 6d 6f 7a 69 6c 6c 61 2e 6f 72 67 2f per.mozilla.org/
12b0: 65 6e 2d 55 53 2f 64 6f 63 73 2f 57 65 62 2f 41 en-US/docs/Web/A
12c0: 50 49 2f 57 65 62 5f 41 75 64 69 6f 5f 41 50 49 PI/Web_Audio_API
12d0: 22 20 74 61 72 67 65 74 3d 22 62 6c 61 6e 6b 22 " target="blank"
12e0: 3e 57 65 62 20 41 75 64 69 6f 20 41 50 49 3c 2f >Web Audio API</
12f0: 61 3e 20 6f 72 20 77 65 62 20 61 75 64 69 6f 20 a> or web audio
1300: 6c 69 62 72 61 72 69 65 73 20 73 75 63 68 20 61 libraries such a
1310: 73 20 3c 61 20 68 72 65 66 3d 22 68 74 74 70 3a s <a href="http:
1320: 2f 2f 74 6f 6e 65 6a 73 2e 67 69 74 68 75 62 2e //tonejs.github.
1330: 69 6f 22 20 74 61 72 67 65 74 3d 22 62 6c 61 6e io" target="blan
1340: 6b 22 3e 54 6f 6e 65 2e 6a 73 3c 2f 61 3e 2c 20 k">Tone.js</a>,
1350: 3c 61 20 68 72 65 66 3d 22 68 74 74 70 73 3a 2f <a href="https:/
1360: 2f 67 69 74 68 75 62 2e 63 6f 6d 2f 73 65 62 70 /github.com/sebp
1370: 69 71 2f 57 65 62 50 64 22 20 74 61 72 67 65 74 iq/WebPd" target
1380: 3d 22 62 6c 61 6e 6b 22 3e 57 65 62 50 44 3c 2f ="blank">WebPD</
1390: 61 3e 2c 20 6f 72 20 3c 61 20 68 72 65 66 3d 22 a>, or <a href="
13a0: 68 74 74 70 73 3a 2f 2f 67 69 74 68 75 62 2e 63 https://github.c
13b0: 6f 6d 2f 63 68 61 72 6c 69 65 72 6f 62 65 72 74 om/charlierobert
13c0: 73 2f 67 69 62 62 65 72 2e 61 75 64 69 6f 2e 6c s/gibber.audio.l
13d0: 69 62 22 20 74 61 72 67 65 74 3d 22 62 6c 61 6e ib" target="blan
13e0: 6b 22 3e 47 69 62 62 65 72 3c 2f 61 3e 2e 0a 20 k">Gibber</a>..
13f0: 20 20 20 3c 2f 70 3e 0a 0a 09 09 3c 64 69 76 20 </p>....<div
1400: 73 74 79 6c 65 3d 22 6d 61 72 67 69 6e 3a 34 30 style="margin:40
1410: 70 78 20 61 75 74 6f 20 34 30 70 78 3b 22 3e 0a px auto 40px;">.
1420: 09 09 09 3c 61 20 63 6c 61 73 73 3d 22 64 6c 20 ...<a class="dl
1430: 64 6c 2d 6f 6e 65 22 20 68 72 65 66 3d 22 61 70 dl-one" href="ap
1440: 69 2f 22 3e 44 6f 63 75 6d 65 6e 74 61 74 69 6f i/">Documentatio
1450: 6e 3c 2f 61 3e 0a 09 09 09 3c 61 20 63 6c 61 73 n</a>....<a clas
1460: 73 3d 22 64 6c 20 64 6c 2d 74 77 6f 22 20 68 72 s="dl dl-two" hr
1470: 65 66 3d 22 68 74 74 70 73 3a 2f 2f 67 69 74 68 ef="https://gith
1480: 75 62 2e 63 6f 6d 2f 6e 65 78 75 73 2d 6a 73 2f ub.com/nexus-js/
1490: 75 69 2f 22 3e 56 69 65 77 20 6f 6e 20 47 69 74 ui/">View on Git
14a0: 68 75 62 3c 2f 61 3e 0a 09 09 3c 2f 64 69 76 3e hub</a>...</div>
14b0: 0a 0a 09 3c 2f 64 69 76 3e 0a 0a 09 3c 68 72 20 ...</div>...<hr
14c0: 2f 3e 0a 0a 09 3c 64 69 76 20 73 74 79 6c 65 3d />...<div style=
14d0: 22 6d 61 72 67 69 6e 3a 32 35 70 78 20 30 70 78 "margin:25px 0px
14e0: 3b 22 20 69 64 3d 22 65 78 61 6d 70 6c 65 22 3e ;" id="example">
14f0: 0a 0a 09 09 3c 62 3e 45 78 61 6d 70 6c 65 3c 2f ....<b>Example</
1500: 62 3e 3c 62 72 20 2f 3e 0a 0a 09 09 3c 62 72 20 b><br />....<br
1510: 2f 3e 0a 0a 09 09 3c 62 75 74 74 6f 6e 20 69 64 />....<button id
1520: 3d 22 6d 6f 62 69 6c 65 53 74 61 72 74 22 20 73 ="mobileStart" s
1530: 74 79 6c 65 3d 22 64 69 73 70 6c 61 79 3a 6e 6f tyle="display:no
1540: 6e 65 3b 77 69 64 74 68 3a 32 30 30 70 78 3b 6d ne;width:200px;m
1550: 61 72 67 69 6e 3a 35 70 78 20 33 70 78 3b 22 3e argin:5px 3px;">
1560: 50 72 65 73 73 20 74 6f 20 49 6e 69 74 69 61 6c Press to Initial
1570: 69 7a 65 20 4d 6f 62 69 6c 65 20 41 75 64 69 6f ize Mobile Audio
1580: 3c 2f 62 75 74 74 6f 6e 3e 0a 0a 09 09 3c 21 2d </button>....<!-
1590: 2d 20 72 65 73 75 6c 74 20 67 6f 65 73 20 68 65 - result goes he
15a0: 72 65 20 2d 2d 3e 0a 0a 09 09 3c 64 69 76 20 69 re -->....<div i
15b0: 64 3d 22 70 6f 77 65 72 22 20 73 74 79 6c 65 3d d="power" style=
15c0: 22 77 69 64 74 68 3a 34 30 70 78 3b 68 65 69 67 "width:40px;heig
15d0: 68 74 3a 31 37 70 78 3b 6d 61 72 67 69 6e 3a 31 ht:17px;margin:1
15e0: 35 70 78 20 30 70 78 3b 22 3e 3c 2f 64 69 76 3e 5px 0px;"></div>
15f0: 0a 09 09 3c 64 69 76 20 69 64 3d 22 76 6f 6c 75 ...<div id="volu
1600: 6d 65 22 20 73 74 79 6c 65 3d 22 77 69 64 74 68 me" style="width
1610: 3a 32 30 30 70 78 3b 68 65 69 67 68 74 3a 32 30 :200px;height:20
1620: 70 78 3b 6d 61 72 67 69 6e 3a 35 70 78 20 33 70 px;margin:5px 3p
1630: 78 3b 22 3e 3c 2f 64 69 76 3e 0a 0a 0a 09 09 3c x;"></div>.....<
1640: 73 63 72 69 70 74 3e 0a 0a 76 61 72 20 70 6f 77 script>..var pow
1650: 65 72 20 3d 20 6e 65 77 20 4e 65 78 75 73 2e 54 er = new Nexus.T
1660: 6f 67 67 6c 65 28 22 23 70 6f 77 65 72 22 29 3b oggle("#power");
1670: 0a 76 61 72 20 67 61 69 6e 20 3d 20 6e 65 77 20 .var gain = new
1680: 4e 65 78 75 73 2e 53 6c 69 64 65 72 28 22 23 76 Nexus.Slider("#v
1690: 6f 6c 75 6d 65 22 29 3b 0a 0a 2f 2f 20 43 72 65 olume");..// Cre
16a0: 61 74 65 20 61 20 73 6f 75 6e 64 20 73 6f 75 72 ate a sound sour
16b0: 63 65 20 75 73 69 6e 67 20 54 6f 6e 65 2e 6a 73 ce using Tone.js
16c0: 0a 76 61 72 20 76 6f 6c 75 6d 65 20 3d 20 6e 65 .var volume = ne
16d0: 77 20 54 6f 6e 65 2e 56 6f 6c 75 6d 65 28 2d 49 w Tone.Volume(-I
16e0: 6e 66 69 6e 69 74 79 29 2e 74 6f 4d 61 73 74 65 nfinity).toMaste
16f0: 72 28 29 3b 0a 76 61 72 20 73 79 6e 74 68 20 3d r();.var synth =
1700: 20 6e 65 77 20 54 6f 6e 65 2e 4f 73 63 69 6c 6c new Tone.Oscill
1710: 61 74 6f 72 28 33 30 30 2c 22 73 69 6e 65 22 29 ator(300,"sine")
1720: 2e 63 6f 6e 6e 65 63 74 28 76 6f 6c 75 6d 65 29 .connect(volume)
1730: 3b 0a 0a 2f 2f 20 41 64 64 20 65 76 65 6e 74 20 ;..// Add event
1740: 6c 69 73 74 65 6e 65 72 73 0a 70 6f 77 65 72 2e listeners.power.
1750: 6f 6e 28 27 63 68 61 6e 67 65 27 2c 66 75 6e 63 on('change',func
1760: 74 69 6f 6e 28 76 61 6c 75 65 29 20 7b 0a 09 76 tion(value) {..v
1770: 61 6c 75 65 20 3f 20 73 79 6e 74 68 2e 73 74 61 alue ? synth.sta
1780: 72 74 28 29 20 3a 20 73 79 6e 74 68 2e 73 74 6f rt() : synth.sto
1790: 70 28 29 3b 0a 7d 29 3b 0a 0a 0a 67 61 69 6e 2e p();.});...gain.
17a0: 6f 6e 28 27 63 68 61 6e 67 65 27 2c 66 75 6e 63 on('change',func
17b0: 74 69 6f 6e 28 76 61 6c 75 65 29 20 7b 0a 09 76 tion(value) {..v
17c0: 6f 6c 75 6d 65 2e 76 6f 6c 75 6d 65 2e 72 61 6d olume.volume.ram
17d0: 70 54 6f 28 76 61 6c 75 65 2c 2e 31 29 0a 7d 29 pTo(value,.1).})
17e0: 3b 0a 67 61 69 6e 2e 6d 69 6e 20 3d 20 2d 31 30 ;.gain.min = -10
17f0: 30 0a 67 61 69 6e 2e 6d 61 78 20 3d 20 30 0a 67 0.gain.max = 0.g
1800: 61 69 6e 2e 76 61 6c 75 65 20 3d 20 2d 33 30 0a ain.value = -30.
1810: 0a 09 09 3c 2f 73 63 72 69 70 74 3e 0a 0a 0a 0a ...</script>....
1820: 0a 09 09 3c 62 72 20 2f 3e 3c 62 72 20 2f 3e 0a ...<br /><br />.
1830: 09 09 48 54 4d 4c 0a 0a 09 09 3c 70 72 65 20 63 ..HTML....<pre c
1840: 6c 61 73 73 3d 22 63 6f 64 65 64 69 73 70 6c 61 lass="codedispla
1850: 79 20 6c 61 6e 67 75 61 67 65 2d 68 74 6d 6c 22 y language-html"
1860: 3e 3c 63 6f 64 65 3e 26 6c 74 3b 64 69 76 20 69 ><code><div i
1870: 64 3d 22 70 6f 77 65 72 22 26 67 74 3b 26 6c 74 d="power"><
1880: 3b 64 69 76 26 67 74 3b 0a 26 6c 74 3b 64 69 76 ;div>.<div
1890: 20 69 64 3d 22 67 61 69 6e 22 26 67 74 3b 26 6c id="gain">&l
18a0: 74 3b 64 69 76 26 67 74 3b 3c 2f 63 6f 64 65 3e t;div></code>
18b0: 3c 2f 70 72 65 3e 0a 0a 09 09 3c 62 72 20 2f 3e </pre>....<br />
18c0: 3c 62 72 20 2f 3e 0a 09 09 4a 53 0a 0a 09 09 3c <br />...JS....<
18d0: 70 72 65 20 63 6c 61 73 73 3d 22 63 6f 64 65 64 pre class="coded
18e0: 69 73 70 6c 61 79 20 6c 61 6e 67 75 61 67 65 2d isplay language-
18f0: 6a 61 76 61 73 63 72 69 70 74 22 3e 3c 63 6f 64 javascript"><cod
1900: 65 3e 2f 2f 20 43 72 65 61 74 65 20 69 6e 74 65 e>// Create inte
1910: 72 66 61 63 65 73 0a 76 61 72 20 70 6f 77 65 72 rfaces.var power
1920: 20 3d 20 6e 65 77 20 4e 65 78 75 73 2e 54 6f 67 = new Nexus.Tog
1930: 67 6c 65 28 22 23 70 6f 77 65 72 22 29 3b 0a 76 gle("#power");.v
1940: 61 72 20 67 61 69 6e 20 3d 20 6e 65 77 20 4e 65 ar gain = new Ne
1950: 78 75 73 2e 53 6c 69 64 65 72 28 22 23 67 61 69 xus.Slider("#gai
1960: 6e 22 29 3b 0a 0a 2f 2f 20 43 72 65 61 74 65 20 n");..// Create
1970: 61 20 73 6f 75 6e 64 20 73 6f 75 72 63 65 0a 76 a sound source.v
1980: 61 72 20 76 6f 6c 75 6d 65 20 3d 20 6e 65 77 20 ar volume = new
1990: 54 6f 6e 65 2e 56 6f 6c 75 6d 65 28 2d 49 6e 66 Tone.Volume(-Inf
19a0: 69 6e 69 74 79 29 2e 74 6f 4d 61 73 74 65 72 28 inity).toMaster(
19b0: 29 3b 0a 76 61 72 20 73 79 6e 74 68 20 3d 20 6e );.var synth = n
19c0: 65 77 20 54 6f 6e 65 2e 4f 73 63 69 6c 6c 61 74 ew Tone.Oscillat
19d0: 6f 72 28 33 30 30 2c 22 73 69 6e 65 22 29 2e 63 or(300,"sine").c
19e0: 6f 6e 6e 65 63 74 28 76 6f 6c 75 6d 65 29 3b 0a onnect(volume);.
19f0: 0a 2f 2f 20 4c 69 73 74 65 6e 20 66 6f 72 20 69 .// Listen for i
1a00: 6e 74 65 72 66 61 63 65 20 65 76 65 6e 74 73 0a nterface events.
1a10: 70 6f 77 65 72 2e 6f 6e 28 27 63 68 61 6e 67 65 power.on('change
1a20: 27 2c 66 75 6e 63 74 69 6f 6e 28 76 29 20 7b 0a ',function(v) {.
1a30: 09 76 20 3f 20 73 79 6e 74 68 2e 73 74 61 72 74 .v ? synth.start
1a40: 28 29 20 3a 20 73 79 6e 74 68 2e 73 74 6f 70 28 () : synth.stop(
1a50: 29 3b 0a 7d 29 3b 0a 0a 67 61 69 6e 2e 6f 6e 28 );.});..gain.on(
1a60: 27 63 68 61 6e 67 65 27 2c 66 75 6e 63 74 69 6f 'change',functio
1a70: 6e 28 76 29 20 7b 0a 09 76 6f 6c 75 6d 65 2e 76 n(v) {..volume.v
1a80: 6f 6c 75 6d 65 2e 72 61 6d 70 54 6f 28 76 2c 2e olume.rampTo(v,.
1a90: 31 29 0a 7d 29 3b 0a 67 61 69 6e 2e 6d 69 6e 20 1).});.gain.min
1aa0: 3d 20 2d 31 30 30 3b 0a 67 61 69 6e 2e 6d 61 78 = -100;.gain.max
1ab0: 20 3d 20 30 3b 0a 67 61 69 6e 2e 76 61 6c 75 65 = 0;.gain.value
1ac0: 20 3d 20 2d 33 30 3b 3c 2f 63 6f 64 65 3e 3c 2f = -30;</code></
1ad0: 70 72 65 3e 0a 0a 09 3c 21 2d 2d 09 3c 62 72 20 pre>...<!--.<br
1ae0: 2f 3e 3c 62 72 20 2f 3e 0a 09 09 43 53 53 0a 0a /><br />...CSS..
1af0: 09 09 3c 70 72 65 20 63 6c 61 73 73 3d 22 63 6f ..<pre class="co
1b00: 64 65 64 69 73 70 6c 61 79 20 6c 61 6e 67 75 61 dedisplay langua
1b10: 67 65 2d 63 73 73 22 3e 3c 63 6f 64 65 3e 23 70 ge-css"><code>#p
1b20: 6f 77 65 72 20 7b 0a 77 69 64 74 68 3a 34 30 70 ower {.width:40p
1b30: 78 3b 0a 68 65 69 67 68 74 3a 31 37 70 78 3b 0a x;.height:17px;.
1b40: 6d 61 72 67 69 6e 3a 31 35 70 78 20 30 70 78 3b margin:15px 0px;
1b50: 0a 7d 0a 0a 23 65 63 68 6f 20 7b 0a 77 69 64 74 .}..#echo {.widt
1b60: 68 3a 32 30 30 70 78 3b 0a 68 65 69 67 68 74 3a h:200px;.height:
1b70: 32 30 70 78 3b 0a 6d 61 72 67 69 6e 3a 35 70 78 20px;.margin:5px
1b80: 20 33 70 78 3b 0a 7d 3c 2f 63 6f 64 65 3e 3c 2f 3px;.}</code></
1b90: 70 72 65 3e 0a 2d 2d 3e 0a 0a 09 3c 2f 64 69 76 pre>.-->...</div
1ba0: 3e 0a 0a 09 3c 62 72 3e 0a 0a 09 3c 68 72 20 2f >...<br>...<hr /
1bb0: 3e 0a 0a 09 3c 64 69 76 20 73 74 79 6c 65 3d 22 >...<div style="
1bc0: 6d 61 72 67 69 6e 3a 32 35 70 78 20 30 70 78 20 margin:25px 0px
1bd0: 32 35 70 78 3b 22 3e 0a 0a 09 09 3c 62 3e 53 75 25px;">....<b>Su
1be0: 70 70 6f 72 74 3c 2f 62 3e 3c 62 72 20 2f 3e 3c pport</b><br /><
1bf0: 62 72 20 2f 3e 0a 09 09 4e 65 78 75 73 55 49 20 br />...NexusUI
1c00: 69 73 20 61 6e 20 6f 70 65 6e 2d 73 6f 75 72 63 is an open-sourc
1c10: 65 20 70 72 6f 6a 65 63 74 20 77 68 69 63 68 20 e project which
1c20: 69 73 20 6d 61 69 6e 74 61 69 6e 65 64 20 69 6e is maintained in
1c30: 20 6d 79 20 73 70 61 72 65 20 74 69 6d 65 2e 20 my spare time.
1c40: 49 66 20 79 6f 75 20 65 6e 6a 6f 79 20 4e 65 78 If you enjoy Nex
1c50: 75 73 55 49 2c 20 70 6c 65 61 73 65 20 63 6f 6e usUI, please con
1c60: 73 69 64 65 72 69 6e 67 20 73 75 70 70 6f 72 74 sidering support
1c70: 69 6e 67 20 69 74 73 20 63 6f 6e 74 69 6e 75 65 ing its continue
1c80: 64 20 64 65 76 65 6c 6f 70 6d 65 6e 74 20 61 6e d development an
1c90: 64 20 6b 65 65 70 69 6e 67 20 69 74 20 6f 70 65 d keeping it ope
1ca0: 6e 2d 73 6f 75 72 63 65 2e 3c 62 72 3e 3c 62 72 n-source.<br><br
1cb0: 3e 0a 09 09 3c 66 6f 72 6d 20 61 63 74 69 6f 6e >...<form action
1cc0: 3d 22 68 74 74 70 73 3a 2f 2f 77 77 77 2e 70 61 ="https://www.pa
1cd0: 79 70 61 6c 2e 63 6f 6d 2f 63 67 69 2d 62 69 6e ypal.com/cgi-bin
1ce0: 2f 77 65 62 73 63 72 22 20 6d 65 74 68 6f 64 3d /webscr" method=
1cf0: 22 70 6f 73 74 22 20 74 61 72 67 65 74 3d 22 5f "post" target="_
1d00: 74 6f 70 22 3e 0a 09 09 3c 69 6e 70 75 74 20 74 top">...<input t
1d10: 79 70 65 3d 22 68 69 64 64 65 6e 22 20 6e 61 6d ype="hidden" nam
1d20: 65 3d 22 63 6d 64 22 20 76 61 6c 75 65 3d 22 5f e="cmd" value="_
1d30: 64 6f 6e 61 74 69 6f 6e 73 22 20 2f 3e 0a 09 09 donations" />...
1d40: 3c 69 6e 70 75 74 20 74 79 70 65 3d 22 68 69 64 <input type="hid
1d50: 64 65 6e 22 20 6e 61 6d 65 3d 22 62 75 73 69 6e den" name="busin
1d60: 65 73 73 22 20 76 61 6c 75 65 3d 22 4b 54 4b 42 ess" value="KTKB
1d70: 44 42 58 48 33 39 4c 36 55 22 20 2f 3e 0a 09 09 DBXH39L6U" />...
1d80: 3c 69 6e 70 75 74 20 74 79 70 65 3d 22 68 69 64 <input type="hid
1d90: 64 65 6e 22 20 6e 61 6d 65 3d 22 63 75 72 72 65 den" name="curre
1da0: 6e 63 79 5f 63 6f 64 65 22 20 76 61 6c 75 65 3d ncy_code" value=
1db0: 22 55 53 44 22 20 2f 3e 0a 09 09 3c 69 6e 70 75 "USD" />...<inpu
1dc0: 74 20 74 79 70 65 3d 22 69 6d 61 67 65 22 20 73 t type="image" s
1dd0: 72 63 3d 22 68 74 74 70 73 3a 2f 2f 77 77 77 2e rc="https://www.
1de0: 70 61 79 70 61 6c 6f 62 6a 65 63 74 73 2e 63 6f paypalobjects.co
1df0: 6d 2f 65 6e 5f 55 53 2f 69 2f 62 74 6e 2f 62 74 m/en_US/i/btn/bt
1e00: 6e 5f 64 6f 6e 61 74 65 5f 4c 47 2e 67 69 66 22 n_donate_LG.gif"
1e10: 20 62 6f 72 64 65 72 3d 22 30 22 20 6e 61 6d 65 border="0" name
1e20: 3d 22 73 75 62 6d 69 74 22 20 74 69 74 6c 65 3d ="submit" title=
1e30: 22 50 61 79 50 61 6c 20 2d 20 54 68 65 20 73 61 "PayPal - The sa
1e40: 66 65 72 2c 20 65 61 73 69 65 72 20 77 61 79 20 fer, easier way
1e50: 74 6f 20 70 61 79 20 6f 6e 6c 69 6e 65 21 22 20 to pay online!"
1e60: 61 6c 74 3d 22 44 6f 6e 61 74 65 20 77 69 74 68 alt="Donate with
1e70: 20 50 61 79 50 61 6c 20 62 75 74 74 6f 6e 22 20 PayPal button"
1e80: 2f 3e 0a 09 09 3c 69 6d 67 20 61 6c 74 3d 22 22 />...<img alt=""
1e90: 20 62 6f 72 64 65 72 3d 22 30 22 20 73 72 63 3d border="0" src=
1ea0: 22 68 74 74 70 73 3a 2f 2f 77 77 77 2e 70 61 79 "https://www.pay
1eb0: 70 61 6c 2e 63 6f 6d 2f 65 6e 5f 55 53 2f 69 2f pal.com/en_US/i/
1ec0: 73 63 72 2f 70 69 78 65 6c 2e 67 69 66 22 20 77 scr/pixel.gif" w
1ed0: 69 64 74 68 3d 22 31 22 20 68 65 69 67 68 74 3d idth="1" height=
1ee0: 22 31 22 20 2f 3e 0a 09 09 3c 2f 66 6f 72 6d 3e "1" />...</form>
1ef0: 0a 0a 09 3c 2f 64 69 76 3e 0a 0a 0a 3c 2f 64 69 ...</div>...</di
1f00: 76 3e 0a 0a 0a 3c 21 2d 2d 20 46 4f 4f 54 45 52 v>...<!-- FOOTER
1f10: 20 2d 2d 3e 0a 3c 64 69 76 20 73 74 79 6c 65 3d -->.<div style=
1f20: 22 66 6f 6e 74 2d 73 69 7a 65 3a 31 30 70 74 3b "font-size:10pt;
1f30: 63 6f 6c 6f 72 3a 23 61 61 61 3b 70 61 64 64 69 color:#aaa;paddi
1f40: 6e 67 3a 33 30 70 78 3b 74 65 78 74 2d 61 6c 69 ng:30px;text-ali
1f50: 67 6e 3a 63 65 6e 74 65 72 3b 6d 61 72 67 69 6e gn:center;margin
1f60: 2d 74 6f 70 3a 32 30 70 78 3b 62 61 63 6b 67 72 -top:20px;backgr
1f70: 6f 75 6e 64 2d 63 6f 6c 6f 72 3a 23 65 65 65 3b ound-color:#eee;
1f80: 22 3e 0a 0a 09 3c 64 69 76 20 73 74 79 6c 65 3d ">...<div style=
1f90: 22 66 6f 6e 74 2d 73 69 7a 65 3a 33 35 70 74 3b "font-size:35pt;
1fa0: 6d 61 72 67 69 6e 3a 35 70 78 20 61 75 74 6f 20 margin:5px auto
1fb0: 32 30 70 78 3b 63 6f 6c 6f 72 3a 23 64 61 64 61 20px;color:#dada
1fc0: 64 61 3b 77 69 64 74 68 3a 31 30 30 70 78 3b 74 da;width:100px;t
1fd0: 65 78 74 2d 61 6c 69 67 6e 3a 63 65 6e 74 65 72 ext-align:center
1fe0: 3b 22 3e c2 a9 3c 2f 64 69 76 3e 0a 09 65 78 70 ;">..</div>..exp
1ff0: 65 72 69 6d 65 6e 74 61 6c 20 6d 75 73 69 63 20 erimental music
2000: 26 20 64 69 67 69 74 61 6c 20 6d 65 64 69 61 20 & digital media
2010: 40 20 6c 6f 75 69 73 69 61 6e 61 20 73 74 61 74 @ louisiana stat
2020: 65 20 75 6e 69 76 65 72 69 73 74 79 20 32 30 31 e univeristy 201
2030: 33 2d 32 30 31 36 3c 62 72 20 2f 3e 0a 09 62 65 3-2016<br />..be
2040: 6e 20 74 61 79 6c 6f 72 20 32 30 31 37 2d 32 30 n taylor 2017-20
2050: 31 39 0a 0a 3c 2f 64 69 76 3e 0a 0a 0a 0a 3c 73 19..</div>....<s
2060: 63 72 69 70 74 3e 0a 20 20 20 20 50 72 69 73 6d cript>. Prism
2070: 2e 68 69 67 68 6c 69 67 68 74 41 6c 6c 28 29 3b .highlightAll();
2080: 0a 3c 2f 73 63 72 69 70 74 3e 0a 0a 0a 0a 3c 21 .</script>....<!
2090: 2d 2d 20 47 4f 4f 47 4c 45 20 41 4e 41 4c 59 54 -- GOOGLE ANALYT
20a0: 49 43 53 20 2d 2d 3e 0a 0a 3c 73 63 72 69 70 74 ICS -->..<script
20b0: 3e 0a 20 20 28 66 75 6e 63 74 69 6f 6e 28 69 2c >. (function(i,
20c0: 73 2c 6f 2c 67 2c 72 2c 61 2c 6d 29 7b 69 5b 27 s,o,g,r,a,m){i['
20d0: 47 6f 6f 67 6c 65 41 6e 61 6c 79 74 69 63 73 4f GoogleAnalyticsO
20e0: 62 6a 65 63 74 27 5d 3d 72 3b 69 5b 72 5d 3d 69 bject']=r;i[r]=i
20f0: 5b 72 5d 7c 7c 66 75 6e 63 74 69 6f 6e 28 29 7b [r]||function(){
2100: 0a 20 20 28 69 5b 72 5d 2e 71 3d 69 5b 72 5d 2e . (i[r].q=i[r].
2110: 71 7c 7c 5b 5d 29 2e 70 75 73 68 28 61 72 67 75 q||[]).push(argu
2120: 6d 65 6e 74 73 29 7d 2c 69 5b 72 5d 2e 6c 3d 31 ments)},i[r].l=1
2130: 2a 6e 65 77 20 44 61 74 65 28 29 3b 61 3d 73 2e *new Date();a=s.
2140: 63 72 65 61 74 65 45 6c 65 6d 65 6e 74 28 6f 29 createElement(o)
2150: 2c 0a 20 20 6d 3d 73 2e 67 65 74 45 6c 65 6d 65 ,. m=s.getEleme
2160: 6e 74 73 42 79 54 61 67 4e 61 6d 65 28 6f 29 5b ntsByTagName(o)[
2170: 30 5d 3b 61 2e 61 73 79 6e 63 3d 31 3b 61 2e 73 0];a.async=1;a.s
2180: 72 63 3d 67 3b 6d 2e 70 61 72 65 6e 74 4e 6f 64 rc=g;m.parentNod
2190: 65 2e 69 6e 73 65 72 74 42 65 66 6f 72 65 28 61 e.insertBefore(a
21a0: 2c 6d 29 0a 20 20 7d 29 28 77 69 6e 64 6f 77 2c ,m). })(window,
21b0: 64 6f 63 75 6d 65 6e 74 2c 27 73 63 72 69 70 74 document,'script
21c0: 27 2c 27 68 74 74 70 73 3a 2f 2f 77 77 77 2e 67 ','https://www.g
21d0: 6f 6f 67 6c 65 2d 61 6e 61 6c 79 74 69 63 73 2e oogle-analytics.
21e0: 63 6f 6d 2f 61 6e 61 6c 79 74 69 63 73 2e 6a 73 com/analytics.js
21f0: 27 2c 27 67 61 27 29 3b 0a 0a 20 20 67 61 28 27 ','ga');.. ga('
2200: 63 72 65 61 74 65 27 2c 20 27 55 41 2d 34 32 32 create', 'UA-422
2210: 30 39 37 31 34 2d 32 27 2c 20 27 61 75 74 6f 27 09714-2', 'auto'
2220: 29 3b 0a 20 20 67 61 28 27 73 65 6e 64 27 2c 20 );. ga('send',
2230: 27 70 61 67 65 76 69 65 77 27 29 3b 0a 0a 3c 2f 'pageview');..</
2240: 73 63 72 69 70 74 3e 0a 0a 3c 2f 62 6f 64 79 3e script>..</body>
2250: 0a 3c 2f 68 74 6d 6c 3e 0a .</html>.