flocking
Version:
Creative audio synthesis for the Web
145 lines (126 loc) • 8.29 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flocking Live Playground</title>
<link rel="stylesheet" href="../../../node_modules/normalize.css/normalize.css" />
<link rel="stylesheet" href="../../../node_modules/codemirror/lib/codemirror.css" />
<link rel="stylesheet" href="../../../node_modules/codemirror/addon/lint/lint.css" />
<link rel="stylesheet" href="../../../node_modules/codemirror/addon/dialog/dialog.css" />
<link rel="stylesheet" type="text/css" href="../../../src/ui/editor/css/editor.css" />
<link rel="stylesheet" type="text/css" href="../../../src/ui/play-button/css/play-button.css" />
<link rel="stylesheet" type="text/css" href="../../../src/ui/shared/css/flocking-icon-font.css" />
<link rel="stylesheet" type="text/css" href="../css/playground.css" />
<link rel="stylesheet" type="text/css" href="css/live-playground.css" />
<link rel="stylesheet" type="text/css" href="../css/shake.css" />
<script src="../../../node_modules/jquery/dist/jquery.js"></script>
<script src="../../../node_modules/dagre/dist/dagre.min.js"></script>
<script src="../../../node_modules/jsplumb/dist/js/jsPlumb-1.7.9.js"></script>
<script src="../../../node_modules/codemirror/lib/codemirror.js"></script>
<script src="../../../node_modules/codemirror/addon/edit/closebrackets.js"></script>
<script src="../../../node_modules/codemirror/addon/edit/trailingspace.js"></script>
<script src="../../../node_modules/codemirror/addon/comment/comment.js"></script>
<script src="../../../node_modules/codemirror/addon/search/search.js"></script>
<script src="../../../node_modules/codemirror/addon/search/searchcursor.js"></script>
<script src="../../../node_modules/codemirror/addon/search/match-highlighter.js"></script>
<script src="../../../node_modules/codemirror/addon/dialog/dialog.js"></script>
<script src="../../../node_modules/codemirror/keymap/sublime.js"></script>
<script src="../../../node_modules/codemirror/addon/lint/lint.js"></script>
<script src="../../../node_modules/json5/dist/index.js"></script>
<script src="../../../node_modules/codemirror-infusion/forked-cm-src/codemirror-fork-javascript-mode.js"></script>
<script src="../../../node_modules/codemirror-infusion/forked-cm-src/json5-lint.js"></script>
<script src="../../../node_modules/infusion/src/framework/core/js/Fluid.js"></script>
<script src="../../../node_modules/infusion/src/framework/core/js/FluidDebugging.js"></script>
<script src="../../../node_modules/infusion/src/framework/core/js/FluidIoC.js"></script>
<script src="../../../node_modules/infusion/src/framework/core/js/DataBinding.js"></script>
<script src="../../../node_modules/infusion/src/framework/core/js/ModelTransformation.js"></script>
<script src="../../../node_modules/infusion/src/framework/core/js/ModelTransformationTransforms.js"></script>
<script src="../../../node_modules/infusion/src/framework/enhancement/js/ContextAwareness.js"></script>
<script src="../../../node_modules/infusion/src/framework/core/js/FluidDocument.js"></script>
<script src="../../../node_modules/infusion/src/framework/core/js/FluidDOMUtilities.js"></script>
<script src="../../../node_modules/infusion/src/framework/core/js/FluidView.js"></script>
<script src="../../../node_modules/codemirror-infusion/src/codemirror-infusion.js"></script>
<script src="../../../third-party/webarraymath/js/webarraymath.js"></script>
<script src="../../../third-party/simjs/js/random-0.26.js"></script>
<script src="../../../src/core.js"></script>
<script src="../../../src/node-list.js"></script>
<script src="../../../src/evaluators.js"></script>
<script src="../../../src/synths/synth.js"></script>
<script src="../../../src/synths/value.js"></script>
<script src="../../../src/synths/model.js"></script>
<script src="../../../src/synths/group.js"></script>
<script src="../../../src/synths/polyphonic.js"></script>
<script src="../../../src/synths/band.js"></script>
<script src="../../../src/buffers.js"></script>
<script src="../../../src/audiofile.js"></script>
<script src="../../../src/flocking-audiofile-converters.js"></script>
<script src="../../../src/audiofile-encoder.js"></script>
<script src="../../../src/scheduler.js"></script>
<script src="../../../src/web/webaudio-core.js"></script>
<script src="../../../src/web/audio-system.js"></script>
<script src="../../../src/web/buffer-writer.js"></script>
<script src="../../../src/web/input-device-manager.js"></script>
<script src="../../../src/web/native-node-manager.js"></script>
<script src="../../../src/web/output-manager.js"></script>
<script src="../../../src/parser.js"></script>
<script src="../../../src/gfx.js"></script>
<script src="../../../src/ugens/core.js"></script>
<script src="../../../src/ugens/bandlimited.js"></script>
<script src="../../../src/ugens/browser.js"></script>
<script src="../../../src/ugens/buffer.js"></script>
<script src="../../../src/ugens/debugging.js"></script>
<script src="../../../src/ugens/dynamics.js"></script>
<script src="../../../src/ugens/distortion.js"></script>
<script src="../../../src/ugens/envelopes.js"></script>
<script src="../../../src/ugens/filters.js"></script>
<script src="../../../src/ugens/gates.js"></script>
<script src="../../../src/ugens/granular.js"></script>
<script src="../../../src/ugens/listening.js"></script>
<script src="../../../src/ugens/math.js"></script>
<script src="../../../src/ugens/midi.js"></script>
<script src="../../../src/ugens/multichannel.js"></script>
<script src="../../../src/ugens/oscillators.js"></script>
<script src="../../../src/ugens/random.js"></script>
<script src="../../../src/ugens/scheduling.js"></script>
<script src="../../../src/ugens/triggers.js"></script>
<script src="../../../src/ui/selectbox/js/selectbox.js"></script>
<script src="../../../src/ui/editor/js/editor.js"></script>
<script src="../../../src/ui/play-button/js/play-button.js"></script>
<script src="../js/demo-selector.js"></script>
<script src="../js/error-console.js"></script>
<script src="../js/playground.js"></script>
<script src="../js/source-evaluators.js"></script>
<script src="../js/demo-list.js"></script>
<script src="js/visual-editor.js"></script>
<script src="js/live-demo-list.js"></script>
</head>
<body>
<div class="everything">
<header class="masthead">
<!-- Control for selecting a demo -->
<div class="synthSelector">
<label for="sample_code_sel" class="hidden-accessible">Demo:</label>
<select id="demos" size="1"></select>
</div>
<!-- Control for playing/pausing the active synth. -->
<div class="playSynth">
<!-- Play Button -->
<button id="playButton" class="paused icon-">Play</button>
</div>
<!-- Waveform View -->
<div id="gfxContainer" class="right">
<canvas id="gfx" height="30" width="240"></canvas>
</div>
</header>
<!-- Placeholder for the interactive editor -->
<div id="source-view" class="mainPanel split-large"></div>
<div id="visual-view" class="mainPanel split-small"></div>
<!-- Error console container-->
<div id="error-console" class="console"></div>
</div>
<script>
flock.playground.visual(".everything");
</script>
</body>
</html>