Interactive Audio Synthesizer

Sequencer

\n {sequence.map(({ id, note, time }) => (\n

\n {note} at {time}s\n \n

\n ))}\n

\n {['C4', 'D4', 'E4', 'F4', 'G4', 'A4', 'B4', 'C5'].map(note => (\n \n ))}\n

\n );\n};\n\n// Visualization Component\nconst Visualization = ({ analyser }) => {\n const canvasRef = useRef(null);\n\n useEffect(() => {\n if (!analyser) return;\n\n const canvas = canvasRef.current;\n const ctx = canvas.getContext('2d');\n const bufferLength = analyser.frequencyBinCount;\n const dataArray = new Uint8Array(bufferLength);\n\n const draw = () => {\n analyser.getByteTimeDomainData(dataArray);\n\n ctx.fillStyle = 'rgb(200, 200, 200)';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n ctx.lineWidth = 2;\n ctx.strokeStyle = 'rgb(0, 0, 0)';\n ctx.beginPath();\n\n const sliceWidth = canvas.width * 1.0 / bufferLength;\n let x = 0;\n\n for (let i = 0; i < bufferLength; i++) {\n const v = dataArray[i] / 128.0;\n const y = v * canvas.height / 2;\n\n if (i === 0) {\n ctx.moveTo(x, y);\n } else {\n ctx.lineTo(x, y);\n }\n\n x += sliceWidth;\n }\n\n ctx.lineTo(canvas.width, canvas.height / 2);\n ctx.stroke();\n\n requestAnimationFrame(draw);\n };\n\n draw();\n }, [analyser]);\n\n return

Sequencer

Interactive Audio Synthesizer

Collaborators