2a:null 2b:["$","title",null,{"children":"Working with audio samples | Brian Slesinsky | Observable"}] 30:Tc7e,Waveform = { // For an explanation, see: https://observablehq.com/@skybrian/how-to-plot-long-audio-samples-at-any-zoom-level function findPeaks(audioData, offset, higher) { const a = Array(); let y = audioData[0]; let next = audioData[1]; if (higher(y, next)) { a.push({ t: offset, y }); } let prev; for (let i = 1; i < audioData.length - 1; i++) { prev = y; y = next; next = audioData[i + 1]; if (higher(y, prev) && higher(y, next)) { a.push({ t: offset + i, y }); } } if (higher(next, y)) { a.push({ t: offset + audioData.length - 1, y: next }); } return a; } function filterPeaks(peaks, nearby, higher) { let kept = null; let candidate = null; const a = Array(); for (let d of peaks) { if (!candidate) { candidate = d; if (!kept) { a.push(candidate); kept = candidate; candidate = null; } continue; } // invariant: kept and candidate are non-null and different points. if (d.t - kept.t > nearby) { // no more nearby candidates to check a.push(candidate); kept = candidate; candidate = d; } else if (higher(d.y, candidate.y)) { candidate = d; } } return a; } function chooseNearby(sampleLength, plotWidth) { return Math.ceil(0.5 * (sampleLength / plotWidth)); } function merge(a, b) { const out = Array(); let i = 0; let j = 0; while (i < a.length && j < b.length) { if (a[i].t < b[j].t) { out.push(a[i]); i++; } else { out.push(b[j]); j++; } } out.push(...a.slice(i)); out.push(...b.slice(j)); return out; } function enrich(points, audioData, start, end, nearby) { start = Math.max(0, start); const a = Array(); let kept = null; for (let t = start; t < points[0].t; t += nearby) { a.push({ t, y: audioData[t] }); } for (let d of points) { if (kept) { for (let t = kept.t + nearby; t < d.t; t += nearby) { a.push({ t, y: audioData[t] }); } } a.push(d); kept = d; } let t = end - 1; while (t - kept.t > nearby) { t -= nearby; } while (t < end) { a.push({ t, y: audioData[t] }); t += nearby; } return a; } class Waveform { constructor(audioData) { this.audioData = audioData; this.maxes = findPeaks(audioData, 0, (a, b) => a > b); this.mins = findPeaks(audioData, 0, (a, b) => a < b); } selectedData(start, length) { start = Math.floor(start); length = Math.floor(length); const nearby = chooseNearby(length, 0.5 * width); const end = start + length; const maxes = filterPeaks( this.maxes.filter((d) => d.t >= start && d.t < end), nearby, (a, b) => a > b ); const mins = filterPeaks( this.mins.filter((d) => d.t >= start && d.t < end), nearby, (a, b) => a < b ); return enrich(merge(maxes, mins), this.audioData, start, end, nearby); } } return Waveform; }31:[{"id":"87262fc60b16c0f33becbfc08ba679702ed9d718611d4df0187bdb636a527a443acc4862375ec092c3632bafbc24770dcc3d0af2ea66d9b55e5eb8d4abdb58b6","href":"https://static.observableusercontent.com/files/87262fc60b16c0f33becbfc08ba679702ed9d718611d4df0187bdb636a527a443acc4862375ec092c3632bafbc24770dcc3d0af2ea66d9b55e5eb8d4abdb58b6","name":"Accordion_MM_Ab3.wav","type":"audio/vnd.wave","lastModified":1663128133797.365,"size":300206}] 2e:{"id":"b1d64ef9b2e20198","slug":"working-with-audio-samples","title":"Working with audio samples","thumbnail":"940adb22476ebc3513f9bbdc4bf6d505339732f61d8c6c80b6be360ed3e8d3d5","access_level":"public","create_time":"$D2022-09-13T23:50:26.945Z","update_time":"$D2022-09-30T03:14:59.624Z","view_time":null,"first_public_time":"$D2022-09-14T05:20:26.642Z","has_unpublished_edits":null,"fork":false,"stars":17,"starred":false,"owner":{"type":"team","id":"546701ffd22deb25","login":"skybrian","name":"Brian Slesinsky","avatar_url":"https://avatars-next.observableusercontent.com/aad4098227ed0bac14ddf92555edaa127c41483654153d03528e152e985fe29e","tier":"starter_2024"},"version":589,"publish_version":589,"role":null,"authored":false,"authors":[{"type":"individual","id":"cc55791c9d6a8086","login":"skybrian","name":"Brian Slesinsky","avatar_url":"https://avatars-next.observableusercontent.com/aad4098227ed0bac14ddf92555edaa127c41483654153d03528e152e985fe29e","tier":null}],"members":[{"type":"individual","id":"cc55791c9d6a8086","login":"skybrian","name":"Brian Slesinsky","avatar_url":"https://avatars-next.observableusercontent.com/aad4098227ed0bac14ddf92555edaa127c41483654153d03528e152e985fe29e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"9b2f5660d9ad3f15","slug":"digital-signal-processing","title":"Notes on Digital Signal Processing","owner":{"id":"546701ffd22deb25","login":"skybrian","name":"Brian Slesinsky"}},"type":"notebook","body":{"titling":"auto","title":"Working with audio samples","cells":[{"id":0,"value":"# Working with audio samples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"## Load a sample from an attachment","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"audioFile = FileAttachment(\"Accordion_MM_Ab3.wav\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"ctx = new window.AudioContext()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"buf = await ctx.decodeAudioData(await audioFile.arrayBuffer());","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"audioData = buf.getChannelData(0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"## Plot the audio data\n\nAt ${ctx.sampleRate} samples per second, even a small amount of audio takes a long time to plot. Here's a class that reduces the number of points to something reasonable for a chart. (For an explanation, see [\"How to plot audio recordings at any zoom level\"](https://observablehq.com/@skybrian/how-to-plot-long-audio-samples-at-any-zoom-level).)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":282,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"waveForm = new Waveform(audioData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"Plot.plot({\n width: width,\n height: 200,\n y: { domain: [-1, 1] },\n marks: [\n Plot.areaY(waveForm.selectedData(0, audioData.length), {\n x: \"t\",\n y: \"y\",\n stroke: \"#338\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"## Select a region from the data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"viewof selectionStart = Inputs.range([0, audioData.length-100], {value: 0, step: 1, label: \"Selection start\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"viewof selectionLength = Inputs.range([500, audioData.length], {\n value: audioData.length,\n step: 1,\n label: \"Selection Length\",\n transform: Math.log\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"bouncySelection = {\n const end = selectionStart + selectionLength;\n return {\n start: selectionStart,\n length: selectionLength,\n end: end,\n includes: (t) => t >= selectionStart && t < end\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"selection = Promises.delay(500, bouncySelection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"{\n const sel = bouncySelection;\n const margin = sel.length * 0.1;\n const left = sel.start - margin;\n const right = sel.end + margin;\n const dataStart = Math.max(0, left);\n return Plot.plot({\n width: width,\n height: 200,\n x: { domain: [left, right] },\n y: { domain: [-1, 1] },\n marks: [\n Plot.ruleY([0], { stroke: \"#888\" }),\n Plot.ruleX([sel.start, sel.end], { stroke: \"#888\" }),\n Plot.lineY(waveForm.selectedData(left, right - left), {\n x: \"t\",\n y: \"y\",\n z: 0,\n stroke: (d) => (sel.includes(d.t) ? \"#338\" : \"#aab\")\n })\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"## Encode the selected region as a WAV file","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":180,"value":"encodeWavFile2 = (await import(\"https://unpkg.com/wav-file-encoder@1.0.3/dist/WavFileEncoder.js\")).encodeWavFile2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"wavData = encodeWavFile2(\n [audioData.slice(selection.start, selection.end)],\n ctx.sampleRate,\n 1\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"wavURL = URL.createObjectURL(new Blob([wavData]));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"## Play the new WAV file","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":128,"value":"{ const a = new Audio(wavURL); a.controls = true; return a; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"## Make a download link","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"Download selected sample","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"