{
const size = 400;
const url = await FileAttachment("blip.wav").url();
const sound = new Tone.Player(url).toDestination();
const analyzer = new Tone.Waveform(256);
const play = () => sound.start();
sound.connect(analyzer);
const [state, dispose] = cm
.flow()
.let("d", "")
.on("loop", (state) => {
const waveform = analyzer.getValue();
state.d = cm.line(waveform, {
x: (d, i) => cm.map(i, 0, waveform.length, 0, size),
y: (d) => cm.map(d, -1, 1, size, 0)
});
})
.join();
invalidation.then(() => dispose());
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), stroke: "white", "stroke-width": 4 }) // Need to improve this?
]);
}
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.
