{
const svg = cm.svg;
const url = await FileAttachment("pink.wav").url();
const sound = new Tone.Player(url).toDestination();
const player = usePlayer(sound);
const [vars, dispose] = cm
.flow()
.let("progress", 0)
.on("keydown", () => player.start())
.on("loop", (d) => (d.progress = player.progress()))
.join();
function usePlayer(player) {
let startTime;
const start = (...params) => {
startTime = params[0] ?? Tone.now();
player.start(...params);
};
const progress = () => {
if (player.state !== "started") return 0;
const currentTime = Tone.now() - startTime;
return currentTime / player._buffer.duration;
};
return { start, progress };
}
await Tone.loaded;
invalidation.then(() => dispose());
return svg.svg({ width, height: 100 }, [
svg.rect({ x: 0, y: 0, width, height: 100, fill: "black" }),
svg.circle({
cx: cm.$(() => cm.map(vars.progress, 0, 1, 0, width)),
cy: 50,
r: 40,
fill: "white"
})
]);
}
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.
