Freesound Drums

// A web audio drum machine that pulls samples from the Freesound search API. // A 16-step step sequencer with 4 sampled voices. Each sample is the first two // seconds of a Freesound search result. Tweaking the search string a little bit // can return wildly different results. Each track has controls to select the // playable region, the volume, and the playback speed. Townie holding it down on // /** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const STEPS = 16; const TRACKS = 4; const searchUrl = "https://sedson-freesoundsearch.web.val.run"; function WaveformPreview({ buffer, start, end }) { const canvasRef = useRef(null); useEffect(() => { if (buffer && canvasRef.current) { const canvas = canvasRef.current; canvas.width = 600; canvas.height = 80; const ctx = canvas.getContext("2d"); const data = buffer.getChannelData(0); const step = Math.ceil(data.length / canvas.width); const amp = canvas.height / 2; ctx.fillStyle = getComputedStyle(document.body).getPropertyValue("--text"); ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < canvas.width; i++) { let min = 1.0; let max = -1.0; for (let j = 0; j < step; j++) { const datum = data[(i * step) + j]; if (datum < min) min = datum; if (datum > max) max = datum; } ctx.fillRect(i, (1 + min) * amp, 2, Math.max(2, (max - min) * amp)); } // Draw start and end markers ctx.fillStyle = getComputedStyle(document.body).getPropertyValue("--accent-2"); ctx.globalAlpha = 0.5; ctx.fillRect(0, 0, start * canvas.width + 3, canvas.height); ctx.fillRect(end * canvas.width - 5, 0, 800, canvas.height); ctx.globalAlpha = 1; ctx.fillStyle = getComputedStyle(document.body).getPropertyValue("--accent-2"); ctx.fillRect(start * canvas.width + 3, 0, 2, canvas.height); ctx.fillRect(end * canvas.width - 5, 0, 2, canvas.height); } }, [buffer, start, end]); return

drumMachine