Public
Edited
Feb 1
Insert cell
Insert cell
{
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", (d) => {
const waveform = analyzer.getValue();
const points = Math.floor(waveform.length / 36);
const values = Array.from(waveform) // FloatArray to Array
.map((d, i) => [d, i])
.filter((d, i) => i % points === 0);

state.d = cm.areaRadial(values, {
curve: d3.curveCardinalClosed,
angle: (d) => cm.map(d[1], 0, waveform.length, 0, Math.PI * 2),
outerRadius: (d) => cm.map(d[0], -1, 1, 0, size / 3),
innerRadius: 0
});
})
.join();

invalidation.then(() => dispose());

await Tone.loaded;

return svg.svg(
{
width: size,
height: size,
viewBox: [-size / 2, -size / 2, size, size],
onclick: play
},
[
svg.rect({
x: -size / 2,
y: -size / 2,
width: size,
height: size,
fill: "black"
}),
svg.path({ d: cm.$(() => state.d), fill: "white" })
]
);
}
Insert cell
svg = cm.svg
Insert cell
import { cm } from "@charming-art/charmingjs-next"
Insert cell
Tone = require("tone")
Insert cell

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.
Learn more