trying to add the waveform, but no luck yet

2023-10-09 23:56:17 -07:00
parent 8111ea2daa
commit 22de4dac14
2 changed files with 80 additions and 2 deletions
--- a/synth.html
+++ b/synth.html
@@ -5,7 +5,7 @@
    <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">
-    
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
    <title>simple-synth</title>
 </head>
 <body class="bg-gray-100 p-10 mb-5">
@@ -46,6 +46,14 @@
                <input id="filtervoice1" type="range" min="700" max="1500" value="1000" step="1" class="slider bg-gray-300  h-2 rounded-full outline-none"/>
                <span id="filtervoice1display" class="text-sm text-gray-700 ml-2">0</span>
            </div>
+
+            <div class="flex-container flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
+                <div class="canvas-container">
+                    <canvas id="waveform1viz"></canvas>
+                </div>
+                <!-- Rest of your HTML for this container... -->
+            </div>
+            
            
            <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>