<!doctype html>
<html>
<head>
<!--Author: Ben Taylor -->
<title>Nexus Web Audio Interfaces</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1., user-scalable=no, width=device-width"/>
<link rel="icon" type="image/png" href="favicon.png" />
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet' type='text/css'>
<!-- jquery links -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="api/js/Tone9.js"></script>
<!-- nexus links -->
<script type="text/javascript" src="dist/NexusUI.js"></script>
<link rel='stylesheet' href='api/prism/prism.css' />
<script src="api/prism/prism.js"></script>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@suncanon">
<meta name="twitter:creator" content="@suncanon">
<meta name="twitter:title" content="NexusUI: Web Audio Interfaces">
<meta name="twitter:description" content="A JavaScript toolkit for building instruments in the browser.">
<meta name="twitter:image" content="https://nexus-js.github.io/ui/images/card.png">
</head>
<body>
<style>
body {
line-height:normal;
font-family:'Open Sans', helvetica neue;
}
.row {
max-width:none;
}
a {
color: rgb(20, 160, 170);
}
a:hover {
text-decoration:underline;
}
h1, h2, h3 {
font-family: "Muli", sans-serif;
font-weight: 300;
color:#333;
font-size:20pt;
display:block;
line-height:20pt;
padding:3px 0px;
margin:0px 0px;
}
h2 {
font-size:16pt;
}
h3 {
padding-top:0px;
font-size:13pt;
font-weight: 1000;
}
.codedisplay {
border:solid 0px #aaa;
outline:none;
background-color:#f7f7f7;
font-family: courier;
font-size:10pt;
color:#19b;
padding:20px !important;
border-radius:6px;
box-shadow:none;
-webkit-box-shadow:none;
resize:none;
width:100%;
}
textarea {
user-select:none;
-webkit-user-select:none;
-moz-user-select: none;
}
.dl {
border-radius:5px;
border:none;
font-weight:normal;
padding:10px 20px;
text-decoration:none;
cursor:pointer;
transition:0.2s;
display:inline-block;
margin:20px auto;
margin: 5px 10px 0px 0px;
padding:4px 20px;
border-radius:0px;
}
.dl-one, .dl-one:visited {
background-color: rgb(34, 187, 187);
color:white !important;
}
.dl-two, .dl-two:visited {
background-color:#ddd;
color:#000 !important;
}
.dl-one:hover {
background-color:rgb(34, 187, 187);
color:white;
text-decoration:none;
}
.dl-two:hover {
background-color:#ccc;
color:#111;
text-decoration:none;
}
button {
outline:none;
}
#column {
width:600px;
margin:50px auto;
}
@media screen and (max-width: 900px) {
#column {
width: auto;
padding:0px 40px;
}
}
</style>
<!-- general container -->
<div id="column">
<div style="overflow:auto;height:212px">
<h1>NexusUI</h1>
<h2>Web Audio Interfaces</h2><br>
<div id="demorack" style="margin-top:10px">
<div style="float:left">
<div nexus-ui="dial" id="demo2" style="width:80px;height:70px;margin-top:10px;"></div>
<div nexus-ui="number" id="demo3" style="width:50px;height:25px;margin:5px auto 0px;"></div>
</div>
<div nexus-ui="slider" id="demosl1" style="width:20px;height:100px;float:left;margin:10px 0px 0px 5px;"></div>
<div nexus-ui="slider" id="demosl2" style="width:20px;height:100px;float:left;margin:10px 0px 0px 5px;"></div>
<div nexus-ui="slider" id="demosl3" style="width:20px;height:100px;float:left;margin:10px 0px 0px 5px;"></div>
<div nexus-ui="sequencer" id="demo4" style="width:200px;height:100px;float:left;margin:10px 0px 0px 5px;"></div>
</div>
<script>
Nexus.context = Tone.context;
var rack1 = new Nexus.Rack("demorack")
rack1.demo3.link(rack1.demo2)
rack1.demosl1.value = 0.7
rack1.demosl2.value = 0.5
rack1.demosl3.value = 0.3
rack1.demo2.value = 0.5
rack1.demo4.columns = 10;
rack1.demo4.matrix.set.all([
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0],
[0,0,0,1,0,0,0,0,1,0],
[0,0,1,0,1,0,0,1,0,1],
[1,0,0,0,0,1,0,0,0,0]
])
rack1.demo4.start();
</script>
</div>
<div style="clear:both;margin:40px 0px 0px;">
<p class="overview">
NexusUI is a collection of HTML5 interfaces and Javascript helper functions to assist with building web audio instruments in the browser.
</p>
<p class="overview">
In addition to interfaces, it offers a few helper methods for <b>tuning</b> and <b>timing</b>.
It does not provide any sound-making capabilities –– for that, check out the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API" target="blank">Web Audio API</a> or web audio libraries such as <a href="http://tonejs.github.io" target="blank">Tone.js</a>, <a href="https://github.com/sebpiq/WebPd" target="blank">WebPD</a>, or <a href="https://github.com/charlieroberts/gibber.audio.lib" target="blank">Gibber</a>.
</p>
<div style="margin:40px auto 40px;">
<a class="dl dl-one" href="api/">Documentation</a>
<a class="dl dl-two" href="https://github.com/nexus-js/ui/">View on Github</a>
</div>
</div>
<hr />
<div style="margin:25px 0px;" id="example">
<b>Example</b><br />
<br />
<button id="mobileStart" style="display:none;width:200px;margin:5px 3px;">Press to Initialize Mobile Audio</button>
<!-- result goes here -->
<div id="power" style="width:40px;height:17px;margin:15px 0px;"></div>
<div id="volume" style="width:200px;height:20px;margin:5px 3px;"></div>
<script>
var power = new Nexus.Toggle("#power");
var gain = new Nexus.Slider("#volume");
// Create a sound source using Tone.js
var volume = new Tone.Volume(-Infinity).toMaster();
var synth = new Tone.Oscillator(300,"sine").connect(volume);
// Add event listeners
power.on('change',function(value) {
value ? synth.start() : synth.stop();
});
gain.on('change',function(value) {
volume.volume.rampTo(value,.1)
});
gain.min = -100
gain.max = 0
gain.value = -30
</script>
<br /><br />
HTML
<pre class="codedisplay language-html"><code><div id="power"><div>
<div id="gain"><div></code></pre>
<br /><br />
JS
<pre class="codedisplay language-javascript"><code>// Create interfaces
var power = new Nexus.Toggle("#power");
var gain = new Nexus.Slider("#gain");
// Create a sound source
var volume = new Tone.Volume(-Infinity).toMaster();
var synth = new Tone.Oscillator(300,"sine").connect(volume);
// Listen for interface events
power.on('change',function(v) {
v ? synth.start() : synth.stop();
});
gain.on('change',function(v) {
volume.volume.rampTo(v,.1)
});
gain.min = -100;
gain.max = 0;
gain.value = -30;</code></pre>
<!-- <br /><br />
CSS
<pre class="codedisplay language-css"><code>#power {
width:40px;
height:17px;
margin:15px 0px;
}
#echo {
width:200px;
height:20px;
margin:5px 3px;
}</code></pre>
-->
</div>
<br>
<hr />
<div style="margin:25px 0px 25px;">
<b>Support</b><br /><br />
NexusUI is an open-source project which is maintained in my spare time. If you enjoy NexusUI, please considering supporting its continued development and keeping it open-source.<br><br>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_donations" />
<input type="hidden" name="business" value="KTKBDBXH39L6U" />
<input type="hidden" name="currency_code" value="USD" />
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
</form>
</div>
</div>
<!-- FOOTER -->
<div style="font-size:10pt;color:#aaa;padding:30px;text-align:center;margin-top:20px;background-color:#eee;">
<div style="font-size:35pt;margin:5px auto 20px;color:#dadada;width:100px;text-align:center;">©</div>
experimental music & digital media @ louisiana state univeristy 2013-2016<br />
ben taylor 2017-2019
</div>
<script>
Prism.highlightAll();
</script>
<!-- GOOGLE ANALYTICS -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-42209714-2', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>