29:null 2a:["$","title",null,{"children":"Sounds | Dylan Freedman | Observable"}] 2f:T4b6,md`# Sounds

*Interactive sound wave primer.*

In the first part of this primer, we cover classic oscillator functions — or repeating sonic patterns — including sine waves, sawtooth waves, square waves, and triangle waves. We also discuss the basics of pitch and musical chords. All the code in this notebook is editable. You can modify any of it to explore how it works. For more experimental sounds, check out [part two](https://beta.observablehq.com/@freedmand/sounds-2).

Sounds are just undulations in the air. Instruments make musical pitches by vibrating air particles in repeating patterns. To make noise on the computer, your speakers pulse at rapid rates. *Periodic* (repeating at regular intervals) patterns within these fast-paced fluctuations sound as pitches to the human listener. For programmers, this notebook provides a method, \`Play\`, which produces an inline sound player and visualizer from a function. It can be used in other notebooks to auralize and visualize sound functions. See the *Usage* section at the end for more information.`30: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; }31:T4a2,md`# Usage *This section is for using the graphical sound function interface in other notebooks. If you don't plan to create your own notebooks, you don't need to read this.* The sound player was created for the purposes of this notebook. You can freely reuse it in other notebooks by requiring the appropriate method from \`@freedmand/sounds\`. The primary methods this notebooks exports are * \`Play(genFn, duration = 1)\` * \`Play8Bit(genFn, duration = 1)\` In these functions, \`genFn\` is a function that takes a single argument which stores the time. In \`Play\`, this argument is time in seconds. In \`Play8Bit\` this argument is an integer time step (see [part two](https://beta.observablehq.com/@freedmand/sounds-2) for examples of \`Play8Bit\`). \`genFn\` should return an amplitude for each time step. \`duration\` specifies the length in seconds to play the sound function. Though it is conventional to return amplitudes in the range -1 to 1, the play functions normalize the result so this is not strictly necessary. # Credits The sound player was heavily inspired by Mathematica's \`Play\` function. This notebook uses slider controls from \`@jashkenas/inputs\`. `32: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; } }33:[] 2d:{"id":"c6b40d1143a0b536","slug":"sounds","title":"Sounds","thumbnail":"50f5f7bd71916d1164ed5fcf5329335489fca05f9f8cc8847589cd140a94384d","access_level":"public","create_time":"$D2018-02-04T03:03:15.267Z","update_time":"$D2018-02-09T17:44:42.696Z","view_time":null,"first_public_time":"$D2018-02-04T17:01:41.240Z","has_unpublished_edits":null,"fork":false,"stars":131,"starred":false,"owner":{"type":"team","id":"38ab6d7c2dc7f1de","login":"freedmand","name":"Dylan Freedman","avatar_url":"https://avatars-next.observableusercontent.com/d56e4f48a1c7d706179444fea717006647786e759cefe364af89e5f63f473b8a","tier":"starter_2024"},"version":1649,"publish_version":1649,"role":null,"authored":false,"authors":[{"type":"individual","id":"571a5f35aafb86e1","login":"freedmand","name":"Dylan Freedman","avatar_url":"https://avatars-next.observableusercontent.com/d56e4f48a1c7d706179444fea717006647786e759cefe364af89e5f63f473b8a","tier":null}],"members":[{"type":"individual","id":"571a5f35aafb86e1","login":"freedmand","name":"Dylan Freedman","avatar_url":"https://avatars-next.observableusercontent.com/d56e4f48a1c7d706179444fea717006647786e759cefe364af89e5f63f473b8a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":75,"collection":{"id":"d95b9cf0cb89864c","slug":"showcase","title":"Showcase","owner":{"id":"38ab6d7c2dc7f1de","login":"freedmand","name":"Dylan Freedman"}},"type":"notebook","body":{"titling":"auto","title":"Sounds","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"md`# The sine wave\nThe 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":430,"value":"Draw((t) => Math.sin(t * 50))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"md`As a function of time in seconds, we can express the amplitude of a sine wave at a certain frequency in Hertz (cycles per second) as follows:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"tex`f(t)=\\sin(\\textit{freq} \\cdot t \\cdot 2 \\pi)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"md`The amplitude can be thought of as similar to volume. It ranges in our examples from -1 to 1. If we think about an audio speaker, it pushes out and in according to the amplitude. The rapid movements perturbate the air in periodic patterns that we perceive as pitches.\n\nListen to the sine wave using the audio player below. The sine wave is characterized by a very pure and soft tone:\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: 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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1620,"value":"md`The human ear can pick up frequencies from about 20 Hz to 20,000 Hz, though this varies widely by age. See what your limits are by dragging the slider above.\n\nHere's three sine waves at 300 Hz, 400 Hz, and 500 Hz, respectively:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"md`Notice that this combination of sounds is particularly pleasant. In music, this is called a *major triad*. It is characterized by pitches with the frequency ratios \\`3/4\\`, \\`4/5\\`, and \\`3/5\\`. We'll play with pitches more in the following sections.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"md`# Sawtooth waves\n\nThe sawtooth wave fluctuates in jagged points that look like the blade of a saw.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"md`The sound is very loud and intense:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"md`The sawtooth wave can be expressed mathematically as:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"tex`f(t) = 2 \\cdot \\textit{freq} \\cdot t - \\lfloor 2 \\cdot \\textit{freq} \\cdot t \\rfloor`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"html`${md`where `.innerHTML}${tex`\\lfloor x \\rfloor`.outerHTML}${md` is the mathematical *floor* operator.`.innerHTML}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"md`The sawtooth wave can also be represented as the infinite sum of sine waves:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"tex`f(t) = -\\frac{2}{\\pi} \\Sigma_{i=1}^\\infty (-1)^i \\frac{\\sin(i \\cdot \\textit{freq} \\cdot t \\cdot 2 \\pi)}{i}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"md`How does this work?\n\nA *harmonic*, or *harmonic partial*, is a frequency at an integer multiple of the fundamental frequency of a pitch. The 1st harmonic is the pitch's frequency times 1. The 2nd harmonic is the frequency times 2. And so on.\n\nThe sawtooth wave is created by adding sine waves at each successive integer multiple of the fundamental frequency. The amplitude of each sine wave is inversely proportional to the partial number. Every other harmonic is subtracted rather than added.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"GenerateTex('f(t) = -\\\\frac{2}{\\\\pi}(', (i) => {\n const sign = i % 2 == 1 ? '+' : '-';\n return ` ${sign} \\\\frac{\\\\sin(${i + 1} \\\\cdot \\\\textit{freq} \\\\cdot t \\\\cdot 2 \\\\pi)}{${i + 1}}`;\n}, sawtoothHarmonics, ')')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"md`Let's hear how the sawtooth wave sounds as it is being formed from sine waves (drag the slider above to generate the waveform with more harmonics):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"md`So why is the sawtooth wave seem so much louder than a sine wave at the equivalent frequency? The simple answer is that sawtooth waves contain every harmonic — the human listener perceives the high frequencies from all the sine waves, making the sound richer and fuller.\n\nPitch is a strange concept that has no concrete physical basis. It is tempting to think of the pitch as the most prominent frequency that occurs within a sound wave, but it is possible that the perceived frequency is not even present in the sound wave:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"md`Notice how both these waveforms sound like they are playing the same pitch. The latter waveform does not actually include a sine wave at the frequency that is being perceived within the waveform. Because your ears hear so many harmonics that strongly suggest that pitch is being played, you will actually perceive a frequency that is not physically present.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"md`# Square wave\n\nThe square wave is what a sine wave looks like if you round each value to 1 or -1.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"md`The sound is full-featured but less jarring than the sawtooth wave:` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"md`Like the sawtooth wave, the square wave can be expressed as an infinite sum of sine waves. Unlike the sawtooth wave, the square wave only includes odd harmonics and is purely additive. Sine waves are never subtracted in the infinite sum:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"tex`f(t) = \\Sigma_{i=1}^\\infty \\frac{\\sin((2i - 1) \\cdot \\textit{freq} \\cdot t \\cdot 2\\pi)}{2i-1}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"GenerateTex('f(t) = ', (i) => {\n const sign = i != 0 ? '+' : '';\n return ` ${sign} \\\\frac{\\\\sin(${2 * i + 1} \\\\cdot \\\\textit{freq} \\\\cdot t \\\\cdot 2 \\\\pi)}{${2 * i + 1}}`;\n}, squareHarmonics, '')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"Draw((t) => sum(1, squareHarmonics, (i) => (Math.sin((2 * i - 1) * 70 * t) / (2 * i - 1))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"md`Pitch is perceived on an exponential scale. Multiplying the frequency of a wave by 2 is referred to as going up an *octave*. Dividing the frequency of a wave by 2 moves the pitch down an octave.\n\nHere are two square waves, with the latter an octave higher than the first (220 Hz and 440 Hz, respectively). Notice how the note sounds similar, but the octave makes the second pitch much higher. You may also perceive this second pitch as louder even though it has the same amplitude.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"md`In western music, there are 12 notes, or *semitones*, per octave. The piano keyboard shows this well. From the first 'D' to the second 'D', there are 12 notes including black keys and excluding the last note.\n\n*Feel free to click notes to hear how they sound:*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"md`A note in western music can be described as the number of semitones away from a reference pitch. Many musicians define the note 'A' to have the frequency 440 Hz.\n\nUsing 440 Hz as the reference, a note can be described as a function of the number of semitones *s* away from A 440 Hz:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"tex`f(s) = 440 \\cdot 2^\\frac{s}{12}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"md`This pitch system, which equally subdivides an octave in exponential space, is known as *equal temperament*. The perfect major triad described above which featured frequency ratios of \\`3/4\\`, \\`4/5\\`, and \\`3/5\\`, known as *Just intonation*, is unattainable in this space.\n\nHere's a comparison of a major triad in just intonation versus equal temperament:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"md`The sound of the just intonation major triad is more compact and forms a perfectly repeating pattern. The equal temperament major triad is more complex since it never exactly repeats (this is because some of the frequencies are non-divisible irrational numbers).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":825,"value":"md`# Triangle wave\n\nThe triangle wave is a periodic waveform with only diagonal lines.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"Draw((t) => Math.abs(t * 20 % 2 - 1) - 0.25 * 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"md`The sound is most similar to a sine wave but has a slightly more pronounced tone:` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"md`Like any other waveform, the triangle wave can be expressed as an infinite sum of sine waves. The triangle wave includes only odd harmonics with amplitude inversely proportional to the square of the harmonic number. Every other harmonic is subtracted rather than added:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"tex`f(t) = -\\Sigma_{i=1}^\\infty (-1)^i \\frac{\\sin((2i - 1) \\cdot \\textit{freq} \\cdot t \\cdot 2\\pi)}{(2i-1)^2}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"Draw((t) => sum(1, triangleHarmonics, (i) => -1 * Math.pow(-1, i) * (Math.sin((2 * i - 1) * 70 * t) / Math.pow(2 * i - 1, 2))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"md`Because of the inverse square relationship, the amplitude of higher partials quickly diminishes. This gives the perception of a soft sound with a more distinctive edge than a plain sine wave.\n\nTriads and equal temperament are the musical building blocks for western harmony and modern classical music. Using waveforms and a basic grasp of major triads, we can already create works of music expressed entirely as sound functions.\n\nHere's the popular nursery rhyme *Frère Jacques* played with triangle waves:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"md`# Other explorations\n\nSee [part two](https://beta.observablehq.com/@freedmand/sounds-2) for explorations about white noise, low-frequency oscillators, 8-bit music, and more experimental sound functions.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1486,"value":"$31","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":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":"$32","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":"$W33","stdlib":"1"}} 2e:"$2d:body"