29:null 2a:["$","title",null,{"children":"The sine wave | Matthew Billson | Observable"}] 2f:Tfb4,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 = 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; } }30:[] 2d:{"id":"91a89ae51cf1e4ca","slug":"music","title":"The sine wave","thumbnail":"42ca20919b439f08f3c43c5abf76266a39bdb3716072ea055e63c4f1d4534a65","access_level":"public","create_time":"$D2018-02-24T17:28:31.448Z","update_time":"$D2023-09-23T16:23:09.333Z","view_time":null,"first_public_time":"$D2018-03-07T21:36:59.050Z","has_unpublished_edits":null,"fork":{"id":"c6b40d1143a0b536","slug":"sounds","title":"Sounds","owner":{"id":"38ab6d7c2dc7f1de","login":"freedmand","name":"Dylan Freedman"}},"stars":8,"starred":false,"owner":{"type":"team","id":"5c4e44301f49454b","login":"yclicc","name":"Matthew Billson","avatar_url":"https://avatars-next.observableusercontent.com/486fb5c88a0c7aee210506598b29e8ebeeba4594ba3924310970434950c73192","tier":"starter_2024"},"version":2170,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dca9e5250d8d4215","login":"yclicc","name":"Matthew Billson","avatar_url":"https://avatars-next.observableusercontent.com/486fb5c88a0c7aee210506598b29e8ebeeba4594ba3924310970434950c73192","tier":null}],"members":[{"type":"individual","id":"dca9e5250d8d4215","login":"yclicc","name":"Matthew Billson","avatar_url":"https://avatars-next.observableusercontent.com/486fb5c88a0c7aee210506598b29e8ebeeba4594ba3924310970434950c73192","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"The sine wave","cells":[{"id":2165,"value":"md`# The sine wave`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2151,"value":"md`This is all shamelessly plagiarised from https://beta.observablehq.com/@freedmand/sounds but with changes to illustrate a talk I was giving at manchester iCafe http://icafe.org.uk/.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"md`The most basic building block of musical pitch is the sine wave, which fluctuates back and forth in smooth curves.:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2131,"value":"md`![Gif](https://upload.wikimedia.org/wikipedia/commons/a/a5/ComplexSinInATimeAxe.gif)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2160,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"Title(\"Here is a sine wave drawn in blue:\", Draw(sineWaveBlue))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1770,"value":"viewof phaseShift = slider({\n min: 0, \n max: 100, \n step: 1, \n value: 0, \n title: 'Sine wave phase shift in percent', \n description: 'Drag to change the phase shift.'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1776,"value":"viewof freqScale = slider({\n min: 1, \n max: 5, \n step: 0.01, \n value: 1, \n title: 'Sine wave frequency scale in percent', \n description: 'Drag to change the frequency scale.'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1713,"value":"Title(\"Here is another sine wave drawn in red but you can adjust the frequency and phase using the above controls.\", Draw(sineWaveRed, 80, \"red\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1785,"value":"md`This green wave is the sum of the previous two waves. Leave the frequency scale at 1 and notice that even if you change the phase shift you still get another sine wave. Change the frequency scale though and...oh dear.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1739,"value":"Draw((t) => sineWaveGreen(t), 160, \"green\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"md`Now listen to these sound waves using the players below. Use the slider to select the base frequency (or leave it at 440 for now).\n\n*(If no sound is produced on mobile, you may need to switch your phone out of silent mode)*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1028,"value":"viewof sineFrequency = slider({\n min: 40, \n max: 1600, \n step: 20, \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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"Title(\"The blue wave\", Play(toSound(sineWaveBlue)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1858,"value":"Title(\"The red wave\", Play(toSound(sineWaveRed)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1867,"value":"Title(\"The green wave\", Play(toSound(sineWaveGreen)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1870,"value":"md`Now we will look at ratios of waves. Use this slider to choose the frequency multiplication. Some common ratios are \n* Octave 2/1 \n* Perfect fifth 3/2 \n* Perfect fourth 4/3\n* Major third 5/4\n* Minor third 6/5\n* Major second 9/8 or 10/9\n* Minor second 16/15`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1655,"value":"viewof enn = slider({\n min: 2,\n max: 30,\n step: 1,\n value: 1,\n title: 'N where we will multiply by N/(N-1)',\n description: 'Drag to choose the ratio we will play.'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1700,"value":"tex`\\huge{${enn}:${enn-1}}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1659,"value":"ShowDivs([\n Play((t) => Math.sin(440 * t * 2 * Math.PI)),\n Play((t) => Math.sin(440 * (enn / (enn-1)) * t * 2 * Math.PI)),\n Play((t) => Math.sin(440 * t * 2 * Math.PI) + Math.sin(440 * (enn / (enn-1)) * t * 2 * Math.PI))\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2130,"value":"md``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1809,"value":"sineWaveBlue = ((t) => t===0 ? 1 : Math.sin(t * 50))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1816,"value":"sineWaveRed = (t) => t===0 ? 1 : Math.sin(t * 50 * freqScale + phaseShift/100 * 2 * Math.PI)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1827,"value":"sineWaveGreen = (t) => sineWaveBlue(t) + sineWaveRed(t)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1835,"value":"toSound = (f) => ((t) => f(t * 2 * Math.PI * sineFrequency / 50))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1"}} 2e:"$2d:body"