gibberish-dsp
Version:
Gibberish is designed to be an optimized API for audio synthesis using per-sample techniques.
178 lines (148 loc) • 4.53 kB
HTML
<html>
<head>
<title>Gibberish.js Playground</title>
<script src="../node_modules/codemirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="../node_modules/codemirror/lib/codemirror.css">
<script src="../node_modules/codemirror/mode/javascript/javascript.js"></script>
<script src="../node_modules/codemirror/addon/edit/matchbrackets.js"></script>
<script src="./dat.gui.js"></script>
<script src="../dist/gibberish.js"></script>
<script src="./environment.js"></script>
<style>
body {
margin: 0;
box-sizing:border;
color:#ddd;
font-family: Helvetica Neue, sans-serif;
background:rgba(46,50,53,1);
box-sizing:border-box ;
}
#header {
width:100%;
height:3em;
border-bottom:1px solid #666;
padding-left:1em;
box-sizing:border-box;
}
select{
display:inline-block;
background:rgba(46,50,53,1);
color: #ccc;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
border-color: #555;
}
h1 {
font-size: 1em;
font-weight: normal;
padding-left:.5em;
padding-top:1em;
padding-right: 3em;
height:3em;
display:inline-block;
margin:0
}
#header span { font-size: .8em; }
#editor { width:60%; box-sizing:border-box; display:inline-block; height:calc( 100% - 3em); border-right:1px solid #666; padding-left:1em }
#console{ width:40%; box-sizing:border-box; display:inline-block; position:absolute; height:calc( 100% - 3em ); }
.dg { z-index:100 }
#reference a{ color: #ccc ; margin-left: 2em }
.CodeMirror-matchingbracket {
text-decoration:none ;
background: rgba(255,255,255,.25)
}
.CodeMirror {
font-family:Menlo, monospace;
font-size:.8em;
background:rgba(46,50,53,1);
color:rgb( 153 )
}
span.cm-comment { color:rgb(121,121,121) }
span.cm-property,
span.cm-attribute,
span.cm-variable,
span.cm-variable-2,
.cm-def,
.cm-s-default { color: rgba(173,173,173,1) }
span.cm-keyword,
span.cm-number, span.cm-atom { color:rgba(89, 151, 198, 1) }
span.cm-string {color: rgb(225, 225, 225) }
.CodeMirror-cursor {
background: rgba(255,255,255,.5);
border: none ;
width: .5em ;
display: block;
}
.CodeMirror-selected {
background:rgba(84,84,84,.5) ;
}
.CodeMirror-highlight {
background:rgba(255,255,255,.5)
}
#main{
display:inline-block;
position:relative;
left:5px;
}
#splitbar {
display:inline-block;
top:0;
position:absolute;
height:100%;
width:5px;
background:#666;
z-index:1;
cursor: ew-resize
}
#sidebar {
display:inline-block;
width:35%;
float:right;
height:100%;
border-left:1px black solid;
box-sizing:border-box;
overflow:scroll;
font-family:sans-serif;
font-weight:lighter;
font-size:1em
}
img {
width: 36px;
height:31px;
position:absolute;
top:.75em;
right:1em;
}
</style>
</head>
<body>
<div id='header'>
<h1>gibberish</h1>
<span>demos:</span>
<select>
<option>demo: deep note</option>
<option>demo: intro 'song'</option>
<option>tutorial 1: introduction</option>
<option>tutorial 2: oscillators</option>
<option>tutorial 3: filtering</option>
<option>tutorial 4: enveloping</option>
<option>tutorial 5: fx and busses</option>
<option>tutorial 6: sequencing</option>
<option>tutorial 7: defining unit generators</option>
<option>demo: modulating schedulers</option>
<option>demo: single-sample feedback loops</option>
<!--<option>demo: chorus model - ARP Solina</option>-->
<option>demo: 303 (diode zero-delay filter)</option>
<option>demo: fm instrument</option>
</select>
<span id='reference'><a href='../docs/index.html'>reference</a>
<a href="http://github.com/gibber-cc/gibberish"><img src='resources/images/github-6-64_.png'></a>
</div>
<div id='editor'></div>
<div id='console'>
<div id='splitbar'></div>
<div id='main'></div>
</div>
</body>
</html>