{
const size = 400;
const url = await FileAttachment("congas.m4a").url();
const sound = new Tone.Player(url).toDestination();
const play = () => (sound.state === "started" ? sound.stop() : sound.start());
sound.loop = true;
const meter = new Tone.Meter();
meter.normalRange = true;
sound.connect(meter);
const [state, dispose] = cm
.flow()
.let("r", 0)
.on("loop", () => (state.r = meter.getValue()))
.join();
invalidation.then(() => (dispose(), sound.stop()));
await Tone.loaded;
return svg.svg({ width: size, height: size, onclick: play }, [
svg.rect({ x: 0, y: 0, width: size, height: size, fill: "black" }),
svg.circle({
cx: size / 2,
cy: size / 2,
r: cm.$(() => cm.map(state.r, 0, size * 0.8)),
fill: "white"
})
]);
}
svg = cm.svg
import { cm } from "@charming-art/charmingjs-next"
Tone = require("tone")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
