31: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; }32:[{"id":"87262fc60b16c0f33becbfc08ba679702ed9d718611d4df0187bdb636a527a443acc4862375ec092c3632bafbc24770dcc3d0af2ea66d9b55e5eb8d4abdb58b6","href":"https://static.observableusercontent.com/files/87262fc60b16c0f33becbfc08ba679702ed9d718611d4df0187bdb636a527a443acc4862375ec092c3632bafbc24770dcc3d0af2ea66d9b55e5eb8d4abdb58b6","name":"Accordion_MM_Ab3.wav","type":"audio/vnd.wave","lastModified":1663128133797.365,"size":300206}] 2f:{"title":"Working with audio samples","cells":[{"id":0,"value":"# Working with audio samples","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"## Load a sample from an attachment","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"audioFile = FileAttachment(\"Accordion_MM_Ab3.wav\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"ctx = new window.AudioContext()","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"buf = await ctx.decodeAudioData(await audioFile.arrayBuffer());","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"audioData = buf.getChannelData(0);","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":282,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":572,"value":"waveForm = new Waveform(audioData)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":30,"value":"## Select a region from the data","pinned":false,"hidden":false,"mode":"md"},{"id":60,"value":"viewof selectionStart = Inputs.range([0, audioData.length-100], {value: 0, step: 1, label: \"Selection start\"})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":484,"value":"selection = Promises.delay(500, bouncySelection)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":163,"value":"## Encode the selected region as a WAV file","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":134,"value":"wavData = encodeWavFile2(\n [audioData.slice(selection.start, selection.end)],\n ctx.sampleRate,\n 1\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"wavURL = URL.createObjectURL(new Blob([wavData]));","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"## Play the new WAV file","pinned":false,"hidden":false,"mode":"md"},{"id":128,"value":"{ const a = new Audio(wavURL); a.controls = true; return a; }","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"## Make a download link","pinned":false,"hidden":false,"mode":"md"},{"id":237,"value":"Download selected sample","pinned":false,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}