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

Compare commits

base: ergz:3773cfd778da2dca75c135150fc9c52bbec2d0ca
Branches Tags
ergz:main
..
compare: ergz:c7c545ab0d974db5caee8ab66a1f1ba0bb889df1
Branches Tags
ergz:main

No commits in common. "3773cfd778da2dca75c135150fc9c52bbec2d0ca" and "c7c545ab0d974db5caee8ab66a1f1ba0bb889df1" have entirely different histories.
3773cfd778 ... c7c545ab0d

2 changed files with 41 additions and 55 deletions
Show Stats Expand all files Collapse all files

15
synth.html
View File

@ -50,6 +50,7 @@
<div id = "wave1viz" class="canvas-container"> <div id = "wave1viz" class="canvas-container">
<canvas id ="wave1canvas"></canvas> <canvas id ="wave1canvas"></canvas>
</div> </div>
<!-- Rest of your HTML for this container... -->
</div> </div>
@ -78,13 +79,6 @@
</fieldset> </fieldset>
</div> </div>
<div class="flex-container flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
<div id = "wave2viz" class="canvas-container">
<canvas id ="wave2canvas"></canvas>
</div>
</div>
<button id="activateVoice2" class="bg-green-700 hover:bg-green-600 text-white font-bold text-sm py-1 px-2 rounded">On</button> <button id="activateVoice2" class="bg-green-700 hover:bg-green-600 text-white font-bold text-sm py-1 px-2 rounded">On</button>
</div> </div>
@ -110,13 +104,6 @@
</fieldset> </fieldset>
</div> </div>
<div class="flex-container flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
<div id = "wave3viz" class="canvas-container">
<canvas id ="wave3canvas"></canvas>
</div>
</div>
<button id="activateVoice3" class="bg-green-700 hover:bg-green-600 text-white font-bold text-sm py-1 px-2 rounded">On</button> <button id="activateVoice3" class="bg-green-700 hover:bg-green-600 text-white font-bold text-sm py-1 px-2 rounded">On</button>
</div> </div>

81
synth.js
View File

@ -336,57 +336,56 @@ window.onload = function () {
}); });
// do the viz // do the viz
const canvasIds = ["wave1canvas", "wave2canvas", "wave3canvas"]; const vizCanvas = document.getElementById("wave1canvas");
const ctx = vizCanvas.getContext("2d");
const vizObjects = canvasIds.map((id, index) => { const analyser = synth.audioContext.createAnalyser();
const canvas = document.getElementById(id); analyser.fftSize = 2048;
const ctx = canvas.getContext("2d"); let osc = synth.oscillators[0].osc;
osc.connect(analyser);
const analyser = synth.audioContext.createAnalyser(); const bufferLength = analyser.fftSize;
analyser.fftSize = 2048; const dataArray = new Uint8Array(bufferLength);
synth.oscillators[index].osc.connect(analyser);
const bufferLength = analyser.fftSize;
const dataArray = new Uint8Array(bufferLength);
return { canvas, ctx, analyser, index, bufferLength, dataArray };
});
function draw() { function draw() {
vizObjects.forEach((viz) => { // Get the waveform data
viz.analyser.getByteTimeDomainData(viz.dataArray); analyser.getByteTimeDomainData(dataArray);
viz.ctx.clearRect(0, 0, viz.canvas.width, viz.canvas.height);
viz.ctx.fillStyle = "black";
viz.ctx.fillRect(0, 0, viz.canvas.width, viz.canvas.height);
viz.ctx.lineWidth = 2;
viz.ctx.strokeStyle = "rgb(0, 200, 100)";
viz.ctx.shadowBlur = 12; // Adjust the level of glow by changing this value // Clear the canvas
viz.ctx.shadowColor = "rgb(0, 200, 100)"; // Make sure the shadow color matches the stroke color ctx.clearRect(0, 0, vizCanvas.width, vizCanvas.height);
viz.ctx.shadowOffsetX = 2;
viz.ctx.shadowOffsetY = 5;
viz.ctx.beginPath(); ctx.fillStyle = "black";
ctx.fillRect(0, 0, vizCanvas.width, vizCanvas.height);
// Set up the drawing parameters
ctx.lineWidth = 2;
ctx.strokeStyle = "rgb(0, 200, 100)";
const sliceWidth = (viz.canvas.width * 1.0) / viz.bufferLength; // Set up the glowing effect
let x = 0; ctx.shadowBlur = 12; // Adjust the level of glow by changing this value
ctx.shadowColor = "rgb(0, 200, 100)"; // Make sure the shadow color matches the stroke color
// Optionally, you can offset the shadow if desired
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 5;
for (let i = 0; i < viz.bufferLength; i++) { // Begin the path
const v = viz.dataArray[i] / 128.0; ctx.beginPath();
const y = (v * viz.canvas.height) / 2;
if (i === 0) { const sliceWidth = (vizCanvas.width * 1.0) / bufferLength;
viz.ctx.moveTo(x, y); let x = 0;
} else {
viz.ctx.lineTo(x, y);
}
x += sliceWidth; for (let i = 0; i < bufferLength; i++) {
const v = dataArray[i] / 128.0;
const y = (v * vizCanvas.height) / 2;
if (i === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
} }
viz.ctx.lineTo(viz.canvas.width, viz.canvas.height / 2); x += sliceWidth;
viz.ctx.stroke(); }
});
ctx.lineTo(vizCanvas.width, vizCanvas.height / 2);
ctx.stroke();
requestAnimationFrame(draw); requestAnimationFrame(draw);
} }