{
const width = 400;
const height = 100;
const mic = new Tone.UserMedia();
const analyzer = new Tone.Waveform(256);
mic.connect(analyzer);
mic.open();
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, width),
y: (d) => cm.map(d, -1, 1, height, 0)
});
})
.join();
invalidation.then(() => dispose());
await Tone.loaded;
return svg.svg({ width, height }, [
svg.rect({ x: 0, y: 0, width, height, 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.
