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

Compare commits

base: ergz:8111ea2daa73053a689aaf26cd2c6a81355025b9
Branches Tags
ergz:main
...
compare: ergz:c7c545ab0d974db5caee8ab66a1f1ba0bb889df1
Branches Tags
ergz:main

2 Commits
8111ea2daa ... c7c545ab0d

Author SHA1 Message Date
Emanuel Rodriguez c7c545ab0d added osc visualizer 2023-10-10 23:15:55 -07:00
Emanuel Rodriguez 22de4dac14 trying to add the waveform, but no luck yet 2023-10-09 23:56:17 -07:00
2 changed files with 72 additions and 2 deletions
Show Stats Expand all files Collapse all files

9
synth.html
View File

@ -5,7 +5,6 @@
<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 class="bg-gray-100 p-10 mb-5">
@ -46,6 +45,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 id = "wave1viz" class="canvas-container">
<canvas id ="wave1canvas"></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>

65
synth.js
View File

@ -1,3 +1,7 @@
let canvas;
let analyserNode;
let signalData;
function noteToHz(note) {
switch (note) {
case "C":
@ -119,6 +123,8 @@ class Synth {
}
}
let synth = new Synth();
function updateFrequency(
event,
synth,
@ -197,8 +203,8 @@ function setupOctaveControls(voiceIndex, synth) {
});
}
// onload ------------------------------------------------------------------
window.onload = function () {
let synth = new Synth();
// start button
document
@ -328,4 +334,61 @@ window.onload = function () {
}
});
});
// do the viz
const vizCanvas = document.getElementById("wave1canvas");
const ctx = vizCanvas.getContext("2d");
const analyser = synth.audioContext.createAnalyser();
analyser.fftSize = 2048;
let osc = synth.oscillators[0].osc;
osc.connect(analyser);
const bufferLength = analyser.fftSize;
const dataArray = new Uint8Array(bufferLength);
function draw() {
// Get the waveform data
analyser.getByteTimeDomainData(dataArray);
// Clear the canvas
ctx.clearRect(0, 0, vizCanvas.width, vizCanvas.height);
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)";
// Set up the glowing effect
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;
// Begin the path
ctx.beginPath();
const sliceWidth = (vizCanvas.width * 1.0) / bufferLength;
let x = 0;
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);
}
x += sliceWidth;
}
ctx.lineTo(vizCanvas.width, vizCanvas.height / 2);
ctx.stroke();
requestAnimationFrame(draw);
}
draw();
};