3f:null 40:["$","title",null,{"children":"Repeatable Sounds | Erdal Yildiz | Observable"}] 46:T7cd,{ const width = 420; const keyHeight = 100; const height = 120; const whiteKeys = 15; const blackKeys = [1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1]; const whiteOffsets = blackKeys.reduce((x, y) => x.concat([y + x[x.length - 1] + 1]), [0]); const svg = html``; function wrap(elem, note) { const freq = 440 * Math.pow(2, note / 12); // Play a note when clicked. const oscillator = ctx.createOscillator(); const gain = ctx.createGain(); gain.gain.value = 0; oscillator.type = 'square'; oscillator.frequency.setValueAtTime(freq, ctx.currentTime); oscillator.connect(gain); gain.connect(ctx.destination); oscillator.start(); elem.style.cursor = 'pointer'; elem.onclick = () => { gain.gain.cancelScheduledValues(ctx.currentTime); gain.gain.linearRampToValueAtTime(0.1, ctx.currentTime + 0.05); gain.gain.linearRampToValueAtTime(0, ctx.currentTime + 0.3); }; return elem; } // Draw the white keys. for (let i = 0; i <= whiteKeys - 1; i++) { svg.appendChild(wrap(html``, whiteOffsets[i] - 19)); svg.appendChild(html``); } // Draw the black keys. for (let i = 0; i <= whiteKeys - 2; i++) { if (blackKeys[i] == 1) { svg.appendChild(wrap(html``, whiteOffsets[i] - 19 + blackKeys[i])); } } return svg; }47:Te4a,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, width = width, color = 'blue') { const drawingCtx = DOM.context2d(width, height); // Draw the middle line. drawingCtx.strokeStyle = 'gainsboro'; drawingCtx.beginPath(); drawingCtx.moveTo(0, height / 2); drawingCtx.lineTo(width, height / 2); drawingCtx.stroke(); // Draw the waveform. drawingCtx.strokeStyle = 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 = genUI(this.duration); const cursor = ui.querySelector('.cursor'); let interval = null; let repeat_interval = null; let counter = 0; const resetInterval = () => { if (interval != null) { clearInterval(interval); interval = null; } }; const resetRepeatInterval = () => { if (repeat_interval != null) { clearInterval(repeat_interval); repeat_interval = null; } }; const soundPlayer = ui.querySelector('.sound-player'); const playOnce = () => { console.log('playOnce repeat counter:' + counter); counter += 1; 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('.sound-pane').appendChild(this.draw(46, width - 20)); ui.querySelector('.repeat-button').onclick = () => { //start repeating after duration repeat_interval = setInterval(playOnce, 1000 * this.duration); //play first, instead of waiting for the first repeat_interterval playOnce(); }; ui.querySelector('.play-button').onclick = () => { playOnce(); }; ui.querySelector('.stop-button').onclick = () => { resetRepeatInterval(); resetInterval(); this.stop(); cursor.style.display = 'none'; }; return ui; } }48:T493,genUI = duration => html`

▶ ◼ ↻ ${duration} s

`49:[] 44:{"id":"36a43ebdbd39cf05","slug":"repeatable-sounds","title":"Repeatable Sounds","thumbnail":"ea4bb8a3e7b5cdda39c334b1a8da892aade97108579bc1ae86e6bfeec7201eff","access_level":"public","create_time":"$D2020-08-31T20:16:03.791Z","update_time":"$D2021-03-04T20:40:28.234Z","view_time":null,"first_public_time":"$D2020-09-01T08:54:02.509Z","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":"bc9d499f43377845","login":"e7dal","name":"Erdal Yildiz","avatar_url":"https://avatars-next.observableusercontent.com/670c9fd8a6479e76dc2cfc136e0bb53f964c9f8a4f426830000dd0ec9de6bde5","tier":"starter_2024","bio":"","following":false},"version":1738,"publish_version":1738,"role":null,"authored":false,"authors":[{"type":"individual","id":"cb34c9480fb07813","login":"e7dal","name":"Erdal Yildiz","avatar_url":"https://avatars-next.observableusercontent.com/670c9fd8a6479e76dc2cfc136e0bb53f964c9f8a4f426830000dd0ec9de6bde5","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"cb34c9480fb07813","login":"e7dal","name":"Erdal Yildiz","avatar_url":"https://avatars-next.observableusercontent.com/670c9fd8a6479e76dc2cfc136e0bb53f964c9f8a4f426830000dd0ec9de6bde5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Repeatable Sounds","cells":[{"id":0,"value":"md`# Repeatable Sounds\n \nthis is a modified version of the excellent https://observablehq.com/@freedmand/sounds\n\n\nmain difference is in the SoundBuffer class, i just added a new button ↻ which will repeat the sound\n\nall the comments and explanations have been removed to make is shorter...\n\nFor more experimental and repeatable sounds, check out [part two](https://observablehq.com/@e7dal/repeatable-sounds-part-two)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1028,"value":"viewof sineFrequency = slider({\n min: 40, \n max: 22000, \n step: 1, \n value: 440, \n title: 'Sine wave frequency (Hz)', \n description: 'Drag to change the frequency. Listen to the sound with the player below.'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"Play((t) => Math.sin(sineFrequency * t * 2 * Math.PI)) // Play a sine wave at `sineFrequency` Hz.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"ShowDivs([300, 400, 500].map((freq) => Play((t) => Math.sin(freq * t * 2 * Math.PI))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"md`And here's one waveform containing all these sine waves together:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"Draw((t) => t * 15 % 2 - 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1021,"value":"viewof sawtoothFrequency = slider({\n min: 40, \n max: 2000, \n step: 1, \n value: 330, \n title: 'Sawtooth wave frequency (Hz)', \n description: 'Drag to change the frequency. Listen to the sound with the player below.'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"Play((t) => (2 * sawtoothFrequency * t) % 2 - 1) // Play a sawtooth wave at `sawtoothFrequency` Hz.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"viewof sawtoothHarmonics = slider({\n min: 1, \n max: 30, \n step: 1, \n value: 0, \n title: 'Number of harmonics', \n description: 'Sine waves are added to create a sawtooth wave'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"Draw((t) => (-2 / Math.PI) * sum(1, sawtoothHarmonics, (i) => Math.pow(-1, i) * (Math.sin(i * 70 * t) / i)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"Title(`Sawtooth formed from ${sawtoothHarmonics} sine wave${sawtoothHarmonics != 1 ? 's' : ''}`, Play((t) => (-2 / Math.PI) * sum(1, sawtoothHarmonics, (i) => Math.pow(-1, i) * (Math.sin(i * 330 * 2 * Math.PI * t) / i))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"Title(`Sawtooth formed from 30 sine waves (harmonics 1-30)`, Play((t) => (-2 / Math.PI) * sum(1, 30, (i) => Math.pow(-1, i) * (Math.sin(i * 330 * 2 * Math.PI * t) / i))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"Title(`Sawtooth formed from 29 sine waves without base frequency (harmonics 2-30)`, Play((t) => (-2 / Math.PI) * sum(2, 30, (i) => Math.pow(-1, i) * (Math.sin(i * 330 * 2 * Math.PI * t) / i))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"Draw((t) => (t * 20) % 2 - 1 > 0 ? 1 : -1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"viewof squareFrequency = slider({\n min: 40, \n max: 2000, \n step: 1, \n value: 100, \n title: 'Square wave frequency (Hz)', \n description: 'Drag to change the frequency. Listen to the sound with the player below.'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"Play((t) => (squareFrequency * t * 2) % 2 - 1 > 0 ? 1 : -1) // Play a square wave at `squareFrequency` Hz.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"viewof squareHarmonics = slider({\n min: 1, \n max: 30, \n step: 1, \n value: 1, \n title: 'Number of odd harmonics', \n description: 'Sine waves are added to create a square wave'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"Title(`Square formed from ${squareHarmonics} sine wave${squareHarmonics != 1 ? 's' : ''}`, Play((t) => sum(1, squareHarmonics, (i) => (Math.sin((2 * i - 1) * 330 * 2 * Math.PI * t) / (2 * i - 1)))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"Play((t) => t < 1 ? ((220 * t * 2) % 2 - 1 > 0 ? 1 : -1) : ((440 * t * 2) % 2 - 1 > 0 ? 1 : -1), 2) // Play a square wave at 220 Hz and a square wave at 440 Hz.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":817,"value":"Title('Just intonation', Play((t) => (Math.sin(300 * t * 2 * Math.PI) > 0 ? 1 : -1) + (Math.sin(400 * t * 2 * Math.PI) > 0 ? 1 : -1) + (Math.sin(500 * t * 2 * Math.PI) > 0 ? 1 : -1)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"Title('Equal temperament', Play((t) => (Math.sin(300 * t * 2 * Math.PI) > 0 ? 1 : -1) + (Math.sin(300 * Math.pow(2, 5/12) * t * 2 * Math.PI) > 0 ? 1 : -1) + (Math.sin(300 * Math.pow(2, 9/12) * t * 2 * Math.PI) > 0 ? 1 : -1)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1017,"value":"viewof triangleFrequency = slider({\n min: 40, \n max: 2000, \n step: 1, \n value: 600, \n title: 'Triangle wave frequency (Hz)', \n description: 'Drag to change the frequency. Listen to the sound with the player below.'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"Play((t) => Math.abs((2 * triangleFrequency * t) % 2 - 1) - 0.25 * 2) // Play a triangle wave at `triangleFrequency` Hz.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":859,"value":"viewof triangleHarmonics = slider({\n min: 1, \n max: 30, \n step: 1, \n value: 1, \n title: 'Number of odd harmonics', \n description: 'Sine waves are added to create a triangle wave'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":867,"value":"Title(`Triangle formed from ${triangleHarmonics} sine wave${triangleHarmonics != 1 ? 's' : ''}`, Play((t) => sum(1, triangleHarmonics, (i) => -1 * Math.pow(-1, i) * (Math.sin((2 * i - 1) * 330 * 2 * Math.PI * t) / Math.pow(2 * i - 1, 2)))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":877,"value":"{\n const notes = [[0, 2, 4, 0], [4, 5, 7], [7, 9, 7, 5, 4, 0], [0, -5, 0]];\n const durations = [[0.5, 0.5, 0.5, 0.5], [0.5, 0.5, 1], [0.25, 0.25, 0.25, 0.25, 0.5, 0.5], [0.5, 0.5, 1]];\n const [baseFreq, releaseTime] = [300, 0.01];\n const frereJacques = (t) => {\n let time = 0;\n for (let bar = 0; bar < notes.length; bar++) {\n for (let repeat = 0; repeat < 2; repeat++) {\n for (let i = 0; i < notes[bar].length; i++) {\n const endTime = time + durations[bar][i];\n if (t >= time && t < endTime - releaseTime) {\n const freq = baseFreq * Math.pow(2, notes[bar][i] / 12);\n return Math.abs(t * freq % 1 - 0.5) - 0.25;\n } else if (t >= endTime - releaseTime && t < endTime) return 0;\n time = endTime;\n }\n }\n }\n };\n const playRound = (t) => {\n let sum = 0;\n while (t >= 0) {\n sum += frereJacques(t);\n t -= 4;\n }\n return sum;\n };\n return Play(playRound, 16);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"ctx = new (window.AudioContext || window.webkitAudioContext)()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"function Draw(genFn, height = 80, color = 'blue') {\n const drawingCtx = DOM.context2d(width, height);\n // Draw a middle line.\n drawingCtx.strokeStyle = 'gainsboro';\n drawingCtx.beginPath();\n drawingCtx.moveTo(0, height / 2);\n drawingCtx.lineTo(width, height / 2);\n drawingCtx.stroke();\n // Draw the waveform.\n drawingCtx.strokeStyle = color;\n drawingCtx.beginPath();\n const values = [];\n let max = 0;\n for (let i = 0; i < width; i++) {\n const value = genFn(i / width);\n if (Math.abs(value) > max) max = Math.abs(value);\n values.push(value);\n }\n for (let i = 0; i < width; i++) {\n const value = values[i] / max;\n const y = height - Math.floor((value / 2 + 0.5) * height * 0.9 + height * 0.05);\n if (i == 0) {\n drawingCtx.moveTo(i, y);\n } else {\n drawingCtx.lineTo(i, y);\n }\n }\n drawingCtx.stroke();\n return drawingCtx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1268,"value":"function Play8Bit(genFn, duration = 1) {\n const fn = (t) => {\n const step = Math.floor(t * ctx.sampleRate);\n let value = genFn(step) | 0;\n // Constrain to 8-bits.\n value = value % 256;\n if (value < 0) value += 256;\n // Convert result to real between -1 and 1.\n value = ((value / 256) - 0.5) * 2;\n return value;\n }\n return Play(fn, duration);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1714,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 45:"$44:body"