{
const size = 400;
const url = await FileAttachment("Ambiente.mp3").url();
const sound = new Tone.Player(url).toDestination();
const analyzer = new Tone.Waveform(256);
const play = () => (sound.state === "started" ? sound.stop() : sound.start());
sound.connect(analyzer);
const [state, dispose] = cm
.flow()
.let("d", "")
.on("loop", (state) => {
const waveform = analyzer.getValue();
state.d = cm.area(waveform, {
x: (d, i) => cm.map(i, 0, waveform.length, 0, size + 2),
y1: (d) => cm.map(d, -1, 1, size, 0),
y0: size
});
})
.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), fill: "white" })
]);
}
svg = cm.svg;
import { cm } from "@charming-art/charmingjs-next"
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.
