2d:null 2e:["$","title",null,{"children":"Sound Widgets | Debanjum | Observable"}] 33:T43d,function Draw(genFn, height = 80, color = '#017eff') { let clampedWidth = Math.min(width, 690); const drawingCtx = DOM.context2d(clampedWidth, height); const style = getComputedStyle(document.body); // Draw the middle line. drawingCtx.strokeStyle = style.getPropertyValue('--text-grey') ?? '#475569'; drawingCtx.beginPath(); drawingCtx.moveTo(0, height / 2); drawingCtx.lineTo(clampedWidth, height / 2); drawingCtx.stroke(); // Draw the waveform. drawingCtx.strokeStyle = style.getPropertyValue('--blue') ?? color; drawingCtx.beginPath(); const values = []; let max = 0; for (let i = 0; i < clampedWidth; i++) { const value = genFn(i / clampedWidth); if (Math.abs(value) > max) max = Math.abs(value); values.push(value); } for (let i = 0; i < clampedWidth; i++) { const value = values[i] / max; const y = height - Math.floor((value / 2 + 0.5) * height * 0.9 + height * 0.05); if (i == 0) { drawingCtx.moveTo(i, y); } else { drawingCtx.lineTo(i, y); } } drawingCtx.stroke(); return drawingCtx.canvas; }34:T1182,class SoundBuffer { constructor(genFn, duration = 1) { this.duration = duration; // Create an audio buffer. this.audioBuffer = ctx.createBuffer(1, ctx.sampleRate * this.duration, ctx.sampleRate); this.buffer = this.audioBuffer.getChannelData(0); let max = 0; for (let i = 0; i < this.audioBuffer.length; i++) { const value = genFn(i / ctx.sampleRate); this.buffer[i] = value; if (Math.abs(value) > max) max = Math.abs(value); } for (let i = 0; i < this.audioBuffer.length; i++) { this.buffer[i] = this.buffer[i] / max; } } play(maxVol = 0.3) { this.stop(); this.source = ctx.createBufferSource(); this.source.buffer = this.audioBuffer; const gain = ctx.createGain(); gain.gain.value = maxVol; this.source.connect(gain); gain.connect(ctx.destination); this.source.start(); } stop() { if (this.source) this.source.stop(); } draw(height = 50, nonClampedWidth = width, color = '#017eff') { let width = Math.min(nonClampedWidth, 690); const drawingCtx = DOM.context2d(width, height); const style = getComputedStyle(document.body); // Draw the middle line. drawingCtx.strokeStyle = style.getPropertyValue('--text-grey') ?? '#475569'; drawingCtx.beginPath(); drawingCtx.moveTo(0, height / 2); drawingCtx.lineTo(width, height / 2); drawingCtx.stroke(); // Draw the waveform. drawingCtx.strokeStyle = style.getPropertyValue('--blue') ?? color; drawingCtx.beginPath(); for (let i = 0; i < width; i++) { const value = this.buffer[Math.floor(i / width * this.audioBuffer.length)]; const y = height - Math.floor((value / 2 + 0.5) * height * 0.9 + height * 0.05); if (i == 0) { drawingCtx.moveTo(i, y); } else { drawingCtx.lineTo(i, y); } } drawingCtx.stroke(); return drawingCtx.canvas; } gui() { const ui = html`

▶ ◼ ${this.duration} s

`; const cursor = ui.querySelector('.cursor'); let interval = null; const resetInterval = () => { if (interval != null) { clearInterval(interval); interval = null; } }; const soundPlayer = ui.querySelector('.sound-player'); ui.querySelector('.sound-pane').appendChild(this.draw(46, width-20)); ui.querySelector('.play-button').onclick = () => { cursor.style.left = '0'; this.play(); cursor.style.display = 'block'; const playTime = Date.now(); resetInterval(); interval = setInterval(() => { if (!document.contains(soundPlayer)) { resetInterval(); this.stop(); } let progress = (Date.now() - playTime) / this.duration / 1000; if (progress < 0) progress = 0; if (progress > 1) { progress = 1; resetInterval(); this.stop(); cursor.style.display = 'none'; } cursor.style.left = `${Math.floor(progress * (width - 20))}px`; }, 20); }; ui.querySelector('.stop-button').onclick = () => { resetInterval(); this.stop(); cursor.style.display = 'none'; }; return ui; } }35:[] 31:{"id":"d7d4c0e1e1cfa895","slug":"sound-widgets","title":"Sound Widgets","thumbnail":"68527ff9be8b55886eedbd39c19146f2845bae02f96ffeba5ad4e5f2b94d3da0","access_level":"public","create_time":"$D2023-01-14T17:14:54.535Z","update_time":"$D2023-01-18T16:14:31.342Z","view_time":null,"first_public_time":"$D2023-01-14T17:14:54.535Z","has_unpublished_edits":null,"fork":{"id":"c6b40d1143a0b536","slug":"sounds","title":"Sounds","owner":{"id":"38ab6d7c2dc7f1de","login":"freedmand","name":"Dylan Freedman"}},"stars":2,"starred":false,"owner":{"type":"team","id":"73b8e7a6b35f81ef","login":"debanjum","name":"Debanjum","avatar_url":"https://avatars-next.observableusercontent.com/71f857e5cd72989932412a06de3d43225f0fef328029a743310bec2ea8b7998b","tier":"starter_2024"},"version":1758,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"068085ccdab1075c","login":"debanjum","name":"Debanjum","avatar_url":"https://avatars-next.observableusercontent.com/71f857e5cd72989932412a06de3d43225f0fef328029a743310bec2ea8b7998b","tier":null}],"members":[{"type":"individual","id":"068085ccdab1075c","login":"debanjum","name":"Debanjum","avatar_url":"https://avatars-next.observableusercontent.com/71f857e5cd72989932412a06de3d43225f0fef328029a743310bec2ea8b7998b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Sound Widgets","cells":[{"id":1756,"value":"# Sound Widgets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":422,"value":"Play((t) => Math.sin(300 * t * 2 * Math.PI) + Math.sin(400 * t * 2 * Math.PI) + Math.sin(500 * t * 2 * Math.PI))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1486,"value":"md`# Usage\n\nThese widgets were created for use in the [musical ladder of abstraction notebook](https://observablehq.com/@debanjum/musical-ladder-of-abstraction). You can freely reuse it in other notebooks by requiring the appropriate method from \\`@debanjum/sounds\\`.\n\nThe primary methods this notebooks exports are\n\n* \\`Play(genFn, duration = 1)\\`\n* \\`Draw(genFn)\\`\n\nIn these functions, \\`genFn\\` is a function that takes a single argument for time and returns an amplitude for each time step. \\`duration\\` specifies the length (in seconds) to play the sound function.\n\nThough it is conventional to return amplitudes in the range -1 to 1, the play functions normalize the result so this is not strictly necessary.\n\n# Credits\n\nThis notebook is forked from \\`@freedmand/sounds\\`. It uses slider controls from \\`@jashkenas/inputs\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"ctx = new (window.AudioContext || window.webkitAudioContext)()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"function Play(genFn, duration = 1) {\n return new SoundBuffer(genFn, duration).gui();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"function GenerateTex(prefix, generatorFn, iterations, suffix) {\n let equation = prefix;\n for (let i = 0; i < iterations; i++) equation += generatorFn(i);\n equation += suffix;\n const div = document.createElement('div');\n div.style.overflowX = 'scroll';\n div.style.overflowY = 'hidden';\n div.appendChild(tex`${equation}`);\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1473,"value":"function ShowDivs(elems) {\n const div = document.createElement('div');\n elems.forEach((elem) => div.appendChild(elem));\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"function Title(title, elem) {\n const div = document.createElement('div');\n const titleElem = document.createElement('div');\n titleElem.style.marginTop = '5px';\n titleElem.style.fontSize = '0.9em';\n titleElem.style.fontStyle = 'italic';\n titleElem.appendChild(document.createTextNode(title));\n div.appendChild(titleElem);\n div.appendChild(elem);\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"function sum(start, end, fn) {\n let total = 0;\n for (let i = start; i <= end; i++) {\n total += fn(i);\n }\n return total;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"