The avatar for @mjbo
Max Bo
Software Engineer @ Canva, ex-Google | music, color theory, Australian democracy, situated software & generative art
Public
Music
Edited
Mar 29, 2023
Paused
1 fork
1 star
1
Music
[WIP] Track Audio Analysis visualization
Genre map explorer for SpotifyTrorca - an Observable music tracker
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
analysis = (await api.getAudioAnalysisForTrack(currentPlayingTrack.item.id))
.body
Insert cell
currentPlayingTrack = {
return (await api.getMyCurrentPlayingTrack()).body;
}
Insert cell
tidySegments = analysis.segments.flatMap((segment) =>
segment.pitches.map((pitch, i) => ({
pitch_index: i,
pitch_value: pitch,
...segment
}))
)
Insert cell
updateRate = (1000 * 60) / analysis.track.tempo
Insert cell
Insert cell
loudnessMarks = [
Plot.tickX(analysis.bars, { x: "start", strokeOpacity: 0.3 }),
Plot.tickX(analysis.beats, { x: "start", strokeOpacity: 0.1 }),
Plot.line(analysis.segments, {
x: "start",
y: "loudness_start"
})
]
Insert cell
currentSegment = analysis.segments.find((segment) => segment.start > t / 1000)
Insert cell
Insert cell
getSegmentPitches(currentSegment)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
p5Sound = require("https://unpkg.com/p5@1.2.0/lib/addons/p5.sound.js").catch(
() => window["p5"]
)
Insert cell
<figure>
${await FileAttachment("image.png").image()}
</figure>
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