28:null 29:["$","title",null,{"children":"MIDI player | Visnu Pitiyanuvath | Observable"}] 2e:[] 2c:{"id":"af3eee95e828bb70","slug":"midi-player","title":"MIDI player","thumbnail":"690d743fbd8433746bd93e8b3f2ef15393b2afb3d2f20a74b48694f9c65b39dc","access_level":"public","create_time":"$D2018-08-24T00:17:19.301Z","update_time":"$D2020-07-16T05:46:41.754Z","view_time":null,"first_public_time":"$D2018-08-25T04:47:48.132Z","has_unpublished_edits":null,"fork":false,"stars":15,"starred":false,"owner":{"type":"team","id":"31b136fdb993b00a","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":"pro_2026"},"version":1050,"publish_version":1050,"role":null,"authored":false,"authors":[{"type":"individual","id":"dbf69c13a14d2f62","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":null}],"members":[{"type":"individual","id":"dbf69c13a14d2f62","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"8712dfcae6c3a83a","slug":"music","title":"Music","owner":{"id":"31b136fdb993b00a","login":"visnup","name":"Visnu Pitiyanuvath"}},"type":"notebook","body":{"title":"MIDI player","cells":[{"id":0,"value":"md`# MIDI player`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"viewof select = {\n const select = html`\n \n `\n return select\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"file = {\n if (select) {\n const response = await fetch(select)\n return new MIDIFile(await Files.buffer(await response.blob()))\n } else {\n // viewof upload = html``\n // return new MIDIFile(await Files.buffer(upload))\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"events = file.getMidiEvents()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"notes = _(events)\n .filter({ subtype: 9 /*MIDIEvents.EVENT_MIDI_NOTE_ON*/ })\n // .filter(e => e.track !== 3 && e.track !== 5)\n .sortBy('playTime')\n .map(event => {\n const note = noteParser.parse(mnf.midiNote2sciUK(event.param1))\n note.name = `${note.pc}${note.oct}`\n return {\n ...event,\n note\n }\n })\n .value()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":972,"value":"start = select, Date.now() + 1500 // wait for 1s before playing","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"vegalite({\n data: { values: notes },\n width,\n autosize: 'fit-x',\n mark: { type: 'tick', thickness: 2 },\n encoding: {\n x: { field: 'playTime', type: 'quantitative', scale: { nice: false } },\n // x2: { field: 'stopTime', type: 'quantitative', scale: { nice: false } },\n y: { field: 'param1', type: 'quantitative', scale: { zero: false } },\n color: { field: 'track', type: 'nominal' },\n opacity: {\n condition: { test: `datum.playTime <= ${note ? note[0].playTime : 0}`, value: 1 },\n value: 0.5\n },\n size: { value: 6 },\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"note = {\n // const start = Date.now() + 1000 // wait for 1s before playing\n const grouped = _(notes)\n .groupBy('playTime')\n .values()\n .sortBy(g => g[0].playTime)\n .value()\n for (let note of grouped) {\n yield new Promise(resolve => {\n setTimeout(() => { resolve(note) }, note[0].playTime - (Date.now() - start))\n })\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"oscillator = note.map(n => play(n.note))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"instruments = {\n const keyCounts = _(notes).countBy('param1').entries().sortBy(([key, count]) => -count).value()\n const mean = notes.length / keyCounts.length\n \n const instruments = []\n while (keyCounts.length) {\n const lastInstrument = instruments[instruments.length - 1]\n if (!lastInstrument || lastInstrument.length >= 4)\n instruments.push([keyCounts.shift()])\n else if (_.sumBy(lastInstrument, 1) > mean)\n lastInstrument.push(keyCounts.pop())\n else\n lastInstrument.push(keyCounts.shift())\n }\n\n return instruments.map(keys => ({\n keys: _.sortBy(keys, ([midi]) => midi).map(([midi]) => noteParser.parse(mnf.midiNote2sciUK(midi))),\n notes: _.sumBy(keys, 1)\n }))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"viewof input = {\n return html`\n \n ${instruments.map(instrument => html`

\n ${instrument.keys.map(n => {\n const active = _.find(note, { param1: n.midi })\n const button = html``\n let oscillator = null\n button.onmousedown = button.ontouchstart = () => oscillator = play(n)\n button.onmouseup = button.ontouchend = () => oscillator.stop(ctx.currentTime + 1)\n return button\n })}\n

`)}\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"preview(instruments[0], now - start, now - start + 5000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"preview(instruments[1], now - start, now - start + 5000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":988,"value":"preview(instruments[2], now - start, now - start + 5000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":990,"value":"preview(instruments[3], now - start, now - start + 5000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":908,"value":"function preview(instrument, start, end) {\n const midi = _.keyBy(instrument.keys, 'midi')\n const keys = notes.filter(n => n.param1 in midi)\n const i = _.sortedIndexBy(keys, { playTime: start }, 'playTime'),\n j = _.sortedIndexBy(keys, { playTime: end }, 'playTime')\n const domain = _(keys).uniqBy('note.name').sortBy('note.midi').map(n => n.note.name).value()\n \n return vegalite({\n data: { values: _.slice(keys, i, j) },\n // width,\n // height: 300,\n mark: { type: 'tick', thickness: 20 },\n encoding: {\n x: { field: 'playTime', type: 'quantitative', scale: { domain: [ start, end ], nice: false }, axis: false },\n y: { field: 'note.name', type: 'nominal', scale: { domain } },\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"md`## Web Audio`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"function play({ freq }, stop=5) {\n const gain = ctx.createGain()\n gain.gain.value = 0\n gain.gain.linearRampToValueAtTime(0.2, ctx.currentTime)\n gain.gain.setTargetAtTime(0, ctx.currentTime + 0.1, 0.3)\n gain.connect(ctx.destination)\n\n const oscillator = ctx.createOscillator()\n // oscillator.type = 'square';\n oscillator.frequency.value = freq\n oscillator.connect(gain)\n\n oscillator.start()\n if (stop)\n oscillator.stop(ctx.currentTime + stop)\n \n return oscillator\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"ctx = new (window.AudioContext || window.webkitAudioContext)()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"_ = (await import('https://cdn.skypack.dev/lodash')).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1035,"value":"noteParser = import('https://cdn.skypack.dev/note-parser?min')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1024,"value":"mnf = (await import('https://cdn.skypack.dev/midi-notefreq-pmb@1?min')).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1019,"value":"MIDIFile = (await import('https://cdn.skypack.dev/midifile@1?min')).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"vegalite = require('vega-embed')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"