31:T4e8,svg = { const height = width / 3 const svg = d3.select(DOM.svg(width, height)) const offset = d3.scaleBand(instruments.map(d => d.name), [ 0, width ]).padding(0.2) const g = svg.selectAll('g.instruments') .data(instruments, d => d.name) .enter().append('g') .attr('class', (d, i) => `instruments instrument-${i}`) .attr('transform', d => `translate(${offset(d.name)}, 0)`) const x = d3.scaleBand([ 0, 1, 2, 3 ], [ 0, offset.bandwidth() ]).padding(0.1) const y = d3.scaleLinear(d3.extent(notes, d => d.playTime), [ height - 20, 0 ]) g.selectAll('rect') .data(d => d.notes) .enter().append('rect') .attr('x', d => x(d.indexOf)) .attr('y', d => y(d.playTime)) .attr('width', x.bandwidth()) .attr('height', 2) g.selectAll('text') .data(d => d.keys) .enter().append('text') .attr('x', (d, i) => x(i)) .attr('y', height) .style('font-size', 12) .style('font-family', 'system-ui') .text(d => `${d.pc}${d.oct}`) svg.append('line') .attr('x1', 0) .attr('x2', width) .attr('y1', width / 3 * 2 / 3 - 15) .attr('y2', width / 3 * 2 / 3 - 15) .attr('stroke', 'gray') .attr('stroke-dasharray', '2 3') return svg.node() }32:[] 2f:{"title":"Mobile MIDI orchestra","cells":[{"id":0,"value":"md`\n# Mobile MIDI orchestra\n\nTurn small-to-large groups of attendees and their phones into an instrument-playing orchestra. Each attendee only needs to be able to follow a Guitar Hero inspired UI to play their instrument’s part. Combining everyone’s individual performances (with some redundancy) and their phone’s audio, we’ll be able to play simple to complex arrangements of any MIDI song.\n\nI’d love to be able to have the entire hall and every attendee be able to participate in one large piece. The tech is simple and distributed enough to be able to scale to that size. This also should work as an (attended) side installation, where I teach and encourage groups to perform in small groups with each other.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1037,"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":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@2.0.1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"mnf = require('https://bundle.run/midi-notefreq-pmb@1.0.4')","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":1089,"value":"d3 = require('d3-array', 'd3-collection', 'd3-scale', 'd3-scale-chromatic', 'd3-selection')","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"vegaEmbed = require('vega-embed')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}