2b:null 2c:["$","title",null,{"children":"Audio sample slicer | Christopher Pietsch | Observable"}] 31:[] 2f:{"id":"3d924a8fbc3117d8","slug":"audio-sample-slicer","title":"Audio sample slicer","thumbnail":"09efcaee1e9b27cc5d94b047e371566dc8544b5e61fb82035f567ed8f71ee5af","access_level":"public","create_time":"$D2020-02-25T12:39:20.668Z","update_time":"$D2020-03-02T18:30:47.994Z","view_time":null,"first_public_time":"$D2020-02-27T16:37:41.797Z","fork":{"id":"f867dec7672c960c","slug":"audio-waveform-with-brush","title":"Audio waveform with brush","owner":{"id":"dbaac3ef74ea8f0c","login":"cpietsch","name":"Christopher Pietsch"}},"stars":2,"starred":false,"owner":{"type":"team","id":"dbaac3ef74ea8f0c","login":"cpietsch","name":"Christopher Pietsch","avatar_url":"https://avatars-next.observableusercontent.com/5c893db7cf5c2699bda61c80eaa28fc9ebd560ec948b9bec441e6eefe34c25f8","tier":"starter_2024"},"version":839,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"42a00b3d53c425cb","login":"cpietsch","name":"Christopher Pietsch","avatar_url":"https://avatars-next.observableusercontent.com/5c893db7cf5c2699bda61c80eaa28fc9ebd560ec948b9bec441e6eefe34c25f8","tier":null}],"members":[{"type":"individual","id":"42a00b3d53c425cb","login":"cpietsch","name":"Christopher Pietsch","avatar_url":"https://avatars-next.observableusercontent.com/5c893db7cf5c2699bda61c80eaa28fc9ebd560ec948b9bec441e6eefe34c25f8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Audio sample slicer","cells":[{"id":0,"value":"md`# Audio sample slicer`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":762,"value":"viewof upload = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":585,"value":"viewof input = form(html`

folder `);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":645,"value":"viewof index = {\n const form = html`\n

\n `;\n form.value = 0\n \n function add(event, dir) {\n event.preventDefault();\n form.value = Math.max(\n 0,Math.min(\n form.value + dir, input.files && input.files.length || 0\n ))\n form.dispatchEvent(new CustomEvent(\"input\"))\n \n }\n \n form.prev.onclick = e => add(e,-1)\n form.next.onclick = e => add(e,1)\n \n form.add = add\n \n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":650,"value":"html`${index} / ${input.files.length} ${file.name}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":791,"value":"{\n if(storage.samples[file.name]){\n var extent = storage.samples[file.name].map(t => t / blockSize * audioContext.sampleRate)\n //normalizedChart.move(extent) \n return extent\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"normalizedChart","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":750,"value":"download(async () => {\n await Promises.delay(100);\n return new Blob(\n [JSON.stringify(storage)], \n {type: \"application/json\"}\n );\n}, input.name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":837,"value":"selection","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":247,"value":"seconds = selection.map(t => t * blockSize / audioContext.sampleRate)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":684,"value":"keymapping = {\n const keydowned = event => {\n //console.log(event)\n if (event.key === \"ArrowRight\") viewof index.add(event, 1)\n if (event.key === \"ArrowLeft\") viewof index.add(event, -1)\n if (event.key === \" \" && !event.shiftKey) play()\n if (event.key === \" \" && event.shiftKey) playSample(selection[0],selection[1])\n //event.preventDefault();\n };\n window.addEventListener(\"keydown\", keydowned);\n invalidation.then(() => window.removeEventListener(\"keydown\", keydowned));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":707,"value":"saveAndPlaySample = {\n await selection\n if(selection.length){\n playSample(selection[0],selection[1])\n storage.samples[file.name] = selection.map(t => t * blockSize / audioContext.sampleRate) \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":799,"value":"{\n storage.name = input.name \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":553,"value":"function save() {\n //localStorage.setItem(input.name, JSON.stringify({...storage, name: input.name })) \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":442,"value":"file = new Promise(resolve => {\n if(input.files[index]) resolve(input.files[index])\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":348,"value":"wavBlobUrl = URL.createObjectURL(file)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"audiobuffer = await fetch(wavBlobUrl)\n .then(response => response.arrayBuffer())\n .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":181,"value":"samples = 300;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":192,"value":"blockSize = Math.floor(rawData.length / samples);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":189,"value":"audiobuffer","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":183,"value":"rawData = audiobuffer.getChannelData(0);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":213,"value":"sumBlockData = {\n // from https://css-tricks.com/making-an-audio-waveform-visualizer-with-vanilla-javascript/\n const sumData = [];\n for (let i = 0; i < samples; i++) {\n let blockStart = blockSize * i; // the location of the first sample in the block\n let sum = 0;\n for (let j = 0; j < blockSize; j++) {\n sum = sum + Math.abs(rawData[blockStart + j]) // find the sum of all the samples in the block\n }\n sumData.push(sum / blockSize); // divide the sum by the block size to get the average\n }\n return sumData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"normalizedData = {\n // from https://css-tricks.com/making-an-audio-waveform-visualizer-with-vanilla-javascript/\n const multiplier = Math.pow(Math.max(...sumBlockData), -1);\n return sumBlockData.map(n => n * multiplier);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"play = function() {\n //var audioCtx = new (window.AudioContext || window.webkitAudioContext)();//\n var audioCtx = audioContext;\n var source = audioCtx.createBufferSource();\n\n // set the buffer in the AudioBufferSourceNode\n source.buffer = audiobuffer;\n \n var biquadFilter = audioCtx.createBiquadFilter();\n biquadFilter.type = \"highpass\";\n biquadFilter.frequency.value = 900;\n //biquadFilter.frequency.Q = 100;\n //biquadFilter.gain.value = 20;\n \n var gainNode = audioCtx.createGain();\n gainNode.gain.value = 20;\n \n source.connect(biquadFilter).connect(gainNode).connect(audioCtx.destination);\n\n source.start();\n \n return source\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"function playSample(from, to) {\n var source = audioContext.createBufferSource();\n var volumeMultiplier = 10;\n var myArrayBuffer = audioContext.createBuffer(1, blockSize * (to-from), audioContext.sampleRate);\n var nowBuffering = myArrayBuffer.getChannelData(0);\n \n for (var i = 0; i < myArrayBuffer.length; i++) {\n nowBuffering[i] = rawData[i + from * blockSize] * volumeMultiplier;\n }\n \n source.buffer = myArrayBuffer;\n source.connect(audioContext.destination)\n source.start();\n \n return myArrayBuffer\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":767,"value":"mutable defaultStorage = ({ samples: {}, name: \"\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":773,"value":"mutable storage = defaultStorage","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":783,"value":"{\n mutable storage = JSON.parse(await Files.text(upload))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"audioContext = new (window.AudioContext || window.webkitAudioContext)();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"import {chart as normalizedChart, selectionEnd as selection}\nwith {normalizedData as data}\nfrom \"@cpietsch/bar-chart-on-simple-array\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"import {fileInput} from \"@mbostock/file-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":459,"value":"import {localStorage} from \"@mbostock/safe-local-storage\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":461,"value":"//storage = JSON.parse(localStorage.getItem(await input.name)) || { samples: {}, name: \"\" }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":593,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":793,"value":"import {download} from \"@mbostock/lazy-download\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":368,"value":"viewof forms = {\n const form = html`\n

files

folder name

controls

\n `;\n form.value = 0\n \n function click(event) {\n event.preventDefault();\n form.value.index = Math.max(\n 0,Math.min(\n form.value.index + parseInt(event.toElement.value), form.value.files && form.value.files.length || 0\n ))\n form.dispatchEvent(new CustomEvent(\"input\"))\n }\n \n form.prev.onclick = click\n form.next.onclick = click\n //form.save.onclick = () => { localStorage.setItem(form.value.name, JSON.stringify(storage)) }\n form.name.onchange = event => form.value.name = event.target.value\n form.files.onchange = event => form.value.files = event.target.files\n \n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"