155 lines
6.4 KiB
HTML
155 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
|
<title>simple-synth</title>
|
|
</head>
|
|
<body>
|
|
<script src="synth.js"></script>
|
|
|
|
<div>
|
|
<form style="padding: 15px">
|
|
<legend>Voice 1</legend>
|
|
<input type="radio" id="wave1_sinwave" name="wavechoice1" value="sine" checked>
|
|
<label for="wave1_sinwave">Sine</label>
|
|
<input type="radio" id="wave1_squarewave" name="wavechoice1" value="square">
|
|
<label for="wave1_squarewave">Square</label>
|
|
<input type="radio" id="wave1_triwave" name="wavechoice1" value="triangle">
|
|
<label for="wave1_triwave">Triangle</label>
|
|
<input type="radio" id="wave1_sawtoothwave" name="wavechoice1" value="sawtooth">
|
|
<label for="wave1_sawtoothwave">Sawtooth</label>
|
|
</form>
|
|
<button id="activateVoice1" style="background-color: greenyellow;">Start</button>
|
|
<form style="padding: 15px">
|
|
<fieldset>
|
|
<legend>Octave Selection</legend>
|
|
<input type="radio" id="minus2" name="octavechoice1" value="-2">
|
|
<label for="minus2">-2</label>
|
|
|
|
<input type="radio" id="minus1" name="octavechoice1" value="-1">
|
|
<label for="minus1">-1</label>
|
|
|
|
<input type="radio" id="plus0" name="octavechoice1" value="0" checked>
|
|
<label for="plus0">0</label>
|
|
|
|
<input type="radio" id="plus1" name="octavechoice1" value="1">
|
|
<label for="plus1">+1</label>
|
|
|
|
<input type="radio" id="plus2" name="octavechoice1" value="2">
|
|
<label for="plus2">+2</label>
|
|
|
|
</fieldset>
|
|
</form>
|
|
<label for="detunevoice1">detune voice</label>
|
|
<input id="detunevoice1" type="range" min="-3" max="3" value="0" step=".1"/>
|
|
<span id="detunevoice1display">0</span>
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<form style="padding: 15px">
|
|
<legend>Voice 2</legend>
|
|
<input type="radio" id="wave2_sinwave" name="wavechoice2" value="sine" checked>
|
|
<label for="wave2_sinwave">Sine</label>
|
|
<input type="radio" id="wave2_squarewave" name="wavechoice2" value="square">
|
|
<label for="wave2_squarewave">Square</label>
|
|
<input type="radio" id="wave2_triwave" name="wavechoice2" value="triangle">
|
|
<label for="wave2_triwave">Triangle</label>
|
|
<input type="radio" id="wave2_sawtoothwave" name="wavechoice2" value="sawtooth">
|
|
<label for="wave2_sawtoothwave">Sawtooth</label>
|
|
</form>
|
|
<button id="activateVoice2" style="background-color: greenyellow;">Start</button>
|
|
<form style="padding: 15px">
|
|
<fieldset>
|
|
<legend>Octave Selection</legend>
|
|
<input type="radio" id="minus2" name="octavechoice2" value="-2">
|
|
<label for="minus2">-2</label>
|
|
|
|
<input type="radio" id="minus1" name="octavechoice2" value="-1">
|
|
<label for="minus1">-1</label>
|
|
|
|
<input type="radio" id="plus0" name="octavechoice2" value="0" checked>
|
|
<label for="plus0">0</label>
|
|
|
|
<input type="radio" id="plus1" name="octavechoice2" value="1">
|
|
<label for="plus1">+1</label>
|
|
|
|
<input type="radio" id="plus2" name="octavechoice2" value="2">
|
|
<label for="plus2">+2</label>
|
|
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<form style="padding: 15px">
|
|
<legend>Voice 2</legend>
|
|
<input type="radio" id="wave3_sinwave" name="wavechoice2" value="sine" checked>
|
|
<label for="wave3_sinwave">Sine</label>
|
|
<input type="radio" id="wave3_squarewave" name="wavechoice2" value="square">
|
|
<label for="wave3_squarewave">Square</label>
|
|
<input type="radio" id="wave3_triwave" name="wavechoice2" value="triangle">
|
|
<label for="wave3_triwave">Triangle</label>
|
|
<input type="radio" id="wave3_sawtoothwave" name="wavechoice2" value="sawtooth">
|
|
<label for="wave3_sawtoothwave">Sawtooth</label>
|
|
</form>
|
|
<button id="activateVoice3" style="background-color: greenyellow;">Start</button>
|
|
<form style="padding: 15px">
|
|
<fieldset>
|
|
<legend>Octave Selection</legend>
|
|
<input type="radio" id="minus2" name="octavechoice3" value="-2">
|
|
<label for="minus2">-2</label>
|
|
|
|
<input type="radio" id="minus1" name="octavechoice3" value="-1">
|
|
<label for="minus1">-1</label>
|
|
|
|
<input type="radio" id="plus0" name="octavechoice3" value="0" checked>
|
|
<label for="plus0">0</label>
|
|
|
|
<input type="radio" id="plus1" name="octavechoice3" value="1">
|
|
<label for="plus1">+1</label>
|
|
|
|
<input type="radio" id="plus2" name="octavechoice3" value="2">
|
|
<label for="plus2">+2</label>
|
|
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
<form style="padding: 15px">
|
|
<fieldset>
|
|
<legend>Keyboard</legend>
|
|
<input type="radio" id="noteC" name="notechoice" value="C" checked>
|
|
<label for="C">C</label>
|
|
|
|
<input type="radio" id="noteD" name="notechoice" value="D">
|
|
<label for="D">D</label>
|
|
|
|
<input type="radio" id="noteE" name="notechoice" value="E">
|
|
<label for="E">E</label>
|
|
|
|
<input type="radio" id="noteF" name="notechoice" value="F">
|
|
<label for="F">F</label>
|
|
|
|
<input type="radio" id="noteG" name="notechoice" value="G">
|
|
<label for="G">G</label>
|
|
|
|
<input type="radio" id="noteA" name="notechoice" value="A">
|
|
<label for="A">A</label>
|
|
|
|
<input type="radio" id="noteB" name="notechoice" value="B">
|
|
<label for="B">B</label>
|
|
|
|
</fieldset>
|
|
</form>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html> |