30:[] 2e:{"title":"MIDI player","cells":[{"id":0,"value":"md`# MIDI player`","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"viewof select = {\n const select = form(html`\n `)\n return select\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"file = {\n if (!select.upload) {\n const response = await fetch(select.selecty)\n return new MIDIFile(await Files.buffer(await response.blob()))\n } else {\n return new MIDIFile(await Files.buffer(select.upload))\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"events = file.getMidiEvents()","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":972,"value":"viewof start = {\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"},{"id":910,"value":"preview(instruments[0], now - start, now - start + 5000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":969,"value":"preview(instruments[1], now - start, now - start + 5000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":988,"value":"preview(instruments[2], now - start, now - start + 5000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":990,"value":"preview(instruments[3], now - start, now - start + 5000)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":686,"value":"md`## Web Audio`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":89,"value":"ctx = new (window.AudioContext || window.webkitAudioContext)()","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"noteParser = require('note-parser')","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"mnf = require('https://bundle.run/midi-notefreq-pmb')","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"MIDIFile = require('https://bundle.run/midifile@1.0.4')","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"vegalite = require('@observablehq/vega-lite')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1008,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}