Compare commits
2 Commits
8111ea2daa
...
c7c545ab0d
| Author | SHA1 | Date |
|---|---|---|
 Emanuel Rodriguez
|
c7c545ab0d | |
|
Emanuel Rodriguez
|
22de4dac14 |
|
|
@ -5,7 +5,6 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
|
||||||
|
|
||||||
<title>simple-synth</title>
|
<title>simple-synth</title>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-gray-100 p-10 mb-5">
|
<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"/>
|
<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>
|
<span id="filtervoice1display" class="text-sm text-gray-700 ml-2">0</span>
|
||||||
</div>
|
</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>
|
<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>
|
||||||
|
|
|
||||||
65
synth.js
65
synth.js
|
|
@ -1,3 +1,7 @@
|
||||||
|
let canvas;
|
||||||
|
let analyserNode;
|
||||||
|
let signalData;
|
||||||
|
|
||||||
function noteToHz(note) {
|
function noteToHz(note) {
|
||||||
switch (note) {
|
switch (note) {
|
||||||
case "C":
|
case "C":
|
||||||
|
|
@ -119,6 +123,8 @@ class Synth {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let synth = new Synth();
|
||||||
|
|
||||||
function updateFrequency(
|
function updateFrequency(
|
||||||
event,
|
event,
|
||||||
synth,
|
synth,
|
||||||
|
|
@ -197,8 +203,8 @@ function setupOctaveControls(voiceIndex, synth) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// onload ------------------------------------------------------------------
|
||||||
window.onload = function () {
|
window.onload = function () {
|
||||||
let synth = new Synth();
|
|
||||||
// start button
|
// start button
|
||||||
|
|
||||||
document
|
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();
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue