132 lines
5.6 KiB
HTML
132 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="./app.css">
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<h1>Procedural Drones, No. 1</h1>
|
|
<h2>Design and engineering by Mikayla Dobson</h2>
|
|
|
|
<div class="show-on-start" id="navbar-tools">
|
|
<button id="info-button">Show more info...</button>
|
|
<!-- <button id="how-to-use">How to use</button> -->
|
|
</div>
|
|
|
|
<div class="hide-on-start more-info">
|
|
<p>Music-focused widget designed using Tone.js and the Web Audio API.</p>
|
|
<p>Sliders control output parameters of four independent oscillators modulated by four independent low frequency oscillators (LFOs).</p>
|
|
<p>JavaScript passes your inputs to the browser and procedurally constructs harmonies based on developer-defined logic based on tenets of music theory.</p>
|
|
</div>
|
|
</header>
|
|
|
|
<button id="start-tone">Click here to begin.</button>
|
|
|
|
<main class="show-on-start">
|
|
<div class="visuals">
|
|
<div class="voice" id="soprano"></div>
|
|
<div class="voice" id="alto"></div>
|
|
<div class="voice" id="tenor"></div>
|
|
<div class="voice" id="bass"></div>
|
|
</div>
|
|
|
|
<div id="visuals-border"></div>
|
|
|
|
<div class="control-row button-row">
|
|
<button id="synth-button">Test Audio</button>
|
|
<button id="transport-start">Start Transport</button>
|
|
</div>
|
|
|
|
<form class="audio-controls control-row">
|
|
<!-- soprano -->
|
|
<div class="controls">
|
|
<h3>Soprano</h3>
|
|
<label for="soprano-vol">
|
|
<p>Soprano Volume: </p>
|
|
<p id="soprano-vol-target">-</p>
|
|
</label>
|
|
<input id="soprano-vol" type="range" min="5" max="20">
|
|
<label for="sop-lfo">
|
|
<p>Soprano LFO: </p>
|
|
<p id="sop-lfo-target">-</p>
|
|
</label>
|
|
<input id="sop-lfo" type="range" min="1" max="20" step="0.2">
|
|
</div>
|
|
|
|
<!-- alto -->
|
|
<div class="controls">
|
|
<h3>Alto</h3>
|
|
<label for="alto-vol">
|
|
<p>Alto Volume: </p>
|
|
<p id="alto-vol-target">-</p>
|
|
</label>
|
|
<input id="alto-vol" type="range" min="5" max="20">
|
|
<label for="alto-lfo">
|
|
<p>Alto LFO: </p>
|
|
<p id="alto-lfo-target">-</p>
|
|
</label>
|
|
<input id="alto-lfo" type="range" min="1" max="20" step="0.2">
|
|
</div>
|
|
|
|
<!-- tenor -->
|
|
<div class="controls">
|
|
<h3>Tenor</h3>
|
|
<label for="ten-vol">
|
|
<p>Tenor Volume: </p>
|
|
<p id="ten-vol-target">-</p>
|
|
</label>
|
|
<input id="ten-vol" type="range" min="5" max="20">
|
|
<label for="ten-lfo">
|
|
<p>Tenor LFO: </p>
|
|
<p id="ten-lfo-target">-</p>
|
|
</label>
|
|
<input id="ten-lfo" type="range" min="1" max="20" step="0.2">
|
|
</div>
|
|
|
|
<!-- bass -->
|
|
<div class="controls">
|
|
<h3>Bass</h3>
|
|
<label for="bass-vol">
|
|
<p>Bass Volume: </p>
|
|
<p id="bass-vol-target">-</p>
|
|
</label>
|
|
<input id="bass-vol" type="range" min="5" max="20">
|
|
<label for="bass-lfo">
|
|
<p>Bass LFO: </p>
|
|
<p id="bass-lfo-target">-</p>
|
|
</label>
|
|
<input id="bass-lfo" type="range" min="1" max="20" step="0.2">
|
|
</div>
|
|
</form>
|
|
|
|
<form class="control-row master-params">
|
|
<div class="controls">
|
|
<h3>Master</h3>
|
|
<label for="probability">Probability</label>
|
|
<input id="probability" type="range" min="0" max="1" step="0.05" placeholder="1">
|
|
</div>
|
|
</form>
|
|
|
|
<div class="control-row aux-functions button-row">
|
|
<button id="mute-all">Mute all oscillators</button>
|
|
<button id="reset-lfos">Reset LFO values to default</button>
|
|
<button id="rand-chord">Full random chord</button>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Tone.js library -->
|
|
<script type="module" src="https://unpkg.com/tone@14.7.77/build/Tone.js"></script>
|
|
<!-- internal scripts -->
|
|
<script type="module" src="./src/styleUtils.js"></script>
|
|
<script type="module" src="./src/inputHandling.js"></script>
|
|
<script type="module" src="./src/harmonyUtil.js"></script>
|
|
<script type="module" src="./src/audioUtil.js"></script>
|
|
<script type="module" src="./app.js"></script>
|
|
<!-- vector logic scripts -->
|
|
<script type="module" src="./src/vector_logic/evaluateVector.js"></script>
|
|
<script type="module" src="./src/vector_logic/extractPitchset.js"></script>
|
|
<script type="module" src="./src/vector_logic/findVector.js"></script>
|
|
<script type="module" src="./src/vector_logic/numbersToPitches.js"></script>
|
|
</body>
|
|
</html> |