2c:null 2d:["$","title",null,{"children":"Audio Inputs | Tom Larkworthy | Observable"}] 32:T17c5,async function sample({ loop = false, gain = 1, speed = 1, start = 0, end, audioContext, arrayBuffer, speedAdjust = true } = {}) { webaudioPolyfill; // Safari let sampleData, d2s, s2d, waveform; async function setBuffer(arrayBuffer) { const currentlyPlaying = waveform && playing; if (currentlyPlaying) stop(); sampleData = await audioContext.decodeAudioData(arrayBuffer); // Some useful seconds to data indeces factors. d2s = sampleData.duration / sampleData.getChannelData(0).length; s2d = sampleData.getChannelData(0).length / sampleData.duration; if (!end) end = sampleData.duration; const current = waveform ? ui.querySelector(".waveform") : undefined; debugger; waveform = waveformSelect({ selectionStart: current?.value?.selectionStart || start * s2d, selectionEnd: current?.value?.selectionEnd || end * s2d, audioBuffer: sampleData, height: 34 }); waveform.style["padding"] = "4px"; waveform.style["margin-top"] = `3px`; const syncWaveform = () => setLoop(loop); waveform.addEventListener("input", syncWaveform); invalidation.then(() => waveform.removeEventListener("input", syncWaveform) ); if (current) { current.replaceWith(waveform); current.remove(); } if (currentlyPlaying) play(); } await setBuffer(arrayBuffer); const speedCtl = Range([0.2, 5], { value: speed, label: "speed", transform: Math.log }); const syncSpeed = () => setLoop(loop); speedCtl.addEventListener("input", syncSpeed); invalidation.then(() => speedCtl.removeEventListener("input", syncSpeed)); const volume = knob({ value: gain, type: "volume", size: 50 }); const syncVolume = () => { if (gain && gain.gain) gain.gain.value = volume.value; }; volume.addEventListener("input", syncVolume); invalidation.then(() => volume.removeEventListener("input", syncVolume)); let source = null; let playing = false; function play(when = 0) { if (when === 0) stop(); source = audioContext.createBufferSource(); source.onended = () => { console.log("on ended"); playing = false; updateLook(); }; source.buffer = sampleData; source.playbackRate.value = speedCtl.value; gain = audioContext.createGain(); source.connect(gain); gain.connect(audioContext.destination); setLoop(loop); volume.setVolume(volume.value); const start = waveform.value.selectionStart * d2s; const duration = (waveform.value.selectionEnd - waveform.value.selectionStart) * d2s; source.start(when, start, loop ? undefined : duration); playing = true; updateLook(); } function stop() { if (source) { source.onended = null; source.stop(); } playing = false; source = gain = null; updateLook(); } function updateLook() { loopButton.style["color"] = loop ? "green" : "black"; loopButton.style["stroke"] = loop ? "green" : "black"; loopButton.style["border-color"] = loop ? "green" : "black"; playButton.style["color"] = playing ? "green" : "black"; playButton.style["stroke"] = playing ? "green" : "black"; playButton.style["border-color"] = playing ? "green" : "black"; } function setLoop(shouldLoop) { loop = shouldLoop; if (source) { source.loop = loop; source.loopStart = waveform.value.selectionStart * d2s; source.loopEnd = waveform.value.selectionEnd * d2s; if (playing && loop) { console.log("Restart loop"); stop(); play(); } } } const ui = html`

${volume} ${waveform} ${speedAdjust ? speedCtl : null}

`; let loopButton = ui.querySelector(".loop-btn"); let playButton = ui.querySelector(".play-btn"); ui.value = sampleData; // Add accessors to value to make it mutable Object.defineProperty(ui.value, "gain", { get: () => volume.value, set: (value) => { gain = value; volume.setVolume(value); }, enumerable: true }); Object.defineProperty(ui.value, "speed", { get: () => speedCtl.value, set: (value) => (speedCtl.value = value), enumerable: true }); Object.defineProperty(ui.value, "start", { get: () => waveform.value.selectionStart * d2s, set: (value) => { start = value; waveform.value.setSelectionStart(value * s2d); }, enumerable: true }); Object.defineProperty(ui.value, "end", { get: () => waveform.value.selectionEnd * d2s, set: (value) => { end = value; waveform.value.setSelectionEnd(value * s2d); }, enumerable: true }); Object.defineProperty(ui.value, "playing", { get: () => playing, set: (newVal) => { if (typeof newVal === "number") { play(newVal); } else { newVal ? play() : stop(); } }, enumerable: true }); Object.defineProperty(ui.value, "arrayBuffer", { get: () => arrayBuffer, set: (newVal) => { arrayBuffer = newVal; setBuffer(arrayBuffer); }, enumerable: true }); // Add top level control to DOM ui.play = play; ui.stop = stop; invalidation.then(() => stop()); // Color in loop button setLoop(loop); updateLook(); return ui; }33:T6cd,function knob({ type = "volume", value = 1, size = 100 } = {}) { if (type != "volume") throw new Error("Only have volume know ATM") let start = null; function mousedown(evt) { start = [evt.clientX, evt.clientY, value] return false; } const mousemove = (evt) => { if (!evt.buttons) start = null; if (start) { const delta = evt.clientX - start[0] - evt.clientY + start[1] const volume = start[2] + delta / width * 5 setVolume(volume) } } const mouseup = (evt) => start = null; document.addEventListener('mousemove', mousemove) document.addEventListener('mouseup', mouseup) invalidation.then(() => { document.removeEventListener('mousemove', mousemove) document.removeEventListener('mouseup', mouseup) }) function setVolume(_volume) { value = Math.min(Math.max(_volume, 0), 1) ui.value = value; const deg = -125 + value * 250; pivot.transform.baseVal.getItem(0).setRotate(deg, 0, 0); ui.dispatchEvent(new CustomEvent("input")); } const ui = svg`` let pivot = ui.querySelector(".pivot"); setVolume(value); ui.value = value ui.setVolume = setVolume; return ui; }34:Ta06,function waveformSelect({ audioBuffer, width = 250, height = 50, selectionStart = 0, selectionEnd = audioBuffer.length } = {}) { const data = audioBuffer.getChannelData(0); const density = seriesDensity(width, height) .yDomain([-1, 1]) .arcLengthNormalize(false) .xDomain([0, data.length]); let plot = densityPlot(density) .drawAxes(false) .background("white") .color(() => () => ({ r: 0, g: 0, b: 0, opacity: 1 })); const waveform = plot([data]); let start = null; function mousedown(evt) { const rect = ui.getBoundingClientRect(); const x = evt.clientX - rect.left; start = x; setSelectionStart(x * px2x); return false; } function mousemove(evt) { if (!evt.buttons) start = null; if (start) { const rect = ui.getBoundingClientRect(); const x = evt.clientX - rect.left; setSelectionEnd(x * px2x); } } let selectionStartRect, selectionEndRect; const px2x = (data.length * 1.0) / width; const x2px = (width * 1.0) / data.length; function setSelectionStart(start) { selectionStart = start; selectionStartRect.setAttribute("width", start * x2px); notifyInput(); } function setSelectionEnd(end) { selectionEnd = end; selectionEndRect.setAttribute("x", end * x2px); notifyInput(); } const value = { selectionStart, selectionEnd, setSelectionStart, setSelectionEnd }; function notifyInput() { value.selectionStart = selectionStart; value.selectionEnd = selectionEnd; ui.dispatchEvent(new CustomEvent("input")); } const overlay = svg``; const ui = html` ${overlay} ${waveform} `; selectionStartRect = ui.querySelector(".wselect-start"); selectionEndRect = ui.querySelector(".wselect-end"); ui.addEventListener("mousedown", mousedown); document.addEventListener("mousemove", mousemove); invalidation.then(() => { ui.removeEventListener("mousedown", mousedown); document.removeEventListener("mousemove", mousemove); }); ui.value = value; return ui; }35:Td25,webaudioPolyfill = { (function() { return function() { return function e(t, r, o) { function n(a, u) { if (!r[a]) { if (!t[a]) { var f = "function" == typeof require && require; if (!u && f) return f(a, !0); if (i) return i(a, !0); var c = new Error("Cannot find module '" + a + "'"); throw c.code = "MODULE_NOT_FOUND", c } var s = r[a] = { exports: {} }; t[a][0].call(s.exports, function(e) { return n(t[a][1][e] || e) }, s, s.exports, e, t, r, o) } return r[a].exports } for (var i = "function" == typeof require && require, a = 0; a < o.length; a++) n(o[a]); return n } }()({ 1: [function(e, t, r) { ! function() { "use strict"; var e = window.AudioContext = window.AudioContext || window.webkitAudioContext, t = e.prototype; Object.defineProperties(t, { createGain: { value: t.createGain || t.createGainNode }, createDelay: { value: t.createDelay || t.createDelayNode }, createScriptProcessor: { value: t.createScriptProcessor || t.createJavaScriptNode }, // Added in @tomlarkworthy/audio-inputs decodeAudioData: { value: window.webkitAudioContext ? function(raw) { return this.createBuffer(raw, 1); }: t.decodeAudioData }, }); var r = new e, o = r.createOscillator().constructor.prototype, n = r.createBufferSource().constructor.prototype, i = r.createGain().gain.constructor.prototype; Object.defineProperties(o, { setPeriodicWave: { value: o.setPeriodicWave || o.setWaveTable }, start: { value: o.start || o.noteOn }, stop: { value: o.stop || o.noteOff } }), Object.defineProperties(n, { start: { value: n.start || function() { return arguments.length > 1 ? n.noteGrainOn.apply(this, arguments) : n.noteOn.apply(this, arguments) } }, stop: { value: n.stop || n.noteOff } }), Object.defineProperties(i, { setTargetAtTime: { value: i.setTargetAtTime || i.setTargetValueAtTime } }) }() }, {}] }, {}, [1])(1) })(); return html`inline audio-context-polyfill` }36:[{"id":"5754382dc03e790b963b7af3e0b9e16d5f8440e1421524819936f2c8287f237022ad54785c98d797ffb2c99a3374a1ab5fb07e2c701ee60c8333a054c54e08a6","href":"https://static.observableusercontent.com/files/5754382dc03e790b963b7af3e0b9e16d5f8440e1421524819936f2c8287f237022ad54785c98d797ffb2c99a3374a1ab5fb07e2c701ee60c8333a054c54e08a6","name":"crash.mp3","type":"audio/mpeg","lastModified":1748678528167.647,"size":24433},{"id":"19316c0dd5c0e91d5935059fead380ec7cf33b9b541618c5eecba76bbf0cab729d030461b07afa1d81c3aea2f8e759b33f3e56d8e427a4e1581689cfa1ccaaf0","href":"https://static.observableusercontent.com/files/19316c0dd5c0e91d5935059fead380ec7cf33b9b541618c5eecba76bbf0cab729d030461b07afa1d81c3aea2f8e759b33f3e56d8e427a4e1581689cfa1ccaaf0","name":"CHH05.mp3","type":"audio/mpeg","lastModified":1748678624613.589,"size":4371}] 30:{"id":"e7c3854dfc5e08c3","slug":"audio-inputs","title":"Audio Inputs","thumbnail":"2c90c59554b4d28afec71fad6dff03b7647e34130735a4f8f2cadf79cb15eba3","access_level":"public","create_time":"$D2021-02-04T15:24:03.444Z","update_time":"$D2025-05-31T08:03:57.970Z","view_time":null,"first_public_time":"$D2021-02-06T19:32:36.894Z","has_unpublished_edits":null,"fork":false,"stars":22,"starred":false,"owner":{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024","bio":"Tech Lead at Taktile.\nFormerly Firebase, Google"},"version":1352,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"bio":"Tech Lead at Taktile. ex Firebase, Google.\n🦋 larkworthy.bsky.social"}],"members":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"role":"editor"}],"comments":[{"id":"a96e2378cb344f3e","reply_to_id":null,"content":"Selecting a range feels a bit wonky. Any way for the edges to be individually adjustable?\n\nAlternatively: can start and length of the selection be hooked up to knobs?","create_time":"$D2021-02-06T20:15:48.685Z","update_time":"$D2021-02-06T20:18:10.794Z","resolved":false,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":11,"collection":{"id":"180b9f5ac2494300","slug":"music","title":"Music","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"type":"notebook","body":{"titling":"auto","title":"Audio Inputs","cells":[{"id":0,"value":"# Audio Inputs\n\n~~~js\nimport { sample, audioContext } from \"@tomlarkworthy/audio-inputs\"\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":877,"value":"md`## Sample\n\nLoads audio data into an AudioBuffer, and provides some controls for selection, playbackRate, volume and loop of the sample.\n\nThe value emitted by the control is the buffer, annotated with properties.\n\nTODO: BUG: changing loop selection resets loop which is not strictly necissary\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1272,"value":"viewof dynamicBuffer = Inputs.select(\n new Map([\n [\n \"crash.mp3\",\n await FileAttachment(\"crash.mp3\").arrayBuffer()\n ],\n [\"CHH05.mp3\", await FileAttachment(\"CHH05.mp3\").arrayBuffer()]\n ])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1292,"value":"syncBuffer = {\n manual.arrayBuffer = dynamicBuffer.slice();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1224,"value":"viewof manual = sample({\n loop: false,\n gain: 0.4,\n speed: 3,\n audioContext: audioContext,\n arrayBuffer: await FileAttachment(\"crash.mp3\").arrayBuffer()\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"viewof cymbal = sample({\n loop: true,\n gain: 0.4,\n start: 0.1,\n end: 0.5,\n speed: 3,\n audioContext: audioContext,\n arrayBuffer: await FileAttachment(\"crash.mp3\").arrayBuffer()\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"md`\n\n~~~js\nimport {sample, webaudioPolyfill} from '@tomlarkworthy/audio-inputs'\n~~~\n\n~~~js\nviewof cymbal = sample({\n audioContext: new AudioContext() /* usually shared across many componetns in an audio app */,\n arrayBuffer: await FileAttachment(\"crash.mp3\").arrayBuffer(),\n})\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1033,"value":"md`### Writable properties demo\n\nIf you write to the emitted value fields the UI will update. See what happens when you press play and fiddle with the playback speed.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"// We can write to the property and the UI updates\n// The properties are enumerable\n{\n writable_demo.start = 0.5* Math.sin(now/300) + 0.5\n writable_demo.end = 0.5*Math.sin(now/300) + 0.6\n writable_demo.gain = (now / 1000) % 1\n return Object.keys(writable_demo).concat(Object.values(writable_demo))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1181,"value":"audioContext = new AudioContext()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":987,"value":"viewof writable_demo = sample({\n loop: true,\n audioContext: audioContext,\n arrayBuffer: await FileAttachment(\"crash.mp3\").arrayBuffer()\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1176,"value":"writable_demo","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"md`## Knob\n\nKnobs are an inferior but cooler way of implementing a slider. Drag up or to the right to increase the value.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"viewof volume = knob({\n type: \"volume\",\n size: 250,\n value: 0.5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":916,"value":"md`## Waveform Selector\n\nUses Yuri Vishnevsky's [density plot](https://observablehq.com/collection/@twitter/density) to display a waveform effeciently as an undersampled timeseries. The user can select a portion with the mouse.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"viewof waveform = waveformSelect({\n audioBuffer: await new AudioContext().decodeAudioData(await FileAttachment(\"crash.mp3\").arrayBuffer()),\n selectionStart: 10000,\n selectionEnd: 50000, \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"range = (start, stop, step) => Array(Math.floor((stop - start) / step + 1 + step * 0.001)).fill(0).map((_, i) => start + i * step)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"import {densityPlot, seriesDensity, cacheInterpolator} from '@twitter/density-plot@4159'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"import {html, svg} from '@observablehq/htl'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"import {Range} from '@observablehq/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1089,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 31:"$30:body"