{
const size = 400;
const url = await FileAttachment("blip.wav").url();
const sound = new Tone.Player(url).toDestination();
const play = () => sound.start();
const analyzer = new Tone.FFT(512);
const [state] = cm
.flow()
.let("d", "")
.on("loop", () => {
const frequency = analyzer.getValue();
state.d = cm.area(frequency, {
x: (d, i) =>
cm.map(
Math.log(Math.max(0.1, i)),
0.1,
Math.log(frequency.length),
0,
size + 2
), // log(0) is invliad!
y0: size,
y1: (d) => cm.map(d, 0.1, -127, 0, size, 0),
curve: d3.curveBasis
});
})
.join();
sound.connect(analyzer);
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.path({ d: cm.$(() => state.d), 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.
