Graphics Developer, Creative Coder, DataViz Cognoscenti
md`# Midi Viewer`
{
const [noteMin, noteMax] = d3.extent(notes, d => d.midi);
const [yMin, yMax] = d3.extent(notes, d => d.time);
const xDomain = d3.range(noteMin, noteMax + 1);
const yDomain = [0, yMax];
const xRange = [0, 100];
const yRange = [0, 100];
const xScale = d3.scaleBand(xDomain, xRange);
const yScale = d3.scaleLinear(yDomain, yRange);
const mapped = notes.map(d => {
const top = yScale(d.time);
const bottom = yScale(d.time + d.duration);
const height = Math.abs(top - bottom);
const left = xScale(d.midi);
const right = left + xScale.bandwidth();
const width = Math.abs(left - right);
return {
...d,
top,
bottom,
height,
left,
right,
width
};
});
const rects = mapped.map(d => {
const { top: y, left: x, width, height } = d;
return svg`<rect ${{
x: `${x}%`,
y: `${y}%`,
width: `${width}%`,
height: `${height}%`
}} />`;
});
mutable log = mapped;
return html`<svg style=${{
width: `100%`,
height: `2000px`
}}>${rects}</svg>`;
}
import { button } from "@jashkenas/inputs"
mutable playing = false
mutable synth = null
function start() {
const synth_ = new Tone.PolySynth(Tone.Synth, {
maxPolyphony: 20,
oscillator: {
partials: [0, 2, 3, 4, 5]
}
}).toDestination();
mutable synth = synth_;
const now = Tone.now();
notes.forEach(note => {
const { name, duration, time, velocity } = note;
synth_.triggerAttackRelease(name, duration, time + now, velocity);
});
}
function stop() {
if (synth) {
synth.disconnect();
mutable synth = null;
}
}
timeScale = 2
mutable log = null
notes = notesRaw.map(d => {
const { midi, name, duration, time, velocity } = d;
const noteName = midiutils.noteNumberToName(midi);
const frequency = midiutils.noteNumberToFrequency(midi);
return {
...d,
name,
duration,
time,
velocity,
number: midi,
noteName,
frequency
};
})
notesRaw = data.tracks[0].notes
data.tracks[0].notes[0].name
data = new ToneJSMidi.Midi(arrayBuffer)
arrayBuffer = await FileAttachment("entertainer.mid").arrayBuffer()
Tone = require('tone@next')
ToneJSMidi = require('@tonejs/midi')
d3 = require('d3')
import { html, svg } from "@observablehq/htl"
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.
