ergz/simple-synth
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

starts adding tailwind to make things prettier

Browse Source
This commit is contained in:
Emanuel Rodriguez
2023-10-07 23:33:28 -07:00
parent b9acf85e29
commit 4de3ddb8ce
6 changed files with 14 additions and 620 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
synth.html
View File

@@ -4,15 +4,16 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>simple-synth</title>
</head>
<body>
<body class="bg-gray-100 p-10 mb-5">
<script src="synth.js"></script>
<div>
<form style="padding: 5px">
<legend>Voice 1</legend>
<div class="bg-white p-2 rounded-lg mb-5">
<form>
<legend class="text-lg mb-2">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">
@@ -23,22 +24,22 @@
<label for="wave1_sawtoothwave">Sawtooth</label>
</form>
<div style="padding: 5px">
<div class="flex items-center space-x-2 my-3">
<fieldset>
<legend>Octave Selection</legend>
<button id="octavedown1">-</button>
<input type="text" id="octavedisplay1" value="0" readonly style="width: 2em; text-align: center;">
<button id="octaveup1">+</button>
<button id="octavedown1" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">-</button>
<input type="text" id="octavedisplay1" value="0" readonly class="text-center text-sm w-6 border py-2">
<button id="octaveup1" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">+</button>
</fieldset>
</div>
<div style="padding: 5px">
<label for="detunevoice1">detune voice</label>
<input id="detunevoice1" type="range" min="-5" max="5" value="0" step=".1"/>
<span id="detunevoice1display">0</span>
<label for="detunevoice1" class="block text-sm font-medium text-gray-700 mb-1">detune voice</label>
<input id="detunevoice1" type="range" min="-5" max="5" value="0" step=".1" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<span id="detunevoice1display" class="text-sm text-gray-700 ml-2">0</span>
</div>
<button id="activateVoice1" style="background-color: greenyellow;">On</button>
<button id="activateVoice1" class="bg-green-700 hover:bg-green-600 text-white font-bold text-sm py-1 px-2 rounded">On</button>
</div>
<div>