├── 01 Introducing the Web Audio API
    ├── .vscode
    │   └── launch.json
    ├── HelloWorld
    │   ├── HelloWorld.html
    │   ├── HelloWorld2.html
    │   └── HelloWorld3.html
    ├── README.md
    ├── UserInteraction
    │   ├── UserInteraction.html
    │   └── UserInteraction.js
    └── index.html
├── 02 Oscillators
    ├── Detuning
    │   ├── detune.html
    │   └── detune.js
    ├── OscillatorNode
    │   ├── Oscillator.html
    │   └── Oscillator.js
    ├── PeriodicWave
    │   ├── CustomSquareWave.html
    │   └── PulseWave.html
    ├── README.md
    └── index.html
├── 03 Audio Buffer Sources
    ├── Backwards.html
    ├── BufferedNoise.html
    ├── BufferedSquareWave.html
    ├── Pause.html
    ├── Playback
    │   ├── Playback.html
    │   └── Playback.js
    ├── README.md
    └── index.html
├── 04 Constant Sources
    ├── ConstantSourceSquareWave
    │   ├── ConstantSourceSquareWave.html
    │   └── NoConstantSourceSquareWave.html
    ├── DCoffset.html
    ├── Grouping tracks
    │   ├── 01_Congas.wav
    │   ├── 02_Bass.wav
    │   ├── 03_UkeleleMic.wav
    │   ├── 04_UkeleleDI.wav
    │   ├── 05_Viola.wav
    │   ├── 06_Cello.wav
    │   ├── 07_LeadVox.wav
    │   ├── 08_BackingVox.wav
    │   ├── Grouping.html
    │   ├── Grouping.js
    │   └── Readme.txt
    ├── README.md
    └── index.html
├── 05 Parameter automation
    ├── Beep
    │   ├── Beep.js
    │   └── beep.html
    ├── Bells
    │   ├── Bells.html
    │   └── Bells.js
    ├── Crossfade
    │   ├── Crossfade.html
    │   └── Crossfade.js
    ├── README.md
    ├── RepeatBeep
    │   └── RepeatBeep.html
    ├── SetValueCurve.html
    └── index.html
├── 06 Connecting audio parameters and modulation
    ├── AM Synthesis
    │   ├── AMSynthesis.html
    │   └── AMSynthesis.js
    ├── FM Synthesis
    │   ├── FMSynthesis.html
    │   └── FMSynthesis.js
    ├── README.md
    └── index.html
├── 07 Analysis and visualization
    ├── Analyser.html
    ├── Analyser.js
    ├── README.md
    └── index.html
├── 08 Loading and recording
    ├── LevelMeter.html
    ├── MediaElement
    │   ├── MediaElement.html
    │   ├── MediaElement2.html
    │   ├── SimpleMediaElement.html
    │   └── beat1.mp3
    ├── MediaStreamToAudioBuffer.html
    ├── README.md
    ├── Record an Audio Node
    │   ├── MediaRecorderExample.html
    │   ├── RecorderExample.html
    │   └── recorder.js
    ├── decodeAudioData
    │   ├── beat1.mp3
    │   ├── decodeWithFetch.html
    │   ├── decodeWithRequest.html
    │   └── playbackMultipleInSequence.html
    └── index.html
├── 09 OfflineAudioContext
    ├── OfflineContext.html
    ├── OfflineContext2.html
    ├── OfflineContext3.html
    ├── README.md
    ├── bufferToWave.js
    └── index.html
├── 10 Delay
    ├── KarplusStrong
    │   ├── KarplusStrong.html
    │   └── KarplusStrong.js
    ├── README.md
    ├── Vibrato
    │   ├── trumpet.wav
    │   ├── vibrato.html
    │   └── vibrato.js
    ├── combFilter.html
    ├── doppler.html
    ├── feedbackDelay.html
    └── index.html
├── 11 Filters
    ├── BiquadFilterNode
    │   ├── biquad.html
    │   └── biquad.js
    ├── IIRFilterNode
    │   ├── IIRFilter.html
    │   ├── audio.js
    │   ├── flange love.mp3
    │   └── graphics.js
    ├── Instability
    │   ├── BiquadInstability.html
    │   ├── IIRInstability.html
    │   └── flange love.mp3
    ├── README.md
    └── index.html
├── 12 Waveshaper
    ├── BitCrusher.html
    ├── Clipper.html
    ├── README.md
    └── index.html
├── 13 Dynamic Range Compression
    ├── Attack and release
    │   ├── AttackRelease.html
    │   └── AttackRelease.js
    ├── Compressor
    │   ├── compressor.html
    │   └── compressor.js
    ├── README.md
    └── index.html
├── 14 Reverb
    ├── ConvolutionReverb.html
    ├── NormalizeIR
    │   ├── NormalizeIR.html
    │   ├── applause.mp3
    │   ├── unit_long.wav
    │   └── unit_short.wav
    ├── README.md
    └── index.html
├── 15 Mixing audio
    ├── ChannelFlip.html
    ├── PingPongDelay.html
    ├── README.md
    └── index.html
├── 16 Stereo panning
    ├── README.md
    ├── Stereo Enhancer
    │   ├── Stereo speech.wav
    │   ├── stereoEnhancer.html
    │   └── symphonic_warmup.wav
    ├── index.html
    └── stereoPanning.html
├── 17 Spatial audio
    ├── README.md
    ├── index.html
    ├── listener
    │   ├── listener.html
    │   └── listener.js
    ├── notes.TXT
    └── pannerNode
    │   ├── drone.wav
    │   ├── panner.html
    │   └── panner.js
├── 18 Working with AudioWorklets
    ├── 1Noise worklet
    │   ├── basicNoise.html
    │   └── basicNoise.js
    ├── 2async await format
    │   ├── asyncNoise.html
    │   └── basicnoise.js
    ├── 3Multiple Inputs
    │   ├── multipleInputs.html
    │   └── multipleInputs.js
    ├── 4PanX
    │   ├── panX.html
    │   └── panX.js
    ├── 5Gain worklet
    │   ├── gain.html
    │   └── worklets.js
    ├── 6Smoothing Filter worklet
    │   ├── noiseWorklet.js
    │   ├── smoothing.html
    │   └── smoothingWorklet.js
    ├── 7First order filter options
    │   ├── filterOptions.html
    │   ├── filterOptionsWorklet.js
    │   └── noiseWorklet.js
    ├── 8First order filter messaging
    │   ├── filterMessaging.html
    │   ├── filterMessagingWorklet.js
    │   └── noiseWorklet.js
    ├── README.md
    └── index.html
├── 19 Wonders of audio worklets
    ├── Bit crusher worklet
    │   ├── bitCrush.html
    │   └── bitCrushWorklet.js
    ├── CircularBufferWorklets.js
    ├── CompressorWorklet
    │   ├── compressor.html
    │   ├── compressor.js
    │   └── compressorWorklet.js
    ├── KarplusStrong
    │   ├── KSWorklets.js
    │   ├── KarplusStrongV2.html
    │   └── KarplusStrongV2.js
    ├── PulseWave
    │   ├── Pulse.html
    │   └── PulseWorklet.js
    ├── README.md
    ├── StereoWidenerWorklet
    │   ├── Stereo speech.wav
    │   ├── stereoWidenerNode.html
    │   └── stereoWidenerWorklet.js
    └── index.html
├── README.md
└── index.html


/01 Introducing the Web Audio API/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     // Use IntelliSense to learn about possible attributes.
 3 |     // Hover to view descriptions of existing attributes.
 4 |     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 5 |     "version": "0.2.0",
 6 |     "configurations": [
 7 |         {
 8 |             "type": "pwa-chrome",
 9 |             "request": "launch",
10 |             "name": "Launch Chrome against localhost",
11 |             "url": "http://localhost:8080",
12 |             "webRoot": "${workspaceFolder}"
13 |         }
14 |     ]
15 | }


--------------------------------------------------------------------------------
/01 Introducing the Web Audio API/HelloWorld/HelloWorld.html:
--------------------------------------------------------------------------------
1 | <button onclick='context.resume()'>Start</button>
2 | <script>
3 |   context= new AudioContext()
4 |   Tone= context.createOscillator()
5 |   Tone.start()
6 |   Tone.connect(context.destination)
7 | </script>
8 | 


--------------------------------------------------------------------------------
/01 Introducing the Web Audio API/HelloWorld/HelloWorld2.html:
--------------------------------------------------------------------------------
 1 | <button onclick='context.resume()'>Start</button>
 2 | <script>
 3 |   var context= new AudioContext()
 4 |   var Tone= context.createOscillator()
 5 |   var Volume= context.createGain()
 6 |   Volume.gain.value=0.25
 7 |   Tone.start()
 8 |   Tone.connect(Volume)
 9 |   Volume.connect(context.destination)
10 | </script>


--------------------------------------------------------------------------------
/01 Introducing the Web Audio API/HelloWorld/HelloWorld3.html:
--------------------------------------------------------------------------------
1 | <button onclick='context.resume()'>Start</button>
2 | <script>
3 |   var context= new AudioContext()
4 |   var Tone= new OscillatorNode(context)
5 |   var Volume= new GainNode(context,{gain:0.25})
6 |   Tone.start()
7 |   Tone.connect(Volume).connect(context.destination)
8 | </script>
9 | 


--------------------------------------------------------------------------------
/01 Introducing the Web Audio API/README.md:
--------------------------------------------------------------------------------
1 | # Introducing the Web Audio API
2 | 
3 | 'hello world' application presented as a code example, showing perhaps the simplest use of the Web Audio API to produce and manipulate sound.
4 | 
5 | We then extend this application to show alternative approaches to its implementation, coding practices, and how sound is manipulated in an audio graph.
6 | 


--------------------------------------------------------------------------------
/01 Introducing the Web Audio API/UserInteraction/UserInteraction.html:
--------------------------------------------------------------------------------
1 | <button onclick='StartStop()'>Start/Stop</button>
2 | <p>Gain</p>
3 | <input type='range' min=0 max=1 value=0.1 step=0.01 id='VolumeSlider'>
4 | <span id='VolumeLabel'></span>
5 | <script src='UserInteraction.js'></script>
6 | 


--------------------------------------------------------------------------------
/01 Introducing the Web Audio API/UserInteraction/UserInteraction.js:
--------------------------------------------------------------------------------
 1 | var context = new AudioContext()
 2 | var Tone = context.createOscillator()
 3 | var Volume = new GainNode(context,{gain:0.1})
 4 | Tone.start()
 5 | var Connected = false
 6 | Volume.connect(context.destination)
 7 | function StartStop() {
 8 |   if (Connected == false) {
 9 |     context.resume()
10 |     Tone.connect(Volume)
11 |     Connected = true
12 |   } else {
13 |     Connected = false
14 |     Tone.disconnect(Volume)
15 |   }
16 | }
17 | VolumeSlider.oninput = function() {
18 |   VolumeLabel.innerHTML = this.value
19 |   Volume.gain.value = this.value
20 | }
21 | 


--------------------------------------------------------------------------------
/01 Introducing the Web Audio API/index.html:
--------------------------------------------------------------------------------
 1 | <h2>Introducing the Web Audio API</h2>
 2 | 
 3 | 'hello world' application presented as a code example, showing perhaps the simplest use of the Web Audio API to produce and manipulate sound.
 4 | 
 5 | We then extend this application to show alternative approaches to its implementation, coding practices, and how sound is manipulated in an audio graph. 
 6 | 
 7 | <ol>
 8 |    <li><a href="HelloWorld/HelloWorld.html">Hello World</a>: possibly the simplest example of using the Web Audio API to make a sound
 9 |    <li><a href="UserInteraction/UserInteraction.html">UserInteraction</a>: extending the Hello World with a gain control
10 | </ol>
11 | 
12 | Code examples correspond to examples from Chapter 1 in the book 'Working with the Web Audio API'.
13 | 
14 | Feel free to contact me at joshua.reiss@qmul.ac.uk
15 | 


--------------------------------------------------------------------------------
/02 Oscillators/Detuning/detune.html:
--------------------------------------------------------------------------------
 1 | <button id='startButton' onclick='context.resume()'>Start</button>
 2 | <hr>
 3 | <select id='interval'>
 4 |   <option value=0 selected>Unison</option>
 5 |   <option value=100>Minor second</option>
 6 |   <option value=200>Major second</option>
 7 |   <option value=300>Minor third</option>
 8 |   <option value=400>Major third</option>
 9 |   <option value=500>Perfect fourth</option>
10 |   <option value=600>Tritone</option>
11 |   <option value=700>Perfect fifth</option>
12 |   <option value=800>Minor sixth</option>
13 |   <option value=900>Major sixth</option>
14 |   <option value=1000>Minor seventh</option>
15 |   <option value=1100>Major seventh</option>
16 |   <option value=1200>Octave</option>
17 | </select>
18 | <br><br>
19 | Frequency (Hz)<br>
20 | <input id='freqSlider' type='range' min=20 max=2000 step='any' value=261.63>
21 | <input id='freqNumber' type='number' min=20 max=2000 step='any' value=261.63><br><br>
22 | Detune (cents)<br>
23 | <input id='detuneSlider' type='range' min=-1200 max=1200 step=1 value=0>
24 | <input id='detuneNumber' type='number' min=-1200 max=1200 step=1 value=0><br>
25 | <script src='detune.js'></script>
26 | 


--------------------------------------------------------------------------------
/02 Oscillators/Detuning/detune.js:
--------------------------------------------------------------------------------
 1 | var context = new AudioContext()
 2 | var osc = new OscillatorNode(context,{frequency:261.63})
 3 |     osc.connect(context.destination)
 4 |     osc.start(0)
 5 | freqNumber.oninput = function () {
 6 |   osc.frequency.value = freqNumber.value
 7 |   freqSlider.value = this.value
 8 | }
 9 | freqSlider.oninput = function () {
10 |   osc.frequency.value = freqNumber.value
11 |   freqNumber.value = this.value
12 | }
13 | detuneNumber.oninput = function () {
14 |   osc.detune.value = detuneNumber.value
15 |   detuneSlider.value = this.value
16 | }
17 | detuneSlider.oninput = function () {
18 |   osc.detune.value = detuneNumber.value
19 |   detuneNumber.value = this.value
20 | }
21 | interval.oninput = function () {
22 |   osc.detune.value = this.value
23 |   detuneSlider.value = this.value
24 |   detuneNumber.value = this.value
25 | }
26 | 


--------------------------------------------------------------------------------
/02 Oscillators/OscillatorNode/Oscillator.html:
--------------------------------------------------------------------------------
 1 | <button onclick='context.resume()'>Start</button>
 2 | <p>Frequency</p>
 3 | <input type='range' max=1000 value=440 id='Frequency'>
 4 | <p>Gain</p>
 5 | <input type='range' max=1 step='any' value=0.2 id='Volume'>
 6 | <p>Type</p>
 7 | <select id='Type'>
 8 |   <option value='sine'>Sine</option>
 9 |   <option value='square'>Square</option>
10 |   <option value='sawtooth'>Sawtooth</option>
11 |   <option value='triangle'>Triangle</option>
12 | </select>
13 | <script src='Oscillator.js'></script>
14 | 


--------------------------------------------------------------------------------
/02 Oscillators/OscillatorNode/Oscillator.js:
--------------------------------------------------------------------------------
 1 | //Define variables
 2 | var context = new AudioContext()
 3 | var Tone = new OscillatorNode(context)
 4 | var Amplitude = new GainNode(context,{gain: 0.2 })
 5 | 
 6 | //Set up audio graph
 7 | Tone.connect(Amplitude)
 8 | Amplitude.connect(context.destination)
 9 | Tone.start()
10 | 
11 | //User interface callbacks
12 | Frequency.oninput = function() { Tone.frequency.value = this.value }
13 | Volume.oninput = function() { Amplitude.gain.value = this.value }
14 | Type.onchange = function() { Tone.type = this.value }
15 | 


--------------------------------------------------------------------------------
/02 Oscillators/PeriodicWave/CustomSquareWave.html:
--------------------------------------------------------------------------------
 1 | <button onclick='context.resume()'>Start</button>
 2 | <p>Frequency</p>
 3 | <input type='range' min=1 max=1000 value=10 id='Frequency'>
 4 | <script>
 5 |   let context= new AudioContext()
 6 |   let source= new OscillatorNode(context,{frequency:10})
 7 |   var maxCoef= context.sampleRate/(2*source.frequency.value)
 8 |   var a = new Float32Array(context.sampleRate/2)
 9 |   var b = new Float32Array(context.sampleRate/2)
10 |   for (i=1;i<maxCoef;i+=2) b[i]= 4/(i*Math.PI)
11 |   source.setPeriodicWave(context.createPeriodicWave(a,b))
12 |   source.start()
13 |   Frequency.oninput = () => { source.frequency.value = Frequency.value }
14 |   source.connect(context.destination)
15 | </script>
16 | 


--------------------------------------------------------------------------------
/02 Oscillators/PeriodicWave/PulseWave.html:
--------------------------------------------------------------------------------
 1 | <button onclick='context.resume()'>Start</button>
 2 | <p>Frequency</p>
 3 | <input type='range' min=1 max=1000 value=10 id='Frequency'>
 4 | <p>Duty Cycle</p>
 5 | <input type='range' max=1 step='any' value=0.5 id='DutyCycle'>
 6 | <script>
 7 |   let context= new AudioContext()
 8 |   let source= new OscillatorNode(context,{frequency:10})
 9 |   var maxCoef= context.sampleRate/(2*source.frequency.value)
10 |   var a = new Float32Array(context.sampleRate/2)
11 |   var b = new Float32Array(context.sampleRate/2)
12 |   a[0]=0,b[0]=0
13 |   for (i=1;i<maxCoef;i++) a[i]= 2*Math.sin(i*Math.PI*DutyCycle.value)/(i*Math.PI)
14 |   source.setPeriodicWave(context.createPeriodicWave(a,b))
15 |   source.connect(context.destination)
16 |   source.start()
17 |   Frequency.oninput = function() { source.frequency.value = this.value }
18 |   DutyCycle.oninput = function() {
19 |     //Recalculate the coefficients, up to Nyquist, for this new Duty Cycle
20 |     maxCoef= context.sampleRate/(2*source.frequency.value)
21 |     for (i=1;i<maxCoef;i++) a[i]= 2*Math.sin(i*Math.PI*DutyCycle.value)/(i*Math.PI)
22 |     //now reset the periodic wave
23 |     source.setPeriodicWave(context.createPeriodicWave(real,imag))
24 |   }
25 | </script>
26 | 


--------------------------------------------------------------------------------
/02 Oscillators/README.md:
--------------------------------------------------------------------------------
 1 | # oscillators
 2 | 
 3 | This Chapter focuses on OscillatorNodes.
 4 | 
 5 | - OscillatorNode demonstrates use of the built-in oscillator types and varying the oscillator's frequency
 6 | - Detuning shows use of detuning the pitch and how it relates to musical notation.
 7 | - There are two examples of creating custom oscillators using the PeriodicWave.
 8 |   - creating a square wave
 9 |   - creating a pulse wave, which is like a square wave but with a duty cycle parameter which controls how much of its period it spends near its peak value.
10 | 


--------------------------------------------------------------------------------
/02 Oscillators/index.html:
--------------------------------------------------------------------------------
 1 | <h2>Oscillators</h2>
 2 | 
 3 | This Chapter focuses on OscillatorNodes.
 4 | 
 5 | <ol>
 6 |    <li><a href="OscillatorNode/Oscillator.html">OscillatorNode</a> demonstrates use of the built-in oscillator types and varying the oscillator's frequency
 7 |    <li><a href="Detuning/detune.html">Detuning</a> shows use of detuning the pitch and how it relates to musical notation.
 8 |    <li>There are two examples of creating custom oscillators using the PeriodicWave.
 9 |    </li>
10 |    <ul>
11 |       <li><a href="PeriodicWave/CustomSquareWave.html">Creating a square wave</a>: implementation of a Vibrato effect, by modulating a delay line with a low frequency oscillator
12 |       <li><a href="PeriodicWave/PulseWave.html">Creating a pulse wave</a>, which is like a square wave but with a duty cycle parameter which controls how much of its period it spends near its peak value.
13 |    </ul>
14 | </ol>
15 | 
16 | Code examples correspond to examples from Chapter 02 the book 'Working with the Web Audio API'.
17 | 
18 | Feel free to contact me at joshua.reiss@qmul.ac.uk
19 | 


--------------------------------------------------------------------------------
/03 Audio Buffer Sources/Backwards.html:
--------------------------------------------------------------------------------
 1 | <button onclick='Start()'>Start</button>
 2 | <button onclick='Reverse()'>Reverse</button>
 3 | <script>
 4 |   var context = new AudioContext()
 5 |   var Forwards = true
 6 |   var source,sourceReversed
 7 |   let bufferDuration=10
 8 |   let bufferLength = bufferDuration*context.sampleRate
 9 |   let array = new Float32Array(bufferLength)
10 |   let instantFreq
11 |   for (var i=0;i<array.length;i++) {
12 |     instantFreq=1000*i/bufferLength
13 |     array[i]=Math.sin(2*Math.PI*instantFreq*i/context.sampleRate)
14 |   }
15 |   var reversedArray = array.slice().reverse()
16 |   function Start() {
17 |     context.resume()
18 |     source = new AudioBufferSourceNode(context)
19 |     source.loop=true
20 |     source.connect(context.destination)
21 |     source.buffer = context.createBuffer(1,bufferLength,context.sampleRate)
22 |     source.buffer.copyToChannel(array,0)
23 |     source.start()
24 |     startTime=context.currentTime
25 |     playheadPosition=0
26 |   }
27 |   function Reverse() {
28 |     source.stop()
29 |     source = new AudioBufferSourceNode(context)
30 |     source.loop=true
31 |     source.connect(context.destination)
32 |     source.buffer = context.createBuffer(1,bufferLength,context.sampleRate)
33 |     playheadPosition += context.currentTime-startTime
34 |     playheadPosition = playheadPosition%source.buffer.duration
35 |     playheadPosition = source.buffer.duration-playheadPosition
36 |     if (Forwards) source.buffer.copyToChannel(reversedArray,0)
37 |     else source.buffer.copyToChannel(array,0)
38 |     source.start(0,playheadPosition)
39 |     startTime=context.currentTime
40 |     Forwards = !Forwards
41 |   }
42 | </script>
43 | 


--------------------------------------------------------------------------------
/03 Audio Buffer Sources/BufferedNoise.html:
--------------------------------------------------------------------------------
 1 | <button id='start' onclick='context.resume()'>Make noise</button>
 2 | <script>
 3 |   let i,channel,context= new AudioContext()
 4 |   let source = context.createBufferSource()
 5 |   let nFrames = 3*context.sampleRate
 6 |   source.buffer = context.createBuffer(2,nFrames,context.sampleRate)
 7 |   for (channel=0;channel<2;channel++) for (i=0;i<nFrames;i++) 
 8 |     source.buffer.getChannelData(channel)[i] = 2*Math.random()-1
 9 |   source.start()
10 |   source.connect(context.destination)
11 | </script>
12 | 


--------------------------------------------------------------------------------
/03 Audio Buffer Sources/BufferedSquareWave.html:
--------------------------------------------------------------------------------
 1 | <button onclick='context.resume()'>Start</button>
 2 | <span>Frequency: </span>
 3 | <input type='range' min=0 max=1000 step='any' value=100 id='F'>
 4 | <script>
 5 |   let context= new AudioContext()
 6 |   // Create a buffer source for one period of a square wave
 7 |   let bufferLength=context.sampleRate
 8 |   let array = new Float32Array(bufferLength)
 9 |   for (var i=0;i<array.length;i++) array[i]=Math.sin(2*Math.PI*i/context.sampleRate)
10 |   var buffer = context.createBuffer(1,bufferLength,context.sampleRate)
11 |   buffer.copyToChannel(array,0)
12 |   var source=[],amplitude=[]
13 |   // Use the buffer in lots of buffersourcenodes, one for each Fourier term
14 |   for (i=0;i<10;i++) {
15 |     var n=2*i+1
16 |     source[i] = new AudioBufferSourceNode(context)
17 |     source[i].buffer = buffer
18 |     // Play the buffer at different rates for each Fourier term
19 |     source[i].playbackRate.value=n*F.value
20 |     source[i].loop=true
21 |     amplitude[i] = new GainNode(context)
22 |     amplitude[i].gain.value=4/(n*Math.PI)
23 |     source[i].connect(amplitude[i])
24 |     amplitude[i].connect(context.destination)
25 |     source[i].start()
26 |   }
27 |   F.oninput = () => {
28 |     for (i=0;i<10;i++) source[i].playbackRate.value = (2*i+1)*F.value
29 |   }
30 | </script>
31 | 


--------------------------------------------------------------------------------
/03 Audio Buffer Sources/Pause.html:
--------------------------------------------------------------------------------
 1 | <button onclick='Play()'>Play</button>
 2 | <button onclick='Pause()'>Pause</button>
 3 | <script>
 4 |   var FirstTime=true
 5 |   var context = new AudioContext()
 6 |   var source = context.createBufferSource()
 7 |   source.connect(context.destination)
 8 |   let bufferDuration=4
 9 |   let bufferLength = bufferDuration*context.sampleRate
10 |   let array = new Float32Array(bufferLength)
11 |   let instantFreq
12 |   for (var i=0;i<array.length;i++) {
13 |     instantFreq=1000*i/bufferLength
14 |     array[i]=Math.sin(2*Math.PI*instantFreq*i/context.sampleRate)
15 |   }
16 |   source.buffer = context.createBuffer(1,bufferLength,context.sampleRate)
17 |   source.buffer.copyToChannel(array,0)
18 |   function Play() {
19 |     context.resume()
20 |     if (FirstTime) {
21 |       source.start()
22 |       FirstTime=false
23 |     }
24 |     else source.playbackRate.value=1
25 |   }
26 |   function Pause() {
27 |     source.playbackRate.value=0
28 |   }
29 | </script>
30 | 


--------------------------------------------------------------------------------
/03 Audio Buffer Sources/Playback/Playback.html:
--------------------------------------------------------------------------------
 1 | <button id='start'>Play!</button><br><br>
 2 | 
 3 | <input type='range' min=0.25 max=4 step='any' value=1 id='rate'> Playback rate<br>
 4 | <input type='range' min=0 max=3 step='any' value=0 id='offset'> Offset<br>
 5 | <input type='range' min=0 max=3 step='any' value=3 id='duration'> Duration<br><br>
 6 | 
 7 | <input type='checkbox' id='loop'> Loop<br>
 8 | <input type='range' min=0 max=3 step='any' value=0 id='loopstart'> Loop start<br>
 9 | <input type='range' min=0 max=3 step='any' value=3 id='loopend'> Loop end<br>
10 | 
11 | <script src='Playback.js'></script>
12 | 


--------------------------------------------------------------------------------
/03 Audio Buffer Sources/Playback/Playback.js:
--------------------------------------------------------------------------------
 1 | let context= new AudioContext()
 2 | var source = new AudioBufferSourceNode(context)
 3 | let bufferDuration = 3*context.sampleRate
 4 | let array = new Float32Array(bufferDuration)
 5 | let instantFreq
 6 | for (var i=0;i<array.length;i++) {
 7 |   instantFreq=1000*i/bufferDuration
 8 |   array[i]=Math.sin(2*Math.PI*instantFreq*i/context.sampleRate)
 9 | }
10 | start.onclick = function() {
11 |   context.resume()
12 |   source = new AudioBufferSourceNode(context)
13 |   source.buffer = context.createBuffer(1,bufferDuration,context.sampleRate)
14 |   source.buffer.copyToChannel(array,0)
15 |   source.playbackRate.value = rate.value
16 |   source.loop = loop.checked
17 |   source.loopStart = loopstart.value
18 |   source.loopEnd = loopend.value
19 |   source.start(0,offset.value)
20 |   source.connect(context.destination)
21 | }
22 | rate.oninput = () => source.playbackRate.value = rate.value
23 | loop.oninput = () => source.loop = loop.checked
24 | loopstart.oninput = () => source.loopStart = loopstart.value
25 | loopend.oninput = () => source.loopEnd = loopend.value
26 | 


--------------------------------------------------------------------------------
/03 Audio Buffer Sources/README.md:
--------------------------------------------------------------------------------
 1 | # Audio Buffer Sources
 2 | 
 3 | Sound samples, or audio assets, are represented in the Web Audio as an array of floats in AudioBuffers. These buffers may be created by copying an array of data, setting each value in the buffer directly, or loading data from an audio file. The Web Audio API makes a clear distinction between such assets and their playback state at a particular point in the audio graph. This separation is needed since applications could involve multiple versions of the same buffer playing simultaneously. Hence, the audio buffer is not a source node. For that we have the AudioBufferSourceNode.
 4 | This Chapter looks at how to work with audio buffers; creating them, loading audio into them, using them in source nodes, and changing the playback state of the node. It starts by introducing the essential Web Audio API functionality, with examples of creating buffer sources and varying the properties of buffer source nodes. Careful attention is paid to the precise timing that can be achieved with their start, duration and looping times. Further examples are then given for constructing a square wave using looped buffer sources, for pausing playback, and for playing an audio asset backwards.
 5 | 
 6 | The source code examples here are;
 7 | 
 8 | - Playback: showing the full functionality of the BufferSourceNode using a Chirp signal
 9 | - BufferedNoise: creating noise using a buffer source, and playing it back using a BufferSourceNode
10 | - BufferedSquareWave: creating a square wave using many BufferSourceNodes, each one playing the same buffer source at different playback rates
11 | - Pause: pausing playback of a BufferSourceNode by setting playbackRate to zero
12 | - Backwards: playing audio forwards and backwards by using two BufferSourceNodes and keeping track of the playback position
13 | 


--------------------------------------------------------------------------------
/03 Audio Buffer Sources/index.html:
--------------------------------------------------------------------------------
 1 | <h2>Audio Buffer Sources</h2>
 2 | 
 3 | Sound samples, or audio assets, are represented in the Web Audio as an array of floats in AudioBuffers. These buffers may be created by copying an array of data, setting each value in the buffer directly, or loading data from an audio file. The Web Audio API makes a clear distinction between such assets and their playback state at a particular point in the audio graph. This separation is needed since applications could involve multiple versions of the same buffer playing simultaneously. Hence, the audio buffer is not a source node. For that we have the AudioBufferSourceNode.
 4 | This Chapter looks at how to work with audio buffers; creating them, loading audio into them, using them in source nodes, and changing the playback state of the node. It starts by introducing the essential Web Audio API functionality, with examples of creating buffer sources and varying the properties of buffer source nodes. Careful attention is paid to the precise timing that can be achieved with their start, duration and looping times. Further examples are then given for constructing a square wave using looped buffer sources, for pausing playback, and for playing an audio asset backwards.
 5 | 
 6 | The source code examples here are;
 7 | 
 8 | <ol>
 9 |   <li><a href="Playback/Playback.html">Playback</a>: showing the full functionality of the BufferSourceNode using a Chirp signal
10 |   <li><a href="BufferedNoise.html">BufferedNoise</a>: creating noise using a buffer source, and playing it back using a BufferSourceNode
11 |   <li><a href="BufferedSquareWave.html">BufferedSquareWave</a>: creating a square wave using many BufferSourceNodes, each one playing the same buffer source at different playback rates
12 |   <li><a href="Pause.html">Pause</a>: pausing playback of a BufferSourceNode by setting playbackRate to zero
13 |   <li><a href="Backwards.html">Backwards</a>: playing audio forwards and backwards by using two BufferSourceNodes and keeping track of the playback position
14 | </ol>
15 | 
16 | Code examples correspond to examples from Chapter 03 of the book 'Working with the Web Audio API'.
17 | 
18 | Feel free to contact me at joshua.reiss@qmul.ac.uk
19 | 


--------------------------------------------------------------------------------
/04 Constant Sources/ConstantSourceSquareWave/ConstantSourceSquareWave.html:
--------------------------------------------------------------------------------
 1 | <button onclick='context.resume()'>Start</button>
 2 | <span>Fundamental frequency: </span>
 3 | <input type='range' min=0 max=1000 step='any' value=0 id='F'>
 4 | <script>
 5 |   var context = new AudioContext()
 6 |   var sinusoid=[],harmonic=[],amplitude=[]
 7 |   var constantNode = new ConstantSourceNode(context,{offset:F.value})
 8 |   constantNode.start()
 9 |   for (i=0;i<10;i++) {
10 |     sinusoid[i] = new OscillatorNode(context,{frequency:0})
11 |     harmonic[i] = new GainNode(context)
12 |     amplitude[i] = new GainNode(context)
13 |     amplitude[i].gain.value=4/((2*i+1)*Math.PI)
14 |     harmonic[i].gain.value=2*i+1
15 |     constantNode.connect(harmonic[i])
16 |     harmonic[i].connect(sinusoid[i].frequency)
17 |     sinusoid[i].connect(amplitude[i])
18 |     amplitude[i].connect(context.destination)
19 |     sinusoid[i].start()
20 |   }
21 |   F.oninput = () => constantNode.offset.value = F.value
22 | </script>
23 | 


--------------------------------------------------------------------------------
/04 Constant Sources/ConstantSourceSquareWave/NoConstantSourceSquareWave.html:
--------------------------------------------------------------------------------
 1 | <button onclick='context.resume()'>Start</button>
 2 | <span>Frequency: </span>
 3 | <input type='range' min=0 max=1000 step='any' value=100 id='F'>
 4 | <script>
 5 |   var context = new AudioContext()
 6 |   var sinusoid=[],amplitude=[]
 7 |   var constantNode = context.createConstantSource()
 8 |   for (i=0;i<10;i++) {
 9 |     sinusoid[i] = new OscillatorNode(context,{frequency:(2*i+1)*F.value})
10 |     amplitude[i] = new GainNode(context)
11 |     amplitude[i].gain.value=4/((2*i+1)*Math.PI)
12 |     sinusoid[i].connect(amplitude[i])
13 |     amplitude[i].connect(context.destination)
14 |     sinusoid[i].start()
15 |   }
16 |   F.oninput = () => {
17 |     for (i=0;i<10;i++) sinusoid[i].frequency.value = (2*i+1)*F.value
18 |   }
19 | </script>
20 | 


--------------------------------------------------------------------------------
/04 Constant Sources/DCoffset.html:
--------------------------------------------------------------------------------
 1 | <button onclick='context.resume()'>Start</button><br>
 2 | Offset <input type='range' min=0 max=2 step='any' value=0 id='Offset'>
 3 | <script>
 4 |   var context = new AudioContext()
 5 |   let offsetNode = context.createConstantSource()
 6 |   let tone = context.createOscillator()
 7 |   let offsetTone = context.createGain()
 8 |   offsetNode.start()
 9 |   tone.start()
10 |   offsetNode.connect(offsetTone)
11 |   tone.connect(offsetTone)
12 |   offsetTone.connect(context.destination)
13 |   Offset.oninput = () => offsetNode.offset.value = Offset.value
14 | </script>
15 | 


--------------------------------------------------------------------------------
/04 Constant Sources/Grouping tracks/01_Congas.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreiss/Working-with-the-Web-Audio-API/25a2e41c01e11d553cb36bcaba09321e34425e7c/04 Constant Sources/Grouping tracks/01_Congas.wav


--------------------------------------------------------------------------------
/04 Constant Sources/Grouping tracks/02_Bass.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreiss/Working-with-the-Web-Audio-API/25a2e41c01e11d553cb36bcaba09321e34425e7c/04 Constant Sources/Grouping tracks/02_Bass.wav


--------------------------------------------------------------------------------
/04 Constant Sources/Grouping tracks/03_UkeleleMic.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreiss/Working-with-the-Web-Audio-API/25a2e41c01e11d553cb36bcaba09321e34425e7c/04 Constant Sources/Grouping tracks/03_UkeleleMic.wav


--------------------------------------------------------------------------------
/04 Constant Sources/Grouping tracks/04_UkeleleDI.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreiss/Working-with-the-Web-Audio-API/25a2e41c01e11d553cb36bcaba09321e34425e7c/04 Constant Sources/Grouping tracks/04_UkeleleDI.wav


--------------------------------------------------------------------------------
/04 Constant Sources/Grouping tracks/05_Viola.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreiss/Working-with-the-Web-Audio-API/25a2e41c01e11d553cb36bcaba09321e34425e7c/04 Constant Sources/Grouping tracks/05_Viola.wav


--------------------------------------------------------------------------------
/04 Constant Sources/Grouping tracks/06_Cello.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreiss/Working-with-the-Web-Audio-API/25a2e41c01e11d553cb36bcaba09321e34425e7c/04 Constant Sources/Grouping tracks/06_Cello.wav


--------------------------------------------------------------------------------
/04 Constant Sources/Grouping tracks/07_LeadVox.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreiss/Working-with-the-Web-Audio-API/25a2e41c01e11d553cb36bcaba09321e34425e7c/04 Constant Sources/Grouping tracks/07_LeadVox.wav


--------------------------------------------------------------------------------
/04 Constant Sources/Grouping tracks/08_BackingVox.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreiss/Working-with-the-Web-Audio-API/25a2e41c01e11d553cb36bcaba09321e34425e7c/04 Constant Sources/Grouping tracks/08_BackingVox.wav


--------------------------------------------------------------------------------
/04 Constant Sources/Grouping tracks/Grouping.html:
--------------------------------------------------------------------------------
 1 | <input type='checkbox' id='Check0' onclick='Checks(this)'>Congas<br>
 2 | <input type='checkbox' id='Check1' onclick='Checks(this)'>Bass<br>
 3 | <input type='checkbox' id='Check2' onclick='Checks(this)'>Ukelele Mic<br>
 4 | <input type='checkbox' id='Check3' onclick='Checks(this)'>Ukelele DI<br>
 5 | <input type='checkbox' id='Check4' onclick='Checks(this)'>Viola<br>
 6 | <span>Volume: </span>
 7 | <input type='range' min=0 max=1 step='0.01' value=0 id='volume'>
 8 | <input type='button' value='Start' id='playButton'>
 9 | <script src='Grouping.js'></script>
10 | 


--------------------------------------------------------------------------------
/04 Constant Sources/Grouping tracks/Grouping.js:
--------------------------------------------------------------------------------
 1 | var file=[],tracks=[],gains=[]
 2 | var fileName=['01_Congas','02_Bass','03_UkeleleMic','04_UkeleleDI','05_Viola']
 3 | context = new AudioContext()
 4 | for (i=0;i<5;i++) {
 5 |   file[i] = new Audio(fileName[i]+'.wav')
 6 |   tracks[i] = context.createMediaElementSource(file[i])
 7 |   gains[i] = new GainNode(context,{gain:0})
 8 |   tracks[i].connect(gains[i])
 9 |   gains[i].connect(context.destination)
10 | }
11 | let constantNode = context.createConstantSource()
12 | constantNode.start()
13 | volume.oninput = function() {constantNode.offset.value = volume.value}
14 | playButton.onclick = function() {
15 |   context.resume()
16 |   for (i=0;i<5;i++) file[i].play()
17 | }
18 | function Checks(element) {
19 |   var checkNumber=parseInt(element.id.substring(5))
20 |   if (element.checked) constantNode.connect(gains[checkNumber].gain)
21 |   else constantNode.disconnect(gains[checkNumber].gain)
22 | }
23 | 


--------------------------------------------------------------------------------
/04 Constant Sources/Grouping tracks/Readme.txt:
--------------------------------------------------------------------------------
1 | Raw multitrack excerpt from Anna Blanton's 'Rachel'. This file is provided for educational purposes only, and the material contained in it should not be used for any commercial purpose without the express permission of the copyright holders. Please refer to https://creativecommons.org/licenses/by-sa/4.0/ and www.cambridge-mt.com for further licensing details.
2 | 
3 | Comprises 8 WAV files at 24-bit/44.1kHz resolution.
4 | 
5 | Tempo: approx 63.5bpm.


--------------------------------------------------------------------------------
/04 Constant Sources/README.md:
--------------------------------------------------------------------------------
1 | # Constant sources
2 | 
3 | The ConstantSourceNode represents an audio source whose output is a constant value. Examples are provided showing;
4 | 
5 | - DCoffset: applying a DC offset to an oscillator, which also demonstrates what happens when rendering audio outside the range -1 to +1
6 | - ConstantSourceSquareWave: use of a constant source node to construct a square wave
7 | - Grouping tracks: grouping tracks in a multitrack audio, and applying the same processing on all tracks in a groupwhen working with multitrack audio.
8 | 


--------------------------------------------------------------------------------
/04 Constant Sources/index.html:
--------------------------------------------------------------------------------
 1 | <h2>Constant sources</h2>
 2 | 
 3 | The ConstantSourceNode represents an audio source whose output is a constant value. Examples are provided showing;
 4 | 
 5 | <ol>
 6 |   <li><a href="DCoffset.html">DCoffset: applying a DC offset to an oscillator, which also demonstrates what happens when rendering audio outside the range -1 to +1
 7 |   <li><a href="ConstantSourceSquareWave/ConstantSourceSquareWave.html">ConstantSourceSquareWave: use of a constant source node to construct a square wave
 8 |   <li><a href="Grouping tracks/Grouping.html">Grouping tracks: grouping tracks in a multitrack audio, and applying the same processing on all tracks in a groupwhen working with multitrack audio.
 9 | </ol>
10 | 
11 | Code examples correspond to examples from Chapter 04 of the book 'Working with the Web Audio API'.
12 | 
13 | Feel free to contact me at joshua.reiss@qmul.ac.uk
14 | 


--------------------------------------------------------------------------------
/05 Parameter automation/Beep/Beep.js:
--------------------------------------------------------------------------------
 1 | var context = new AudioContext()
 2 | var Volume = new GainNode(context,{gain:0})
 3 | var Tone = new OscillatorNode(context,{type:'sawtooth'})
 4 | Tone.connect(Volume)
 5 | Volume.connect(context.destination)
 6 | Tone.start()
 7 | triggerBeep.onclick = function() {
 8 |   context.resume()
 9 |   let now = context.currentTime
10 |   Tone.frequency.value = Frequency.value
11 |   Volume.gain.setValueAtTime(0.0, now)
12 |   Volume.gain.linearRampToValueAtTime(1,now + Attack.value/1000)
13 |   Volume.gain.linearRampToValueAtTime(0,now + Attack.value/1000 + Decay.value/1000)
14 | }
15 | 


--------------------------------------------------------------------------------
/05 Parameter automation/Beep/beep.html:
--------------------------------------------------------------------------------
1 | <input type='button' value='Beep' id='triggerBeep'>
2 | <p>Frequency</p>
3 | <input type='number' id='Frequency' min=0 max=8000 value=440>
4 | <p>Attack</p>
5 | <input type='number' id='Attack' min=0 max=1000 value=50>
6 | <p>Decay</p>
7 | <input type='number' id='Decay' min=0 max=1000 value=50>
8 | <script src='Beep.js'></script>
9 | 


--------------------------------------------------------------------------------
/05 Parameter automation/Bells/Bells.html:
--------------------------------------------------------------------------------
1 | <input type='button' value='Strike' id='Strike'>
2 | <p>Duration</p>
3 | <input type='range' min=0.2 max=4 value=1 step='any' id='Duration'>
4 | <p>Pitch</p>
5 | <input type='range' min=0 max=4 value=1 step='any' id='Pitch'>
6 | <script src='Bells.js'></script>
7 | 


--------------------------------------------------------------------------------
/05 Parameter automation/Bells/Bells.js:
--------------------------------------------------------------------------------
 1 | var context = new AudioContext()
 2 | var DBToAmp = function(db) { return Math.pow(10, db / 20) }
 3 | Strike.onclick = function() {
 4 |   context.resume()
 5 |   var gNode=[],osc=[],FinalAmp
 6 |   for (i=0;i<Params.nOsc;i++) {
 7 |     gNode[i]=context.createGain()
 8 |     osc[i]= context.createOscillator()
 9 |     osc[i].start()
10 |     osc[i].connect(gNode[i]).connect(context.destination)
11 |   }
12 |   var now = context.currentTime
13 |   for (i=0;i<Params.nOsc;i++) {
14 |     osc[i].frequency.setValueAtTime(Pitch.value*Params.F[i],now)
15 |     gNode[i].gain.setValueAtTime(DBToAmp(Params.Amp0[i]), now)
16 |     FinalAmp=DBToAmp(Params.Amp0[i]+Params.Slope[i]*8/Duration.value)
17 |     gNode[i].gain.exponentialRampToValueAtTime(FinalAmp,now+8)
18 |     gNode[i].gain.linearRampToValueAtTime(0, now + 12)
19 |   }
20 | }
21 | Params= {
22 |   nOsc:14,
23 |   F:[97.0362,155.7461,200.6708,291.5601,335.2872,401.6002,500.6919,
24 |     599.8203,679.0558,704.6314,850.3987,1016.353,1169.165,1343.452],
25 |   Slope:[-0.71286,-1.08551,-2.68134,-0.80383,-5.88471,-1.06387,-3.419,
26 |     -3.69923,-6.71634,-3.57097,-6.85307,-7.04044,-5.6755,-7.25273],
27 |   Amp0:[ -55.7976,-44.8857,-33.3415,-70.8675,-24.9633,-75.653,-27.2338,
28 |     -66.8294,-23.635,-57.3287,-43.0425,-50.9267,-55.1784,-46.6498]
29 | }
30 | 


--------------------------------------------------------------------------------
/05 Parameter automation/Crossfade/Crossfade.html:
--------------------------------------------------------------------------------
1 | <input type='button' value='Start' onclick='context.resume()'>
2 | <input type='button' value='Linear Crossfade' id='CrossfadeLinear'>
3 | <input type='button' value='Equal Power Crossfade' id='CrossfadeEqualPower'>
4 | <p>Duration</p>
5 | <input type='range' id='Duration' min=0 max=10 value=5 step='any'>
6 | <script src='Crossfade.js'></script>
7 | 


--------------------------------------------------------------------------------
/05 Parameter automation/Crossfade/Crossfade.js:
--------------------------------------------------------------------------------
 1 | var context = new AudioContext()
 2 | var Tone1 = new OscillatorNode(context,{type:'sine',frequency:500})
 3 | var Tone2 = new OscillatorNode(context,{type:'sine',frequency:300})
 4 | var Gain1 = new GainNode(context,{gain:1})
 5 | var Gain2 = new GainNode(context,{gain:0})
 6 | Tone1.start()
 7 | Tone2.start()
 8 | Tone1.connect(Gain1).connect(context.destination)
 9 | Tone2.connect(Gain2).connect(context.destination)
10 | var N=100
11 | var curveUp = new Float32Array(N), curveDown = new Float32Array(N)
12 | for (i=0;i<N;i++) curveUp[i] = Math.sin(0.5*Math.PI*i/(N-1))
13 | for (i=0;i<N;i++) curveDown[i] = Math.cos(0.5*Math.PI*i/(N-1))
14 | CrossfadeEqualPower.onclick = function() {
15 |   let now = context.currentTime
16 |   Gain1.gain.setValueCurveAtTime(curveDown,now,Duration.value)
17 |   Gain2.gain.setValueCurveAtTime(curveUp,now,Duration.value)
18 | }
19 | CrossfadeLinear.onclick = function() {
20 |   let now = context.currentTime
21 |   Gain1.gain.value=1
22 |   Gain2.gain.value=0
23 |   Gain1.gain.linearRampToValueAtTime(0,now + parseFloat(Duration.value))
24 |   Gain2.gain.linearRampToValueAtTime(1,now + parseFloat(Duration.value))
25 | }


--------------------------------------------------------------------------------
/05 Parameter automation/README.md:
--------------------------------------------------------------------------------
 1 | # Parameter automation
 2 | 
 3 | Here, we dive into how audio parameters are set and scheduled in the Web Audio API.
 4 | There are 5 source code examples;
 5 |  
 6 | - Beep: Making a beep sound, a basic demonstration of audio parameter automation
 7 | - RepeatBeep:shows how parameter automation can be looped using JavaScript's setInterval method.
 8 | - SetValueCure: creates a beep sound using a custom automation curve
 9 | - Crossfade: Uses setValueCurveAtTime to show the difference between a linear crossfade and an equal power crossfade of two signals.
10 | - Bells: we show how bell sounds can be created using additive synthesis, by applying envelopes to a set of oscillators.
11 | 


--------------------------------------------------------------------------------
/05 Parameter automation/RepeatBeep/RepeatBeep.html:
--------------------------------------------------------------------------------
 1 | <input type='button' value='Repeat beep' id='triggerBeep'>
 2 | <script>
 3 |   var context = new AudioContext()
 4 |   var Attack=100,Decay=100
 5 |   var Volume = new GainNode(context,{gain:0})
 6 |   var Tone = new OscillatorNode(context)
 7 |   Tone.connect(Volume).connect(context.destination)
 8 |   Tone.start()
 9 |   triggerBeep.onclick = function() {
10 |     context.resume()
11 |     var interval = setInterval(function(){
12 |       let now = context.currentTime
13 |       Volume.gain.setValueAtTime(0.0, now)
14 |       Volume.gain.linearRampToValueAtTime(1, now + Attack/1000)
15 |       Volume.gain.linearRampToValueAtTime(0, now + Attack/1000 + Decay/1000)
16 |     },1000)
17 |   }
18 | </script>


--------------------------------------------------------------------------------
/05 Parameter automation/SetValueCurve.html:
--------------------------------------------------------------------------------
 1 | <input type='button' value='Beep' id='triggerBeep'>
 2 | <p>Duration</p>
 3 | <input type='number' id='Duration' min=0 max=1000 value=50>
 4 | <script>
 5 |   var context = new AudioContext()
 6 |   var Volume = new GainNode(context,{gain:0})
 7 |   var Tone = new OscillatorNode(context)
 8 |   Tone.connect(Volume).connect(context.destination)
 9 |   Tone.start()
10 |   var curve = new Float32Array(100)
11 |   for (i=0;i<100;i++) curve[i]=Math.sin(Math.PI*i/99)
12 |   triggerBeep.onclick = function() {
13 |     context.resume()
14 |     Volume.gain.setValueCurveAtTime(curve,0,Duration.value/1000)
15 |   }
16 | </script>
17 | 


--------------------------------------------------------------------------------
/05 Parameter automation/index.html:
--------------------------------------------------------------------------------
 1 | <h2>Parameter automation</h2>
 2 | 
 3 |    Here, we dive into how audio parameters are set and scheduled in the Web Audio API.
 4 |    There are 5 source code examples;
 5 |     
 6 | <ol>
 7 |    <li><a href="Beep/beep.html">Beep</a>: Making a beep sound, a basic demonstration of audio parameter automation
 8 |    <li><a href="RepeatBeep/RepeatBeep.html">RepeatBeep:shows how parameter automation can be looped using JavaScript's setInterval method.
 9 |    <li><a href="SetValueCurve.html">SetValueCure</a>: creates a beep sound using a custom automation curve
10 |    <li><a href="Crossfade/Crossfade.html">Crossfade</a>: Uses setValueCurveAtTime to show the difference between a linear crossfade and an equal power crossfade of two signals.
11 |    <li><a href="Bells/Bells.html">Bells</a>: we show how bell sounds can be created using additive synthesis, by applying envelopes to a set of oscillators.
12 | </ol>
13 | 
14 | Code examples correspond to examples from Chapter 05 of the book 'Working with the Web Audio API'.
15 | 
16 | Feel free to contact me at joshua.reiss@qmul.ac.uk
17 | 


--------------------------------------------------------------------------------
/06 Connecting audio parameters and modulation/AM Synthesis/AMSynthesis.html:
--------------------------------------------------------------------------------
 1 | <input type='button' value='Start/Stop' id='StartStop'>
 2 | <p>Carrier Frequency</p>
 3 | <input type='range' min=50 max=2000 value=800 step='any' id='CarrierFrequency'>
 4 | <span id='CarrierFrequencyLabel'></span>
 5 | <p>Modulation Depth</p>
 6 | <input type='range' min=0 max=1 value=0.1 step='any' id='ModulationDepth'>
 7 | <span id='ModulationDepthLabel'></span>
 8 | <p>Modulation Frequency</p>
 9 | <input type='range' min=10 max=200 value=100 step='any' id='ModulatorFrequency'>
10 | <span id='ModulatorFrequencyLabel'></span>
11 | <script>
12 |   CarrierFrequency.oninput = function() {
13 |     CarrierFrequencyLabel.innerHTML = this.value
14 |     Carrier.frequency.value=this.value
15 |   }
16 |   ModulationDepth.oninput = function() {
17 |     ModulationDepth.innerHTML = this.value
18 |     Modulator.gain.value=this.value
19 |   }
20 |   ModulatorFrequency.oninput = function() {
21 |     ModulatorFrequencyLabel.innerHTML = this.value
22 |     ModulatorOsc.frequency.value=this.value
23 |   }
24 |   StartStop.onclick = function() {
25 |     if (context.state === 'suspended') context.resume()
26 |     else context.suspend()
27 |   }
28 | </script>
29 | <script src='AMSynthesis.js'></script>
30 | 


--------------------------------------------------------------------------------
/06 Connecting audio parameters and modulation/AM Synthesis/AMSynthesis.js:
--------------------------------------------------------------------------------
 1 | context = new AudioContext()
 2 | var Carrier = new OscillatorNode(context)
 3 | var ModulatorOsc = new OscillatorNode(context,{frequency:100,type:'square'})
 4 | var Modulator = context.createGain()
 5 | var AM = context.createGain()
 6 | Carrier.start()
 7 | ModulatorOsc.start()
 8 | ModulatorOsc.connect(Modulator)
 9 | Modulator.connect(AM.gain)
10 | Carrier.connect(AM)
11 | AM.connect(context.destination)
12 | 


--------------------------------------------------------------------------------
/06 Connecting audio parameters and modulation/FM Synthesis/FMSynthesis.html:
--------------------------------------------------------------------------------
 1 | <input type='button' value='Start/Stop' id='StartStop'>
 2 | <p>Carrier Frequency</p>
 3 | <input type='range' min=50 max=2000 value=800 step='any' id='CarrierFrequency'>
 4 | <span id='CarrierFrequencyLabel'></span>
 5 | <p>Modulation Depth</p>
 6 | <input type='range' min=0 max=1000 value=200 step='any' id='ModulationDepth'>
 7 | <span id='ModulationDepthLabel'></span>
 8 | <p>Modulation Frequency</p>
 9 | <input type='range' min=10 max=200 value=100 step='any' id='ModulationFrequency'>
10 | <span id='ModulationFrequencyLabel'></span>
11 | <script>
12 |   //User Interface callbacks
13 |   CarrierFrequency.oninput = function() {
14 |     CarrierFrequencyLabel.innerHTML = this.value
15 |     Carrier.frequency.value=this.value
16 |   }
17 |   ModulationDepth.oninput = function() {
18 |     ModulationDepthLabel.innerHTML = this.value
19 |     Modulator.gain.value=this.value
20 |   }
21 |   ModulationFrequency.oninput = function() {
22 |     ModulationFrequencyLabel.innerHTML = this.value
23 |     ModulatorOsc.frequency.value=this.value
24 |   }
25 |   StartStop.onclick = function() {
26 |     if (context.state === 'suspended') context.resume()
27 |     else context.suspend()
28 |   }
29 | </script>
30 | <script src='FMSynthesis.js'></script>
31 | 


--------------------------------------------------------------------------------
/06 Connecting audio parameters and modulation/FM Synthesis/FMSynthesis.js:
--------------------------------------------------------------------------------
 1 | //Define context and nodes
 2 | context = new AudioContext()
 3 | var Carrier = new OscillatorNode(context,{frequency:CarrierFrequency.value})
 4 | var ModulatorOsc = new OscillatorNode(context,{frequency:ModulationFrequency.value})
 5 | var Modulator = new GainNode(context,{gain:ModulationDepth.value})
 6 | //start any scheduled sources
 7 | Carrier.start()
 8 | ModulatorOsc.start()
 9 | //Modulator is a gain node, so this multiples ModulatorOsc with the modulation depth
10 | ModulatorOsc.connect(Modulator)
11 | //Carrier frequency is the sum of the intrinsic frequency offset and the modulator
12 | Modulator.connect(Carrier.frequency)
13 | Carrier.connect(context.destination)
14 | 


--------------------------------------------------------------------------------
/06 Connecting audio parameters and modulation/README.md:
--------------------------------------------------------------------------------
1 | # Connecting audio parameters and modulation
2 | 
3 | Here, we look at how an audio node’s output can be connected to a parameter of another node. There are two examples.
4 | 
5 | - FMSynthesis: shows how FM synthesis is performed by connecting a Low Frequency Oscillator to the frequency parameter of another oscillator.
6 | - AMSynthesis: for implementing AM synthesis by connecting a Low Frequency Oscillator to the gain parameter of a gain node.
7 | 


--------------------------------------------------------------------------------
/06 Connecting audio parameters and modulation/index.html:
--------------------------------------------------------------------------------
 1 | <h2>Connecting audio parameters and modulation</h2>
 2 | 
 3 | Here, we look at how an audio node’s output can be connected to a parameter of another node. There are two examples.
 4 | 
 5 | <ul>
 6 |   <li><a href="FM Synthesis/FMSynthesis.html">FMSynthesis</a>: shows how FM synthesis is performed by connecting a Low Frequency Oscillator to the frequency parameter of another oscillator.
 7 |   <li><a href="AM Synthesis/AMSynthesis.html">AMSynthesis</a>: for implementing AM synthesis by connecting a Low Frequency Oscillator to the gain parameter of a gain node.
 8 | </ul>
 9 | 
10 | Code examples correspond to examples from Chapter 06 of the book 'Working with the Web Audio API'.
11 | 
12 | Feel free to contact me at joshua.reiss@qmul.ac.uk
13 | 


--------------------------------------------------------------------------------
/07 Analysis and visualization/Analyser.html:
--------------------------------------------------------------------------------
1 | <canvas id='canvas' width='512' height='256' ></canvas><br>
2 | <button onclick='audioContext.resume()'>Start</button>
3 | <input type='checkbox' id='Spectrum'>Spectrum<br>
4 | <input type='range' max=4000 value=440 id='Frequency'>Frequency
5 | <script src='Analyser.js'></script>
6 | 


--------------------------------------------------------------------------------
/07 Analysis and visualization/Analyser.js:
--------------------------------------------------------------------------------
 1 | let canvasContext= canvas.getContext('2d')
 2 | let audioContext= new AudioContext()
 3 | let source= new OscillatorNode(audioContext,{type:'square'})
 4 | let analyser= audioContext.createAnalyser()
 5 | source.connect(analyser)
 6 | source.start()
 7 | var data = new Uint8Array(analyser.frequencyBinCount)
 8 | Frequency.oninput = function() { source.frequency.value = this.value}
 9 | draw()
10 | function draw() {
11 |   let height=canvas.height, width=canvas.width
12 |   if (Spectrum.checked) analyser.getByteFrequencyData(data)
13 |   else analyser.getByteTimeDomainData(data)
14 |   canvasContext.clearRect(0,0,canvas.width,canvas.height)
15 |   for (let i = 0; i < data.length; i++) {
16 |     if (!Spectrum.checked) canvasContext.fillRect(i,height*(1-data[i]/256)-1,1,1)
17 |     else canvasContext.fillRect(i,height*(1-data[i]/256),1,height*data[i]/256)
18 |   }
19 |   requestAnimationFrame(draw)
20 | }
21 | 


--------------------------------------------------------------------------------
/07 Analysis and visualization/README.md:
--------------------------------------------------------------------------------
1 | # Analysis and Visualization
2 | 
3 | This introduces the Web Audio API's AnalyserNode.
4 | 
5 | An example is given for visualizing time or frequency data returned by the AnalyserNode.
6 | 


--------------------------------------------------------------------------------
/07 Analysis and visualization/index.html:
--------------------------------------------------------------------------------
 1 | <h2>Analysis and visualisation</h2>
 2 | 
 3 | This introduces the Web Audio API's AnalyserNode.
 4 | 
 5 | An <a href="Analyser.html">example is given for visualizing time or frequency data</a> returned by the AnalyserNode.
 6 | 
 7 | The code example corresponds to the example from Chapter 07 of the book 'Working with the Web Audio API'.
 8 | 
 9 | Feel free to contact me at joshua.reiss@qmul.ac.uk
10 | 


--------------------------------------------------------------------------------
/08 Loading and recording/LevelMeter.html:
--------------------------------------------------------------------------------
 1 | <canvas id='canvas' width='64' height='256' ></canvas>
 2 | <button onclick='audioContext.resume()'>Start</button>
 3 | <script>
 4 |   const audioContext = new AudioContext()
 5 |   navigator.mediaDevices.getUserMedia ({audio:true}).then(function(stream) {
 6 |     var source = new MediaStreamAudioSourceNode(audioContext,{mediaStream: stream})
 7 |     var level, smoothLevel=0, canvasMeter
 8 |     let canvasContext= canvas.getContext('2d')
 9 |     let analyser= audioContext.createAnalyser()
10 |     source.connect(analyser)
11 |     var data = new Float32Array(analyser.frequencyBinCount)
12 |     function draw() {
13 |       requestAnimationFrame(draw)
14 |       analyser.getFloatTimeDomainData(data)  // get data for this sample
15 |       canvasContext.clearRect(0,0,canvas.width,canvas.height)
16 |       level=0
17 |       for (let i=0; i<data.length; i++) level+=5*Math.abs(data[i])/data.length
18 |       smoothLevel = 0.85*smoothLevel+0.15*level
19 |       canvasMeter = canvas.height*(1-smoothLevel)-1
20 |       canvasContext.fillRect(1,canvasMeter,canvas.width,canvas.height)
21 |     }
22 |     draw()
23 |   })
24 | </script>
25 | 


--------------------------------------------------------------------------------
/08 Loading and recording/MediaElement/MediaElement.html:
--------------------------------------------------------------------------------
 1 | <audio controls id='file' onplay='context.resume()'>
 2 |   <source src='beat1.mp3'>
 3 | </audio>
 4 | <script>
 5 |   let context = new AudioContext()
 6 |   let source = context.createMediaElementSource(file)
 7 |   let gainNode = new GainNode(context,{gain:0.5})
 8 |   source.connect(gainNode).connect(context.destination)
 9 | </script>
10 | 


--------------------------------------------------------------------------------
/08 Loading and recording/MediaElement/MediaElement2.html:
--------------------------------------------------------------------------------
 1 | <button id='play'>Start</button>
 2 | <script>
 3 |   context = new AudioContext()
 4 |   file = new Audio('beat1.mp3')
 5 |   let source = context.createMediaElementSource(file)
 6 |   source.connect(context.destination)
 7 |   play.onclick = function() {
 8 |     context.resume()
 9 |     file.play()
10 |   }
11 | </script>
12 | 


--------------------------------------------------------------------------------
/08 Loading and recording/MediaElement/SimpleMediaElement.html:
--------------------------------------------------------------------------------
 1 | <audio controls id='file' src='beat1.mp3'></audio><br>
 2 | <input type='range' min=0 max=1 value=0.5 step='any' id='Volume'>Volume<br>
 3 | <input type='range' min=0.25 max=4 value=1 step='any' id='Rate'>Rate<br>
 4 | <input type='checkbox' id='Loop'>Loop
 5 | <input type='checkbox' id='Preserve'>Preserve pitch<br>
 6 | <button id='Show'>Show position</button>
 7 | <span id=Position></span><br>
 8 | <script>
 9 |   Show.oninput () { Position.innerHTML = file.currentTime }
10 |   Rate.oninput = function() { file.playbackRate = this.value }
11 |   Volume.oninput = function() { file.volume = this.value }
12 |   Preserve.oninput = function() { file.preservesPitch = this.checked }
13 |   Loop.oninput = function() { file.loop = this.checked }
14 | </script>
15 | 


--------------------------------------------------------------------------------
/08 Loading and recording/MediaElement/beat1.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreiss/Working-with-the-Web-Audio-API/25a2e41c01e11d553cb36bcaba09321e34425e7c/08 Loading and recording/MediaElement/beat1.mp3


--------------------------------------------------------------------------------
/08 Loading and recording/MediaStreamToAudioBuffer.html:
--------------------------------------------------------------------------------
 1 | <button id='recordButton'>Record</button>
 2 | <button id='stopButton'>Stop</button>
 3 | <script>
 4 |   navigator.mediaDevices.getUserMedia({ audio:true }).then(stream => {
 5 |     const data = []
 6 |     let recording
 7 |     const context = new AudioContext()
 8 |     const sourceNode = context.createBufferSource()
 9 |     sourceNode.connect(context.destination)
10 |     recordButton.onclick = () => recording = record(stream)
11 |     stopButton.onclick = () => recording.stop()
12 |     function record(stream) {
13 |       recording = new MediaRecorder(stream)
14 |       recording.start()
15 |       recording.ondataavailable = event => data.push(event.data)
16 |       recording.onstop = () => {
17 |         new Blob(data).arrayBuffer()
18 |         .then(arrayBuffer => context.decodeAudioData(arrayBuffer))
19 |         .then(audioBuffer => sourceNode.buffer = audioBuffer)
20 |         sourceNode.start()
21 |       }
22 |       return recording
23 |     }
24 |   })
25 | </script>


--------------------------------------------------------------------------------
/08 Loading and recording/README.md:
--------------------------------------------------------------------------------
 1 | # Loading and Recording
 2 | 
 3 | Essential functionality in the Web Audio API is the ability to play back audio from a stream or a file, and to record or stream the output of a node. Here, we introduce audio nodes that enable getting audio into an audio context from different sources, like media streams and media elements, as well as into buffers using decodeAudioData, and to different destinations, like media streams and audio files. Some of the functionality also relies on methods from outside the Web Audio API, like getUserMedia from the MediaStream API.
 4 | 
 5 | - MediaElement
 6 |   - SimpleMediaElement: basic use of an <audio> media element, without the Web Audio API.
 7 |   - MediaElement.html: use of a media element in an audio context.
 8 |   - MediaElement2.html: use of the MediaElementSourceNode with the audio() constructor.
 9 | - decodeAudioData: These examples show how we can fill an audio buffer source with audio from a file
10 |   - decodeWithRequest.html: use of decodeAudioData and XMLHttpRequest to load an audio file, and playbackRate to play it back at a variable rate.
11 |   - decodeWithFetch.html: use of decodeAudioData and fetch() to load an audio file, and playbackRate to play it back at a variable rate.
12 | - LevelMeter: Uses the MediaStreamAudioSourceNode tp provide a level meter for sound input from a microphone.
13 | - MediaStreamToAudioBuffer: shows how to take an excerpt of a media stream and use it as the audio buffer for an AudioBufferSourceNode
14 | - Record an audio node
15 |   - MediaRecorderExample: use of the MediaRecorder to record an audio nodes
16 |   - RecorderExample: use of the recorder.js library to record an audio node
17 | 


--------------------------------------------------------------------------------
/08 Loading and recording/Record an Audio Node/MediaRecorderExample.html:
--------------------------------------------------------------------------------
 1 | <button onclick='Start()'>Start</button>
 2 | <button onclick='Stop()'>Stop</button>
 3 | <audio controls id='audio'></audio>
 4 | <script>
 5 |   var chunks = []
 6 |   var context = new AudioContext()
 7 |   var Tone = context.createOscillator()
 8 |   var Destination = context.createMediaStreamDestination()
 9 |   var Recording = new MediaRecorder(Destination.stream)
10 |   Tone.connect(Destination)
11 |   function Start() {
12 |     Tone.start()
13 |     Recording.start()
14 |   }
15 |   function Stop() {
16 |     Recording.stop()
17 |     Tone.stop()
18 |   }
19 |   Recording.ondataavailable = event => chunks.push(event.data)
20 |   Recording.onstop = () => {
21 |     audio.src = URL.createObjectURL(new Blob(chunks,{'type':'audio/ogg'}))
22 |   }
23 | </script>


--------------------------------------------------------------------------------
/08 Loading and recording/Record an Audio Node/RecorderExample.html:
--------------------------------------------------------------------------------
 1 | <script src='recorder.js'></script>
 2 | <button onclick='Start()'>Start</button>
 3 | <button onclick='Stop()'>Stop</button>
 4 | <audio controls id='audio'></audio>
 5 | <script>
 6 |   var context = new AudioContext()
 7 |   var Tone = context.createOscillator()
 8 |   var Recording = new Recorder(Tone)
 9 |   function Start() {
10 |     Tone.start()
11 |     Recording.record()
12 |   }
13 |   function Stop() {
14 |     Recording.stop()
15 |     Tone.stop()
16 |     Recording.exportWAV(blob => audio.src = URL.createObjectURL(blob))
17 |   }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/08 Loading and recording/Record an Audio Node/recorder.js:
--------------------------------------------------------------------------------
  1 | (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Recorder = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
  2 | "use strict";
  3 | 
  4 | module.exports = require("./recorder").Recorder;
  5 | 
  6 | },{"./recorder":2}],2:[function(require,module,exports){
  7 | 'use strict';
  8 | 
  9 | var _createClass = (function () {
 10 |     function defineProperties(target, props) {
 11 |         for (var i = 0; i < props.length; i++) {
 12 |             var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);
 13 |         }
 14 |     }return function (Constructor, protoProps, staticProps) {
 15 |         if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;
 16 |     };
 17 | })();
 18 | 
 19 | Object.defineProperty(exports, "__esModule", {
 20 |     value: true
 21 | });
 22 | exports.Recorder = undefined;
 23 | 
 24 | var _inlineWorker = require('inline-worker');
 25 | 
 26 | var _inlineWorker2 = _interopRequireDefault(_inlineWorker);
 27 | 
 28 | function _interopRequireDefault(obj) {
 29 |     return obj && obj.__esModule ? obj : { default: obj };
 30 | }
 31 | 
 32 | function _classCallCheck(instance, Constructor) {
 33 |     if (!(instance instanceof Constructor)) {
 34 |         throw new TypeError("Cannot call a class as a function");
 35 |     }
 36 | }
 37 | 
 38 | var Recorder = exports.Recorder = (function () {
 39 |     function Recorder(source, cfg) {
 40 |         var _this = this;
 41 | 
 42 |         _classCallCheck(this, Recorder);
 43 | 
 44 |         this.config = {
 45 |             bufferLen: 4096,
 46 |             numChannels: 2,
 47 |             mimeType: 'audio/wav'
 48 |         };
 49 |         this.recording = false;
 50 |         this.callbacks = {
 51 |             getBuffer: [],
 52 |             exportWAV: []
 53 |         };
 54 | 
 55 |         Object.assign(this.config, cfg);
 56 |         this.context = source.context;
 57 |         this.node = (this.context.createScriptProcessor || this.context.createJavaScriptNode).call(this.context, this.config.bufferLen, this.config.numChannels, this.config.numChannels);
 58 | 
 59 |         this.node.onaudioprocess = function (e) {
 60 |             if (!_this.recording) return;
 61 | 
 62 |             var buffer = [];
 63 |             for (var channel = 0; channel < _this.config.numChannels; channel++) {
 64 |                 buffer.push(e.inputBuffer.getChannelData(channel));
 65 |             }
 66 |             _this.worker.postMessage({
 67 |                 command: 'record',
 68 |                 buffer: buffer
 69 |             });
 70 |         };
 71 | 
 72 |         source.connect(this.node);
 73 |         this.node.connect(this.context.destination); //this should not be necessary
 74 | 
 75 |         var self = {};
 76 |         this.worker = new _inlineWorker2.default(function () {
 77 |             var recLength = 0,
 78 |                 recBuffers = [],
 79 |                 sampleRate = undefined,
 80 |                 numChannels = undefined;
 81 | 
 82 |             self.onmessage = function (e) {
 83 |                 switch (e.data.command) {
 84 |                     case 'init':
 85 |                         init(e.data.config);
 86 |                         break;
 87 |                     case 'record':
 88 |                         record(e.data.buffer);
 89 |                         break;
 90 |                     case 'exportWAV':
 91 |                         exportWAV(e.data.type);
 92 |                         break;
 93 |                     case 'getBuffer':
 94 |                         getBuffer();
 95 |                         break;
 96 |                     case 'clear':
 97 |                         clear();
 98 |                         break;
 99 |                 }
100 |             };
101 | 
102 |             function init(config) {
103 |                 sampleRate = config.sampleRate;
104 |                 numChannels = config.numChannels;
105 |                 initBuffers();
106 |             }
107 | 
108 |             function record(inputBuffer) {
109 |                 for (var channel = 0; channel < numChannels; channel++) {
110 |                     recBuffers[channel].push(inputBuffer[channel]);
111 |                 }
112 |                 recLength += inputBuffer[0].length;
113 |             }
114 | 
115 |             function exportWAV(type) {
116 |                 var buffers = [];
117 |                 for (var channel = 0; channel < numChannels; channel++) {
118 |                     buffers.push(mergeBuffers(recBuffers[channel], recLength));
119 |                 }
120 |                 var interleaved = undefined;
121 |                 if (numChannels === 2) {
122 |                     interleaved = interleave(buffers[0], buffers[1]);
123 |                 } else {
124 |                     interleaved = buffers[0];
125 |                 }
126 |                 var dataview = encodeWAV(interleaved);
127 |                 var audioBlob = new Blob([dataview], { type: type });
128 | 
129 |                 self.postMessage({ command: 'exportWAV', data: audioBlob });
130 |             }
131 | 
132 |             function getBuffer() {
133 |                 var buffers = [];
134 |                 for (var channel = 0; channel < numChannels; channel++) {
135 |                     buffers.push(mergeBuffers(recBuffers[channel], recLength));
136 |                 }
137 |                 self.postMessage({ command: 'getBuffer', data: buffers });
138 |             }
139 | 
140 |             function clear() {
141 |                 recLength = 0;
142 |                 recBuffers = [];
143 |                 initBuffers();
144 |             }
145 | 
146 |             function initBuffers() {
147 |                 for (var channel = 0; channel < numChannels; channel++) {
148 |                     recBuffers[channel] = [];
149 |                 }
150 |             }
151 | 
152 |             function mergeBuffers(recBuffers, recLength) {
153 |                 var result = new Float32Array(recLength);
154 |                 var offset = 0;
155 |                 for (var i = 0; i < recBuffers.length; i++) {
156 |                     result.set(recBuffers[i], offset);
157 |                     offset += recBuffers[i].length;
158 |                 }
159 |                 return result;
160 |             }
161 | 
162 |             function interleave(inputL, inputR) {
163 |                 var length = inputL.length + inputR.length;
164 |                 var result = new Float32Array(length);
165 | 
166 |                 var index = 0,
167 |                     inputIndex = 0;
168 | 
169 |                 while (index < length) {
170 |                     result[index++] = inputL[inputIndex];
171 |                     result[index++] = inputR[inputIndex];
172 |                     inputIndex++;
173 |                 }
174 |                 return result;
175 |             }
176 | 
177 |             function floatTo16BitPCM(output, offset, input) {
178 |                 for (var i = 0; i < input.length; i++, offset += 2) {
179 |                     var s = Math.max(-1, Math.min(1, input[i]));
180 |                     output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
181 |                 }
182 |             }
183 | 
184 |             function writeString(view, offset, string) {
185 |                 for (var i = 0; i < string.length; i++) {
186 |                     view.setUint8(offset + i, string.charCodeAt(i));
187 |                 }
188 |             }
189 | 
190 |             function encodeWAV(samples) {
191 |                 var buffer = new ArrayBuffer(44 + samples.length * 2);
192 |                 var view = new DataView(buffer);
193 | 
194 |                 /* RIFF identifier */
195 |                 writeString(view, 0, 'RIFF');
196 |                 /* RIFF chunk length */
197 |                 view.setUint32(4, 36 + samples.length * 2, true);
198 |                 /* RIFF type */
199 |                 writeString(view, 8, 'WAVE');
200 |                 /* format chunk identifier */
201 |                 writeString(view, 12, 'fmt ');
202 |                 /* format chunk length */
203 |                 view.setUint32(16, 16, true);
204 |                 /* sample format (raw) */
205 |                 view.setUint16(20, 1, true);
206 |                 /* channel count */
207 |                 view.setUint16(22, numChannels, true);
208 |                 /* sample rate */
209 |                 view.setUint32(24, sampleRate, true);
210 |                 /* byte rate (sample rate * block align) */
211 |                 view.setUint32(28, sampleRate * 4, true);
212 |                 /* block align (channel count * bytes per sample) */
213 |                 view.setUint16(32, numChannels * 2, true);
214 |                 /* bits per sample */
215 |                 view.setUint16(34, 16, true);
216 |                 /* data chunk identifier */
217 |                 writeString(view, 36, 'data');
218 |                 /* data chunk length */
219 |                 view.setUint32(40, samples.length * 2, true);
220 | 
221 |                 floatTo16BitPCM(view, 44, samples);
222 | 
223 |                 return view;
224 |             }
225 |         }, self);
226 | 
227 |         this.worker.postMessage({
228 |             command: 'init',
229 |             config: {
230 |                 sampleRate: this.context.sampleRate,
231 |                 numChannels: this.config.numChannels
232 |             }
233 |         });
234 | 
235 |         this.worker.onmessage = function (e) {
236 |             var cb = _this.callbacks[e.data.command].pop();
237 |             if (typeof cb == 'function') {
238 |                 cb(e.data.data);
239 |             }
240 |         };
241 |     }
242 | 
243 |     _createClass(Recorder, [{
244 |         key: 'record',
245 |         value: function record() {
246 |             this.recording = true;
247 |         }
248 |     }, {
249 |         key: 'stop',
250 |         value: function stop() {
251 |             this.recording = false;
252 |         }
253 |     }, {
254 |         key: 'clear',
255 |         value: function clear() {
256 |             this.worker.postMessage({ command: 'clear' });
257 |         }
258 |     }, {
259 |         key: 'getBuffer',
260 |         value: function getBuffer(cb) {
261 |             cb = cb || this.config.callback;
262 |             if (!cb) throw new Error('Callback not set');
263 | 
264 |             this.callbacks.getBuffer.push(cb);
265 | 
266 |             this.worker.postMessage({ command: 'getBuffer' });
267 |         }
268 |     }, {
269 |         key: 'exportWAV',
270 |         value: function exportWAV(cb, mimeType) {
271 |             mimeType = mimeType || this.config.mimeType;
272 |             cb = cb || this.config.callback;
273 |             if (!cb) throw new Error('Callback not set');
274 | 
275 |             this.callbacks.exportWAV.push(cb);
276 | 
277 |             this.worker.postMessage({
278 |                 command: 'exportWAV',
279 |                 type: mimeType
280 |             });
281 |         }
282 |     }], [{
283 |         key: 'forceDownload',
284 |         value: function forceDownload(blob, filename) {
285 |             var url = (window.URL || window.webkitURL).createObjectURL(blob);
286 |             var link = window.document.createElement('a');
287 |             link.href = url;
288 |             link.download = filename || 'output.wav';
289 |             var click = document.createEvent("Event");
290 |             click.initEvent("click", true, true);
291 |             link.dispatchEvent(click);
292 |         }
293 |     }]);
294 | 
295 |     return Recorder;
296 | })();
297 | 
298 | exports.default = Recorder;
299 | 
300 | },{"inline-worker":3}],3:[function(require,module,exports){
301 | "use strict";
302 | 
303 | module.exports = require("./inline-worker");
304 | },{"./inline-worker":4}],4:[function(require,module,exports){
305 | (function (global){
306 | "use strict";
307 | 
308 | var _createClass = (function () { function defineProperties(target, props) { for (var key in props) { var prop = props[key]; prop.configurable = true; if (prop.value) prop.writable = true; } Object.defineProperties(target, props); } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
309 | 
310 | var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
311 | 
312 | var WORKER_ENABLED = !!(global === global.window && global.URL && global.Blob && global.Worker);
313 | 
314 | var InlineWorker = (function () {
315 |   function InlineWorker(func, self) {
316 |     var _this = this;
317 | 
318 |     _classCallCheck(this, InlineWorker);
319 | 
320 |     if (WORKER_ENABLED) {
321 |       var functionBody = func.toString().trim().match(/^function\s*\w*\s*\([\w\s,]*\)\s*{([\w\W]*?)}$/)[1];
322 |       var url = global.URL.createObjectURL(new global.Blob([functionBody], { type: "text/javascript" }));
323 | 
324 |       return new global.Worker(url);
325 |     }
326 | 
327 |     this.self = self;
328 |     this.self.postMessage = function (data) {
329 |       setTimeout(function () {
330 |         _this.onmessage({ data: data });
331 |       }, 0);
332 |     };
333 | 
334 |     setTimeout(function () {
335 |       func.call(self);
336 |     }, 0);
337 |   }
338 | 
339 |   _createClass(InlineWorker, {
340 |     postMessage: {
341 |       value: function postMessage(data) {
342 |         var _this = this;
343 | 
344 |         setTimeout(function () {
345 |           _this.self.onmessage({ data: data });
346 |         }, 0);
347 |       }
348 |     }
349 |   });
350 | 
351 |   return InlineWorker;
352 | })();
353 | 
354 | module.exports = InlineWorker;
355 | }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
356 | },{}]},{},[1])(1)
357 | });
358 | 


--------------------------------------------------------------------------------
/08 Loading and recording/decodeAudioData/beat1.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreiss/Working-with-the-Web-Audio-API/25a2e41c01e11d553cb36bcaba09321e34425e7c/08 Loading and recording/decodeAudioData/beat1.mp3


--------------------------------------------------------------------------------
/08 Loading and recording/decodeAudioData/decodeWithFetch.html:
--------------------------------------------------------------------------------
 1 | <button id='play' onclick='context.resume()'>Play</button><br>
 2 | Playback rate<input id='playRate' type='range' min=0.3 max=3 step=0.05 value=1>
 3 | <script>
 4 |   let context = new AudioContext()
 5 |   let source = context.createBufferSource()
 6 |   source.start()
 7 |   source.connect(context.destination)
 8 |   fetch('beat1.mp3')
 9 |   .then(response => response.arrayBuffer())
10 |   .then(buffer => context.decodeAudioData(buffer))
11 |   .then(data => source.buffer = data)
12 |   playRate.oninput = () => source.playbackRate.value = playRate.value
13 | </script>
14 | 


--------------------------------------------------------------------------------
/08 Loading and recording/decodeAudioData/decodeWithRequest.html:
--------------------------------------------------------------------------------
 1 | <button id='play' onclick='context.resume()'>Play</button><br>
 2 | Playback rate<input id='playRate' type='range' min=0.3 max=3 step=0.05 value=1>
 3 | <script>
 4 |   let context = new AudioContext()
 5 |   let source = context.createBufferSource()
 6 |   source.connect(context.destination)
 7 |   source.start()
 8 |   let request = new XMLHttpRequest()
 9 |   request.open('get','beat1.mp3')
10 |   request.responseType = 'arraybuffer'
11 |   request.onload = () => {
12 |     context.decodeAudioData(request.response, data => source.buffer = data)
13 |   }
14 |   request.send()
15 |   playRate.oninput = () => source.playbackRate.value = playRate.value
16 | </script>
17 | 


--------------------------------------------------------------------------------
/08 Loading and recording/decodeAudioData/playbackMultipleInSequence.html:
--------------------------------------------------------------------------------
 1 | <button id='play' onclick='Start()'>Start()</button><br>
 2 | <script>
 3 |   let context = new AudioContext()
 4 |   let source1 = context.createBufferSource()
 5 |   let source2 = context.createBufferSource()
 6 |   source1.connect(context.destination)
 7 |   source2.connect(context.destination)
 8 |   fetch('track1.mp3')
 9 |   .then(response => response.arrayBuffer())
10 |   .then(buffer => context.decodeAudioData(buffer))
11 |   .then(data => source1.buffer = data)
12 |   fetch('track2.mp3')
13 |   .then(response => response.arrayBuffer())
14 |   .then(buffer => context.decodeAudioData(buffer))
15 |   .then(data => source2.buffer = data)
16 |   function Start() {
17 |     context.resume()
18 |     now = context.currentTime
19 |     source1.start(now)
20 |     source2.start(now+source1.buffer.duration)
21 |     context.resume()
22 |   }
23 | </script>
24 | 


--------------------------------------------------------------------------------
/08 Loading and recording/index.html:
--------------------------------------------------------------------------------
 1 | <h2>Loading and Recording</h2>
 2 | 
 3 | Essential functionality in the Web Audio API is the ability to play back audio from a stream or a file, and to 
 4 | record or stream the output of a node. Here, we introduce audio nodes that enable getting audio into an audio 
 5 | context from different sources, like media streams and media elements, as well as into buffers using decodeAudioData, 
 6 | and to different destinations, like media streams and audio files. Some of the functionality also relies on methods 
 7 | from outside the Web Audio API, like getUserMedia from the MediaStream API.
 8 | 
 9 | <ul>
10 |   <li>MediaElement
11 |   <ul>
12 |     <li><a href="MediaElement/SimpleMediaElement.html">SimpleMediaElement</a>: basic use of an <audio> media element, without the Web Audio API.
13 |     <li><a href="MediaElement/MediaElement.html">MediaElement.html</a>: use of a media element in an audio context.
14 |     <li><a href="MediaElement/MediaElement2.html">MediaElement2.html</a>: use of the MediaElementSourceNode with the audio() constructor.
15 |   <ul>
16 |   <li>decodeAudioData</a>: These examples show how we can fill an audio buffer source with audio from a file
17 |   <ul>
18 |     <li><a href="decodeAudioData/decodeWithRequest.html">decodeWithRequest.html</a>: use of decodeAudioData and XMLHttpRequest to load an audio file, and playbackRate to play it back at a variable rate.
19 |     <li><a href="decodeAudioData/decodeWithFetch.html">decodeWithFetch.html</a>: use of decodeAudioData and fetch() to load an audio file, and playbackRate to play it back at a variable rate.
20 |   </ul>
21 |   <li><a href="LevelMeter.html">LevelMeter</a>: Uses the MediaStreamAudioSourceNode tp provide a level meter for sound input from a microphone.
22 |   <li><a href="MediaElement/">MediaStreamToAudioBuffer</a>: shows how to take an excerpt of a media stream and use it as the audio buffer for an AudioBufferSourceNode
23 |   <li>Record an audio node
24 |   <ul>
25 |     <li><a href="Record an Audio Node/MediaRecorderExample.html">MediaRecorderExample</a>: use of the MediaRecorder to record an audio nodes
26 |     <li><a href="Record an Audio Node/RecorderExample.html">RecorderExample</a>: use of the recorder.js library to record an audio node
27 |   </ul>
28 | </ul>
29 | 
30 | Code examples correspond to examples from Chapter 08 of the book 'Working with the Web Audio API'.
31 | 
32 | Feel free to contact me at joshua.reiss@qmul.ac.uk
33 | 


--------------------------------------------------------------------------------
/09 OfflineAudioContext/OfflineContext.html:
--------------------------------------------------------------------------------
 1 | <h2>OfflineAudioContext</h2>
 2 | <button id='play' onclick='context.resume()'>Play</button><br>
 3 | <script>
 4 |   let context = new AudioContext()
 5 |   let offlineContext = new OfflineAudioContext(1,3*44100,44100)
 6 |   source = offlineContext.createOscillator()
 7 |   source.connect(offlineContext.destination)
 8 |   source.start()
 9 |   offlineContext.startRendering().then(data => {
10 |     let bufferedSource = context.createBufferSource()
11 |     bufferedSource.buffer = data
12 |     bufferedSource.connect(context.destination)
13 |     play.onclick = () => { bufferedSource.start() }
14 |   })
15 | </script>
16 | 


--------------------------------------------------------------------------------
/09 OfflineAudioContext/OfflineContext2.html:
--------------------------------------------------------------------------------
 1 | <h2>OfflineAudioContext</h2>
 2 | <audio controls id='audio'></audio>
 3 | <script src='bufferToWave.js'></script>
 4 | <script>
 5 |   let offlineContext = new OfflineAudioContext(1,44100*5,44100)
 6 |   source = offlineContext.createOscillator()
 7 |   source.connect(offlineContext.destination)
 8 |   source.start()
 9 |   offlineContext.startRendering().then(buffer => {
10 |     audio.src = URL.createObjectURL(bufferToWave(buffer, 0,44100*5))
11 |   })
12 | </script>
13 | 


--------------------------------------------------------------------------------
/09 OfflineAudioContext/OfflineContext3.html:
--------------------------------------------------------------------------------
 1 | <h2>OfflineAudioContext</h2>
 2 | <div id='progress'></div>
 3 | <script>
 4 |   duration=10
 5 |   var offlineContext = new OfflineAudioContext(1, duration*44100, 44100)
 6 |   offlineContext.onstatechange = function (event) {
 7 |     if (offlineContext.state === 'suspended') {
 8 |       var completed = 100*(offlineContext.currentTime/duration).toFixed(2)
 9 |       progress.innerHTML += completed + ' percent complete<br>'
10 |       offlineContext.resume()
11 |       if (offlineContext.currentTime + 2 < duration)
12 |         offlineContext.suspend(offlineContext.currentTime + 2)
13 |     }
14 |   }
15 |   offlineContext.suspend(2)
16 |   offlineContext.startRendering()
17 | </script>
18 | 


--------------------------------------------------------------------------------
/09 OfflineAudioContext/README.md:
--------------------------------------------------------------------------------
 1 | # OfflineAudioContext
 2 | 
 3 | The OfflineAudioContext renders an audio graph to a buffer as fast as it can.
 4 | 
 5 | We provide three examples of using the OfflineAudioContext;
 6 | 
 7 | - OfflineContext: rendering to a buffer much faster than real-time,
 8 | - OfflineContext2: recording the output of an offline audio graph without needing an additional online audio context, and
 9 | - OfflineContext3: providing a progress bar for rendering by suspending and resuming the offline context. This last example is especially useful for highly computational tasks where processing is much slower than real-time.
10 | 


--------------------------------------------------------------------------------
/09 OfflineAudioContext/bufferToWave.js:
--------------------------------------------------------------------------------
 1 |   // Convert audio-buffer segment to Blob using WAVE representation
 2 |   // Adapted from this answer: https://stackoverflow.com/questions/29584420/how-to-manipulate-the-contents-of-an-audio-tag-and-create-derivative-audio-tags
 3 |   function bufferToWave(abuffer, offset, len) {
 4 |     var numOfChan = abuffer.numberOfChannels,
 5 |         length = len * numOfChan * 2 + 44,
 6 |         buffer = new ArrayBuffer(length),
 7 |         view = new DataView(buffer),
 8 |         channels = [], i, sample,
 9 |         pos = 0;
10 |     // write WAVE header - total offset will be 44 bytes - see chart at http://soundfile.sapp.org/doc/WaveFormat/
11 |     setUint32(0x46464952);                         // 'RIFF'
12 |     setUint32(length - 8);                         // file length - 8
13 |     setUint32(0x45564157);                         // 'WAVE'
14 |     setUint32(0x20746d66);                         // 'fmt ' chunk
15 |     setUint32(16);                                 // length = 16
16 |     setUint16(1);                                  // PCM (uncompressed)
17 |     setUint16(numOfChan);
18 |     setUint32(abuffer.sampleRate);
19 |     setUint32(abuffer.sampleRate * 2 * numOfChan); // avg. bytes/sec
20 |     setUint16(numOfChan * 2);                      // block-align
21 |     setUint16(16);                                 // 16-bit (hardcoded in this demo)
22 | 
23 |     setUint32(0x61746164);                         // 'data' - chunk
24 |     setUint32(length - pos - 4);                   // chunk length
25 | 
26 |     // write interleaved data
27 |     for(i = 0; i < abuffer.numberOfChannels; i++)
28 |       channels.push(abuffer.getChannelData(i));
29 | 
30 |     while(pos < length) {
31 |       for(i = 0; i < numOfChan; i++) {             // interleave channels
32 |         sample = Math.max(-1, Math.min(1, channels[i][offset])); // clamp
33 |         sample = (0.5 + sample < 0 ? sample * 32768 : sample * 32767)|0; // scale to 16-bit signed int
34 |         view.setInt16(pos, sample, true);          // update data chunk
35 |         pos += 2;
36 |       }
37 |       offset++                                     // next source sample
38 |     }
39 | 
40 |     // create Blob
41 |     return new Blob([buffer], {type: 'audio/wav'});
42 | 
43 |     function setUint16(data) {
44 |       view.setUint16(pos, data, true);
45 |       pos += 2;
46 |     }
47 | 
48 |     function setUint32(data) {
49 |       view.setUint32(pos, data, true);
50 |       pos += 4;
51 |     }
52 |   }
53 | 


--------------------------------------------------------------------------------
/09 OfflineAudioContext/index.html:
--------------------------------------------------------------------------------
 1 | <h2>OfflineAudioContext</h2>
 2 | 
 3 | The OfflineAudioContext renders an audio graph to a buffer as fast as it can.
 4 | 
 5 | We provide three examples of using the OfflineAudioContext;
 6 | 
 7 | <ol>
 8 |    <li><a href="OfflineContext.html">OfflineContext</a>: rendering to a buffer much faster than real-time
 9 |    <li><a href="OfflineContext2.html">OfflineContext2</a>: recording the output of an offline audio graph without needing an additional online audio context, and
10 |    <li><a href="OfflineContext3.html">OfflineContext3</a>: providing a progress bar for rendering by suspending and resuming the offline context. This last example is especially useful for highly computational tasks where processing is much slower than real-time.
11 | </ol>
12 | 
13 | Code examples correspond to examples from Chapter 09 the book 'Working with the Web Audio API'.
14 | 
15 | Feel free to contact me at joshua.reiss@qmul.ac.uk
16 | 


--------------------------------------------------------------------------------
/10 Delay/KarplusStrong/KarplusStrong.html:
--------------------------------------------------------------------------------
 1 | <p>Source</p>
 2 | <select id='Source'>
 3 |   <option value='noise'>Noise</option>
 4 |   <option value='sine'>Sine</option>
 5 |   <option value='sawtooth'>Sawtooth</option>
 6 |   <option value='triangle'>Triangle</option>
 7 |   <option value='square'>Square</option>
 8 | </select>
 9 | <p>Decay</p>
10 | <input type='range' min=0.8 max='0.999' value='0.9' step='any' id='Decay'>
11 | <span id='DecayLabel'></span>
12 | <p>Delay (ms)</p>
13 | <input type='range' min=0 max=20 value=10 step='any' id='Delay'>
14 | <span id='DelayLabel'></span>
15 | <p>Width (ms)</p>
16 | <input type='range' min=0 max='20' value=10 step='any' id='Width'>
17 | <span id='WidthLabel'></span>
18 | <p>Cut-off Frequency (Hz)</p>
19 | <input type='range' min=0 max='10000' value='10000' step='any' id='Freq'>
20 | <span id='Freq label'></span>
21 | <p></p>
22 | <input type='button' value='play' id='Play'>
23 | <script src='KarplusStrong.js'></script>
24 | 


--------------------------------------------------------------------------------
/10 Delay/KarplusStrong/KarplusStrong.js:
--------------------------------------------------------------------------------
 1 | var context = new AudioContext
 2 | let Noise = new AudioBufferSourceNode(context,{loop:true}),
 3 |     NoiseGain = new GainNode(context,{gain:0}),
 4 |     delay= new DelayNode(context,{delayTime:0.001}),
 5 |     feedbackGain= new GainNode(context,{gain:0.8})
 6 | Noise.buffer = context.createBuffer(1,context.sampleRate,context.sampleRate)
 7 | for (i=0;i<context.sampleRate;i++) 
 8 |   Noise.buffer.getChannelData(0)[i] = 2*Math.random()-1
 9 | Noise.start()    
10 | Noise.connect(NoiseGain)
11 | NoiseGain.connect(context.destination)
12 | NoiseGain.connect(delay)
13 | delay.connect(feedbackGain)
14 | feedbackGain.connect(delay)
15 | feedbackGain.connect(context.destination)
16 | Decay.oninput = function() {
17 |   feedbackGain.gain.value=this.value
18 |   DecayLabel.innerHTML = this.value
19 | }
20 | Delay.oninput = function() {
21 |   delay.delayTime.value=0.001*this.value
22 |   DelayLabel.innerHTML = this.value
23 | }
24 | Width.oninput = function() { WidthLabel.innerHTML = this.value}
25 | Play.onclick = function() {
26 |   context.resume()
27 |   let now = context.currentTime
28 |   NoiseGain.gain.setValueAtTime(0.5, now)
29 |   NoiseGain.gain.linearRampToValueAtTime(0, now + Width.value/1000)
30 | }
31 | 


--------------------------------------------------------------------------------
/10 Delay/README.md:
--------------------------------------------------------------------------------
1 | # Delay
2 | 
3 | Here, we look at the DelayNode in the Web Audio API. We  give three examples;
4 | 
5 | - simple summing of a source and a delayed copy to produce comb filtering,
6 | - implementation of a Vibrato effect, by modulating a delay line with a low frequency oscillator,
7 | - feedback delay based on routing the output of the delay node back to the input,
8 | - the Karplus-Strong algorithm for producing the sound of a plucked string. This also demonstrates a limitation of the DelayNode when used in a feedback loop.
9 | 


--------------------------------------------------------------------------------
/10 Delay/Vibrato/trumpet.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreiss/Working-with-the-Web-Audio-API/25a2e41c01e11d553cb36bcaba09321e34425e7c/10 Delay/Vibrato/trumpet.wav


--------------------------------------------------------------------------------
/10 Delay/Vibrato/vibrato.html:
--------------------------------------------------------------------------------
1 | <audio id='file' controls loop onplay='context.resume()'>
2 |   <source src='trumpet.wav'>
3 | </audio>
4 | <br>Vibrato Depth
5 | <input type='range' min=0 max=0.05 value=0 step='any' id='Depth' oninput='Update()'>
6 | <br>Vibrato Frequency
7 | <input type='range' min=0.5 max=8 value=5 step='any' id='LFO_F' oninput='Update()'>
8 | 


--------------------------------------------------------------------------------
/10 Delay/Vibrato/vibrato.js:
--------------------------------------------------------------------------------
 1 | let context= new AudioContext()
 2 | let source = context.createMediaElementSource(file)
 3 | let delay= new DelayNode(context,{delayTime:1,maxDelayTime:10})
 4 | let LFOgain= new GainNode(context,{gain:0})
 5 | let LFO = new OscillatorNode(context,{frequency:2})
 6 | LFO.start()
 7 | source.connect(delay)
 8 | LFO.connect(LFOgain).connect(delay.delayTime)
 9 | delay.connect(context.destination)
10 | function Update() {
11 |   LFO.frequency.value = LFOfreq.value
12 |   LFOgain.gain.value = Depth.value / (2*Math.PI*LFOfreq.value)
13 | }
14 | 


--------------------------------------------------------------------------------
/10 Delay/combFilter.html:
--------------------------------------------------------------------------------
 1 | <p>Frequency</p>
 2 | <input type='number' min=50 max=1000 value=440 step='any' id='Frequency'>
 3 | <p>Delay (ms)</p>
 4 | <input type='number' min=0.001 max=0.01 value=0.005 step=0.001 id='Delay'>
 5 | <input type='button' value='play' onclick='context.resume()' id='Play'>
 6 | <script>
 7 |   var context = new AudioContext()
 8 |   let tone = new OscillatorNode(context,{frequency:440})
 9 |   let delay= new DelayNode(context,{delayTime:0.005})
10 |   tone.start()
11 |   tone.connect(delay)
12 |   tone.connect(context.destination)
13 |   delay.connect(context.destination)
14 |   Delay.oninput = () => delay.delayTime.value = Delay.value
15 |   Frequency.oninput = () => tone.frequency.value = Frequency.value
16 | </script>
17 | 


--------------------------------------------------------------------------------
/10 Delay/doppler.html:
--------------------------------------------------------------------------------
 1 | <button id='play1' onclick='Start1()'>Start</button><br>
 2 | <button id='play2' onclick='Start2()'>Start2</button><br>
 3 | <script>
 4 |   let context= new AudioContext()
 5 |   let c= 343 // Speed of sound = 343 m/s
 6 |   function Start1() {
 7 |     context.resume()
 8 |     let delay= new DelayNode(context,{delayTime:1,maxDelayTime:10})
 9 |     let source = new OscillatorNode(context)
10 |     source.connect(delay).connect(context.destination)
11 |     let now = context.currentTime
12 |     delay.delayTime.setValueAtTime(1, now + 2)
13 |     delay.delayTime.linearRampToValueAtTime(0,now + 4)
14 |     delay.delayTime.linearRampToValueAtTime(1,now + 6)
15 |     delay.delayTime.setValueAtTime(1, now + 6)
16 |     source.start()
17 |   }
18 |   function Start2() {
19 |     context.resume()
20 |     let delay= new DelayNode(context,{delayTime:1,maxDelayTime:10})
21 |     let gain= new GainNode(context)
22 |     let source = new OscillatorNode(context)
23 |     source.connect(delay).connect(gain).connect(context.destination)
24 |     var Array = new Float32Array(201)
25 |     v = 20 // speed 20 meters per second in x direction
26 |     Duration = 4
27 |     x0 = -40
28 |     y = 20
29 |     for (i=0;i<201;i++) {
30 |       increment = Duration / 200
31 |       time = i * increment
32 |       x = x0 + time * v
33 |       distance = Math.sqrt(x*x + y*y)
34 |       Array[i] = distance / c
35 |       console.log(i,time,x)
36 |     }
37 |     let now = context.currentTime
38 |     delay.delayTime.setValueCurveAtTime(Array, now, Duration)
39 |     gain.gain.setValueAtTime(0,now+4)
40 |     source.start()
41 |   }
42 | </script>
43 | 


--------------------------------------------------------------------------------
/10 Delay/feedbackDelay.html:
--------------------------------------------------------------------------------
 1 | <p>Gain</p>
 2 | <input type='range' min=0.5 max=0.99 value=0.8 step='any' id='Gain'>
 3 | <p>Delay (ms)</p>
 4 | <input type='range' min=0.04 max=0.2 value=0.08 step='any' id='Delay'>
 5 | <input type='button' value='play' onclick='context.resume()' id='Play'>
 6 | <script>
 7 |   var context = new AudioContext()
 8 |   let tone = new OscillatorNode(context,{frequency:2000})
 9 |   tone.start()
10 |   toneGain = new GainNode(context,{gain:0})
11 |   var delay= new DelayNode(context,{delayTime:0.08})
12 |   var feedback= new GainNode(context,{gain:0.8})
13 |   tone.connect(toneGain)
14 |   toneGain.connect(delay)
15 |   delay.connect(feedback)
16 |   feedback.connect(delay)
17 |   delay.connect(context.destination)
18 |   Delay.oninput = () =>  delay.delayTime.value = Delay.value
19 |   Gain.oninput = () => feedback.gain.value = Gain.value
20 |   Play.onclick = () => {
21 |     context.resume()
22 |     let now = context.currentTime
23 |     toneGain.gain.setValueAtTime(1, now)
24 |     toneGain.gain.linearRampToValueAtTime(0, now + 0.05)
25 |   }
26 | </script>
27 | 


--------------------------------------------------------------------------------
/10 Delay/index.html:
--------------------------------------------------------------------------------
 1 | <h2>Delay</h2>
 2 | 
 3 | Here, we look at the DelayNode in the Web Audio API. We give four examples;
 4 | 
 5 | <ol>
 6 |    <li><a href="combFilter.html">Comb filter</a>: simple summing of a source and a delayed copy to produce comb filtering
 7 |    <li><a href="Vibrato/vibrato.html">Vibrato</a>: implementation of a Vibrato effect, by modulating a delay line with a low frequency oscillator
 8 |    <li><a href="feedbackDelay.html">Feedback delay</a>: implementation of a Vibrato effect, by modulating a delay line with a low frequency oscillator
 9 |    <li><a href="KarplusStrong/KarplusStrong.html">Karplus-Strong</a>: the Karplus-Strong algorithm for producing the sound of a plucked string. 
10 |       This also demonstrates a limitation of the DelayNode when used in a feedback loop.
11 | </ol>
12 | 
13 | Code examples correspond to examples from Chapter 10 the book 'Working with the Web Audio API'.
14 | 
15 | Feel free to contact me at joshua.reiss@qmul.ac.uk
16 | 


--------------------------------------------------------------------------------
/11 Filters/BiquadFilterNode/biquad.html:
--------------------------------------------------------------------------------
 1 | <button id='start'>Make noise</button>
 2 | <canvas id='canvas' width='600' height ='300' style='border:1px solid'></canvas><br>
 3 | <select id='Type' oninput='UICallback()'>
 4 |   <option value='lowpass'>lowpass</option>
 5 |   <option value='highpass'>highpass</option>
 6 |   <option value='bandpass'>bandpass</option>
 7 |   <option value='lowshelf'>lowshelf</option>
 8 |   <option value='highshelf'>highshelf</option>
 9 |   <option value='peaking'>peaking</option>
10 |   <option value='notch'>notch</option>
11 |   <option value='allpass'>allpass</option>
12 | </select>
13 | <br>Frequency<br>
14 | <input id='Frequency' type='range' max=10000 value=800 oninput='UICallback()'>
15 | <br>Q<br>
16 | <input id='Q' type='range' min=-50 max=50 value=1 step='any' oninput='UICallback()'>
17 | <br>Gain<br>
18 | <input id='Gain' type='range' min=1 max=20 value=1 oninput='UICallback()'>
19 | <script src='biquad.js'></script>
20 | 


--------------------------------------------------------------------------------
/11 Filters/BiquadFilterNode/biquad.js:
--------------------------------------------------------------------------------
 1 | var audioContext = new AudioContext()
 2 | var canvasContext = canvas.getContext('2d')
 3 | var nFreqs = 100,
 4 |     Freqs = new Float32Array(nFreqs),
 5 |     Mags = new Float32Array(nFreqs),
 6 |     Phases = new Float32Array(nFreqs)
 7 | for (var i=0;i<nFreqs;++i) Freqs[i] = 20000/nFreqs*(i+1)
 8 | var biquadFilter = new BiquadFilterNode(audioContext,{frequency:1000,Q:1,gain:1})
 9 | function UICallback() {
10 |   biquadFilter.frequency.value = Frequency.value
11 |   biquadFilter.Q.value = Q.value
12 |   biquadFilter.gain.value = Gain.value
13 |   biquadFilter.type = Type.value
14 |   biquadFilter.getFrequencyResponse(Freqs,Mags,Phases)
15 |   canvasContext.clearRect(0,0,canvas.width,canvas.height)
16 |   canvasContext.beginPath()
17 |   for (let i=0;i<nFreqs;++i) 
18 |     canvasContext.lineTo(canvas.width*i/nFreqs,canvas.height-Mags[i]*90)
19 |   canvasContext.stroke()
20 | }
21 | start.onclick = () => {
22 |   audioContext.resume()
23 |   let source = new AudioBufferSourceNode(audioContext,{loop:true})
24 |   let nFrames = audioContext.sampleRate
25 |   source.buffer = audioContext.createBuffer(1,nFrames,audioContext.sampleRate)
26 |   for (i=0;i<nFrames;i++) source.buffer.getChannelData(0)[i] = 2*Math.random()-1
27 |   source.connect(biquadFilter).connect(audioContext.destination)
28 |   source.start()
29 | }
30 | 


--------------------------------------------------------------------------------
/11 Filters/IIRFilterNode/IIRFilter.html:
--------------------------------------------------------------------------------
 1 | <audio controls id='file' onplay='audioCtx.resume()'>
 2 |   <source src='flange love.mp3'>
 3 | </audio>
 4 | <input type='checkbox' id='filterCheck'>Filtering<br>
 5 | <section class='filterGraph' id='graph' style='width: 60vw; height: 40vw;'>
 6 |   <canvas id='canvas'>
 7 | </section>
 8 | <script src='audio.js'></script>
 9 | <script src='graphics.js'></script>
10 | 


--------------------------------------------------------------------------------
/11 Filters/IIRFilterNode/audio.js:
--------------------------------------------------------------------------------
 1 | const audioCtx=new AudioContext()
 2 | let FF= [0.00011314198115,  0.00033942594344, 0.00033942594344, 0.00011314198115],
 3 |     FB= [3.88183838983223,-11.15778893207433,10.70022228815451,-3.42336661006324]
 4 | const nFreqs=30
 5 | let Freqs=new Float32Array(nFreqs),
 6 |     Mags=new Float32Array(nFreqs),
 7 |     Phases=new Float32Array(nFreqs)
 8 | Freqs=Freqs.map(function(item,index) {return Math.pow(1.4,index)})
 9 | const iirfilter=audioCtx.createIIRFilter(FF,FB)
10 | let source = audioCtx.createMediaElementSource(file)
11 | source.connect(audioCtx.destination)
12 | filterCheck.addEventListener('click', function() {
13 |   source.disconnect()
14 |   if (filterCheck.checked) source.connect(iirfilter).connect(audioCtx.destination)
15 |   else source.connect(audioCtx.destination)
16 | })
17 | iirfilter.getFrequencyResponse(Freqs, Mags, Phases)
18 | 


--------------------------------------------------------------------------------
/11 Filters/IIRFilterNode/flange love.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreiss/Working-with-the-Web-Audio-API/25a2e41c01e11d553cb36bcaba09321e34425e7c/11 Filters/IIRFilterNode/flange love.mp3


--------------------------------------------------------------------------------
/11 Filters/IIRFilterNode/graphics.js:
--------------------------------------------------------------------------------
 1 | // set 2d context and set dimensions
 2 | const canvasCtx=canvas.getContext('2d')
 3 | const width=graph.offsetWidth,height=graph.offsetHeight
 4 | canvas.width=width,canvas.height=height
 5 | canvasCtx.fillStyle='white'
 6 | canvasCtx.fillRect(0,0,width,height)
 7 | // draw & label axes
 8 | const spacing=width/16
 9 | const fontSize=Math.floor(spacing/1.5)
10 | canvasCtx.beginPath()
11 | canvasCtx.moveTo(spacing,spacing)
12 | canvasCtx.lineTo(spacing,height-spacing)
13 | canvasCtx.lineTo(width-spacing,height-spacing)
14 | canvasCtx.stroke()
15 | canvasCtx.font=fontSize+'px sans-serif'
16 | canvasCtx.fillStyle='black'
17 | canvasCtx.fillText('1',spacing-fontSize,spacing+fontSize)
18 | canvasCtx.fillText('g',spacing-fontSize,(height-spacing+fontSize)/2)
19 | canvasCtx.fillText('0',spacing-fontSize,height-spacing+fontSize)
20 | canvasCtx.fillText('Hz',width/2,height-spacing+fontSize)
21 | canvasCtx.fillText('Fs/2',width-spacing-10,height-spacing+fontSize)
22 | canvasCtx.beginPath()// plot graph
23 | canvasCtx.moveTo(spacing,height-Mags[0]*(height-2*spacing)-spacing)
24 | for(let i=1; i < Mags.length; i++)
25 |   canvasCtx.lineTo(width*i/nFreqs,height-Mags[i]*(height-2*spacing)-spacing)
26 | canvasCtx.stroke()
27 | 


--------------------------------------------------------------------------------
/11 Filters/Instability/BiquadInstability.html:
--------------------------------------------------------------------------------
 1 | <button onclick='context.resume()'>Start</button>
 2 | <input type='range' id='modFreq' min=0 max=1000 step='any' value=100>
 3 | <script>
 4 |   var context = new AudioContext()
 5 |   var osc1 = new OscillatorNode(context,{frequency:80})
 6 |   osc1.start()
 7 |   var filter = new BiquadFilterNode(context,{frequency:200})
 8 |   var osc2 = new OscillatorNode(context,{frequency:100})
 9 |   osc2.start()
10 |   var modGain = new GainNode(context,{gain:3600})
11 |   osc1.connect(filter)
12 |   osc2.connect(modGain).connect(filter.detune)
13 |   filter.connect(context.destination)
14 |   modFreq.onchange = function() { osc2.frequency.value = this.value }
15 | </script>
16 | 


--------------------------------------------------------------------------------
/11 Filters/Instability/IIRInstability.html:
--------------------------------------------------------------------------------
 1 | <input type='number' id='Coef' min=0 max=2 step='0.05' value=0>Coefficient
 2 | <audio controls id='file' loop onplay='context.resume()'>
 3 | <source src='flange love.mp3'>
 4 | </audio>
 5 | <script>
 6 |   const context=new AudioContext()
 7 |   let FF= [1,0], FB= [1,0]
 8 |   let iirfilter=context.createIIRFilter(FF,FB)
 9 |   let source = context.createMediaElementSource(file)
10 |   source.connect(iirfilter).connect(context.destination)
11 |   Coef.onchange = () =>{
12 |     FB[1] = -Coef.value
13 |     iirfilter=context.createIIRFilter(FF,FB)
14 |     source.disconnect()
15 |     source.connect(iirfilter).connect(context.destination)
16 |   }
17 | </script>
18 | 


--------------------------------------------------------------------------------
/11 Filters/Instability/flange love.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreiss/Working-with-the-Web-Audio-API/25a2e41c01e11d553cb36bcaba09321e34425e7c/11 Filters/Instability/flange love.mp3


--------------------------------------------------------------------------------
/11 Filters/README.md:
--------------------------------------------------------------------------------
 1 | # filters
 2 | 
 3 | These examples cover design, use and visualisation of filters in the Web Audio API. They focus on two audio nodes, the BiquadFilterNode and IIRFilterNode.
 4 | 
 5 | - BiquadFilterNode: Visualises all the filter types for the BiquadFilterNode, as well as how changing filter parameters affects the filter's magnitude response.
 6 | - IIRFilterNode: Visualise and listen to audio with a third order lowpass filter applied.
 7 | - Instability: contains two examples showing how IIR filters can go unstable, and in unusual conditions, the biquad filter can become unstable.
 8 |   - IIRInstability: a simple first order filter that goes unstable as the feedback term is increased (pole moves outside the unit circle)
 9 |   - BiquadInstability: showing how changing filter parameters very, very rapidly can lead to instability in a BiquadFilterDesign
10 | 


--------------------------------------------------------------------------------
/11 Filters/index.html:
--------------------------------------------------------------------------------
 1 | <h2>Filters</h2>
 2 | 
 3 | These examples cover design, use and visualisation of filters in the Web Audio API. They focus on two audio nodes, the BiquadFilterNode and IIRFilterNode.
 4 | 
 5 | <ol>
 6 |   <li><a href="BiquadFilterNode/biquad.html">BiquadFilterNode</a>: Visualises all the filter types for the BiquadFilterNode, as well as how changing filter parameters affects the filter's magnitude response.
 7 |   <li><a href="IIRFilterNode/IIRFilter.html">IIRFilterNode</a>: Visualise and listen to audio with a third order lowpass filter applied.
 8 |   <li>Instability: contains two examples showing how IIR filters can go unstable, and in unusual conditions, the biquad filter can become unstable.
 9 |   </li>
10 |   <ul>
11 |     <li><a href="Instability/IIRInstability.html">IIRInstability</a>: a simple first order filter that goes unstable as the feedback term is increased (pole moves outside the unit circle)
12 |       <li><a href="Instability/BiquadInstability.html">BiquadInstability</a>: showing how changing filter parameters very, very rapidly can lead to instability in a BiquadFilterDesign
13 |   </ul>   
14 | </ol>
15 | 
16 | Code examples correspond to examples from Chapter 11 in the book 'Working with the Web Audio API'.
17 | 
18 | Feel free to contact me at joshua.reiss@qmul.ac.uk
19 | 


--------------------------------------------------------------------------------
/12 Waveshaper/BitCrusher.html:
--------------------------------------------------------------------------------
 1 | <button id='Start' onclick='context.resume()'>start</button>
 2 | <p>Bit depth</p>
 3 | <input type='range' min=1 max=4 value=3 step=1 id='nBits'><br>
 4 | <script>
 5 |   var context = new AudioContext()
 6 |   var source = new OscillatorNode(context)
 7 |   var bitCrusher = new WaveShaperNode(context)
 8 |   source.connect(bitCrusher).connect(context.destination)
 9 |   source.start()
10 |   nBits.oninput = () => {
11 |     var x,nSamples = 65536,curve = new Float32Array(nSamples)
12 |     var nLevels=Math.pow(2,nBits.value)
13 |     for (n=0;n<nSamples;++n) {
14 |       x = n*nLevels/nSamples
15 |       y = Math.floor(x)
16 |       curve[n] = (2*y+1)/nLevels-1
17 |     }
18 |     bitCrusher.curve=curve
19 |   }
20 | </script>
21 | 


--------------------------------------------------------------------------------
/12 Waveshaper/Clipper.html:
--------------------------------------------------------------------------------
 1 | <button id='Start' onclick='context.resume()'>start</button>
 2 | <p>Clipping Threshold</p>
 3 | <input type='range' max=1 step='any' value='1' id='Threshold'>
 4 | <script>
 5 |   var context = new AudioContext()
 6 |   var source = new OscillatorNode(context)
 7 |   var clipper = new WaveShaperNode(context)
 8 |   source.connect(clipper).connect(context.destination)
 9 |   source.start()
10 |   Threshold.oninput = function() {
11 |     var x,nSamples = 100,curve = new Float32Array(nSamples)
12 |     for (let i=0;i<nSamples;++i) {
13 |       x = 2*i/nSamples-1 // x goes from -1 to +1
14 |       if (Math.abs(x)>this.value) curve[i]=this.value*Math.sign(x)
15 |       else curve[i]=x
16 |     }
17 |     clipper.curve=curve
18 |   }
19 | </script>
20 | 


--------------------------------------------------------------------------------
/12 Waveshaper/README.md:
--------------------------------------------------------------------------------
1 | # Waveshaper
2 | 
3 | - Clipper: This simply clips an audio signal so that all output samples are in the range -1 to +1
4 | - BitCrusher: This quantises samples to be represented with 2^N levels, where N is some number of bits. It reduces the perceived bit depth in a signal.
5 | 


--------------------------------------------------------------------------------
/12 Waveshaper/index.html:
--------------------------------------------------------------------------------
 1 | <h2>Waveshaper</h2>
 2 | 
 3 | Two code examples are provided.
 4 | 
 5 | <ol>
 6 |    <li><a href="Clipper.html">Clipper</a>: his simply clips an audio signal so that all output samples are in the range -1 to +1
 7 |    <li><a href="BitCrusher.html">BitCrusher</a>: This quantises samples to be represented with 2^N levels, where N is some number of bits. It reduces the perceived bit depth in a signal.
 8 | </ol>
 9 | 
10 | Code examples correspond to examples from Chapter 12 in the book 'Working with the Web Audio API'.
11 | 
12 | Feel free to contact me at joshua.reiss@qmul.ac.uk
13 | 


--------------------------------------------------------------------------------
/13 Dynamic Range Compression/Attack and release/AttackRelease.html:
--------------------------------------------------------------------------------
 1 | <canvas id='canvas' width=600 height=300 style='border:1px solid'></canvas><br>
 2 | <button id='Start' onclick='audioContext.resume()'>Start</button><br>
 3 | <input type='range' min=0 max=1 value='0.1' step='any' id='Attack'>Attack<br>
 4 | <input type='range' min=0 max=1 value='0.1' step='any' id='Release'>Release<br>
 5 | <button id='Show'>Show</button>
 6 | <script>
 7 |   let canvasContext= canvas.getContext('2d')
 8 |   let audioContext= new AudioContext()
 9 |   let source= audioContext.createConstantSource()
10 |   source.start()
11 |   let compressor= audioContext.createDynamicsCompressor()
12 |   source.connect(compressor).connect(audioContext.destination)
13 |   Attack.oninput = () => compressor.attack.value = Attack.value
14 |   Release.oninput = () => compressor.release.value = Release.value
15 | </script>
16 | <script src='AttackRelease.js'></script>
17 | 


--------------------------------------------------------------------------------
/13 Dynamic Range Compression/Attack and release/AttackRelease.js:
--------------------------------------------------------------------------------
 1 | function linearTodB(x) { return 20*Math.log10(x) }
 2 | function dBtoLinear(x) { return Math.pow(10,x/20) }
 3 | Show.onclick = function() {
 4 |   let now = audioContext.currentTime
 5 |   source.offset.setValueAtTime(dBtoLinear(-20), now)
 6 |   source.offset.setValueAtTime(1, now + 0.33)
 7 |   source.offset.setValueAtTime(dBtoLinear(-20), now + 0.67)
 8 |   canvasContext.clearRect(0, 0, canvas.width, canvas.height)
 9 |   var x,xPrev,yIn,yInPrev,yOut,yOutPrev
10 |   var xScale = canvas.width, yScale = - canvas.height / 30
11 |   function plotLoop() {
12 |     xPrev=x, yOutPrev=yOut, yInPrev=yIn
13 |     x = xScale*(audioContext.currentTime - now)
14 |     yIn = yScale*linearTodB(source.offset.value)
15 |     yOut = yIn + yScale*compressor.reduction
16 |     canvasContext.beginPath()
17 |     canvasContext.strokeStyle = 'black'
18 |     canvasContext.moveTo(xPrev,yInPrev)
19 |     canvasContext.lineTo(x,yIn)
20 |     canvasContext.stroke()
21 |     canvasContext.beginPath()
22 |     canvasContext.strokeStyle = 'purple'
23 |     canvasContext.moveTo(xPrev,yOutPrev)
24 |     canvasContext.lineTo(x,yOut)
25 |     canvasContext.stroke()
26 |     if (audioContext.currentTime<now+1)  requestAnimationFrame(plotLoop)
27 |   }
28 |   plotLoop()
29 | }
30 | 


--------------------------------------------------------------------------------
/13 Dynamic Range Compression/Compressor/compressor.html:
--------------------------------------------------------------------------------
 1 | <button onclick='context.resume()'>Start</button>
 2 | <button active='false' id='compress'>Add compression</button><br>
 3 | <canvas id='canvas' width='10' height='100' ></canvas><br>
 4 | <input id='Threshold' type='range' min=-100 max=0 value=-20>Threshold<br>
 5 | <input id='Ratio' type='range' min=1 max=20 value=12>Ratio<br>
 6 | <input id='Knee' type='range' min=0 max=40 value=0>Knee<br>
 7 | <input id='Attack' type='range' min=0 max=1000 value=0>Attack<br>
 8 | <input id='Release' type='range' min=0 max=1000 value=5>Release
 9 | <script src='compressor.js'></script>
10 | 


--------------------------------------------------------------------------------
/13 Dynamic Range Compression/Compressor/compressor.js:
--------------------------------------------------------------------------------
 1 | let context= new AudioContext()
 2 | const source1 = new OscillatorNode(context)
 3 | const source2 = new OscillatorNode(context,{frequency:0.25})
 4 | const gainNode = new GainNode(context)
 5 | const compressor = new DynamicsCompressorNode(context,
 6 |   {threshold:-20,knee:0,ratio:12,attack:0.002,release:0.005})
 7 | source1.start()
 8 | source2.start()
 9 | source1.connect(gainNode)
10 | source2.connect(gainNode.gain)
11 | gainNode.connect(context.destination)
12 | let canvasContext= canvas.getContext('2d')
13 | function draw() {
14 |   requestAnimationFrame(draw)
15 |   canvasContext.clearRect(0,0,canvas.width,canvas.height)
16 |   canvasContext.fillRect(0,100*(1+compressor.reduction/25),5,100)
17 | }
18 | draw()
19 | compress.onclick = function() {
20 |   if(compress.getAttribute('active') === 'false') {
21 |     compress.setAttribute('active', 'true')
22 |     compress.innerHTML = 'Remove compression'
23 |     gainNode.disconnect(context.destination)
24 |     gainNode.connect(compressor).connect(context.destination)
25 |   } else {
26 |     compress.setAttribute('active', 'false')
27 |     compress.innerHTML = 'Add compression'
28 |     gainNode.disconnect(compressor)
29 |     compressor.disconnect(context.destination)
30 |     gainNode.connect(context.destination)
31 |   }
32 | }
33 | Threshold.oninput = () => compressor.threshold.value = Threshold.value
34 | Ratio.oninput = () => compressor.ratio.value = Ratio.value
35 | Knee.oninput = () => compressor.knee.value = Knee.value
36 | Attack.oninput = () => compressor.AttackRelease.value = Attack.value
37 | Release.oninput = () => compressor.release.value = Release.value
38 | 


--------------------------------------------------------------------------------
/13 Dynamic Range Compression/README.md:
--------------------------------------------------------------------------------
1 | # Dynamic Range compression
2 | 
3 | These examples illustrate use of the DynamicsCompressorNode
4 | 
5 | - Attack and release: shows how to visualize the effect of varying the ballistics, that is, the compressor's attack and release parameters.
6 | - Compressor: shows a compressor in action. It displays a meter of the gain reduction while a user changes the parameters of a compressor that is applied to a source.
7 | 


--------------------------------------------------------------------------------
/13 Dynamic Range Compression/index.html:
--------------------------------------------------------------------------------
 1 | <h2>Dynamic Range Compression</h2>
 2 | 
 3 | These examples illustrate use of the DynamicsCompressorNode
 4 | 
 5 | Two code examples are provided.
 6 | 
 7 | <ol>
 8 |    <li><a href="Attack and release/AttackRelease.html">Attack and release</a>: shows how to visualize the effect of varying the ballistics, that is, the compressor's attack and release parameters.
 9 |    <li><a href="Compressor/compressor.html">Compressor</a>: shows a compressor in action. It displays a meter of the gain reduction while a user changes the parameters of a compressor that is applied to a source.
10 | </ol>
11 | 
12 | Code examples correspond to examples from Chapter 13 in the book 'Working with the Web Audio API'.
13 | 
14 | Feel free to contact me at joshua.reiss@qmul.ac.uk
15 | 


--------------------------------------------------------------------------------
/14 Reverb/ConvolutionReverb.html:
--------------------------------------------------------------------------------
 1 | Reverb: <input type='checkbox' id='ReverbCheck'><p>
 2 | <button id='Start'>start</button>
 3 | <script>
 4 |   var context = new AudioContext()
 5 |   var source = new OscillatorNode(context,{type:'sine'})
 6 |   var amplitude = new GainNode(context,{gain:0})
 7 |   var impulse=impulseResponse(3,1)
 8 |   var convolver = new ConvolverNode(context,{buffer:impulse})
 9 |   source.connect(amplitude)
10 |   source.start()
11 |   Start.onclick = function() {
12 |     context.resume()
13 |     amplitude.disconnect()
14 |     convolver.disconnect()
15 |     if (ReverbCheck.checked) {
16 |       amplitude.connect(convolver)
17 |       convolver.connect(context.destination)
18 |     }
19 |     else amplitude.connect(context.destination)
20 |     amplitude.gain.value=1
21 |     amplitude.gain.setValueAtTime(0,context.currentTime+0.05)//pulse lasts 50 ms
22 |   }
23 |   function impulseResponse(duration,decay) {
24 |     var length = context.sampleRate * duration
25 |     var impulse = context.createBuffer(2,length,context.sampleRate)
26 |     var IR = impulse.getChannelData(0)
27 |     for (var i=0;i<length;i++) IR[i] = (2*Math.random()-1)*Math.pow(1-i/length,decay)
28 |     return impulse
29 |   }
30 | </script>
31 | 


--------------------------------------------------------------------------------
/14 Reverb/NormalizeIR/NormalizeIR.html:
--------------------------------------------------------------------------------
 1 | <audio controls loop id='file' onplay='Reset()' src='applause.mp3'></audio></p>
 2 | <input type='checkbox' id='normalize' onclick='Reset()' checked='checked'>Normalize
 3 | <input type='checkbox' id='short' onclick='Reset()' checked='checked'>Short IR
 4 | <script>
 5 |   var buffers=[]
 6 |   context = new AudioContext()
 7 |   source = context.createMediaElementSource(file)
 8 |   convolver = context.createConvolver()
 9 |   function loadBuffer(IR,index) {
10 |     fetch(IR)
11 |     .then(response => response.arrayBuffer())
12 |     .then(buffer => context.decodeAudioData(buffer))
13 |     .then(data => buffers[index] = data)
14 |   }
15 |   loadBuffer('unit_short.wav',0)
16 |   loadBuffer('unit_long.wav',1)
17 |   function Reset() {
18 |     context.resume()
19 |     convolver.normalize = normalize.checked //must be set before the buffer
20 |     if (short.checked) convolver.buffer = buffers[0]
21 |     else convolver.buffer = buffers[1]
22 |     source.connect(convolver).connect(context.destination)
23 |   }
24 | </script>
25 | 


--------------------------------------------------------------------------------
/14 Reverb/NormalizeIR/applause.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreiss/Working-with-the-Web-Audio-API/25a2e41c01e11d553cb36bcaba09321e34425e7c/14 Reverb/NormalizeIR/applause.mp3


--------------------------------------------------------------------------------
/14 Reverb/NormalizeIR/unit_long.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreiss/Working-with-the-Web-Audio-API/25a2e41c01e11d553cb36bcaba09321e34425e7c/14 Reverb/NormalizeIR/unit_long.wav


--------------------------------------------------------------------------------
/14 Reverb/NormalizeIR/unit_short.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreiss/Working-with-the-Web-Audio-API/25a2e41c01e11d553cb36bcaba09321e34425e7c/14 Reverb/NormalizeIR/unit_short.wav


--------------------------------------------------------------------------------
/14 Reverb/README.md:
--------------------------------------------------------------------------------
1 | # Reverb
2 | 
3 | These examples show use of the ConvolverNode to implement convolutional reverb.
4 | 
5 | - ConvolutionReverb: illustrates typical use of the convolver node, where a source is convolved with a simulated impulse response.
6 | - NormalizeIR:  illustrates a minor issue with use of the ConvolverNode's normalize parameter. In this example, the impulse responses are stored in wav files.
7 | 


--------------------------------------------------------------------------------
/14 Reverb/index.html:
--------------------------------------------------------------------------------
 1 | <h2>Reverb</h2>
 2 | 
 3 | These examples show use of the ConvolverNode to implement convolutional reverb.
 4 | 
 5 | Two code examples are provided.
 6 | 
 7 | <ol>
 8 |    <li><a href="ConvolutionReverb.html">ConvolutionReverb</a>: illustrates typical use of the convolver node, where a source is convolved with a simulated impulse response
 9 |    <li><a href="NormalizeIR/NormalizeIR.html">NormalizeIR</a>: illustrates a minor issue with use of the ConvolverNode's normalize parameter. In this example, the impulse responses are stored in wav files
10 | </ol>
11 | 
12 | Code examples correspond to examples from Chapter 14 in the book 'Working with the Web Audio API'.
13 | 
14 | Feel free to contact me at joshua.reiss@qmul.ac.uk
15 | 


--------------------------------------------------------------------------------
/15 Mixing audio/ChannelFlip.html:
--------------------------------------------------------------------------------
 1 | <button id='Flip'>Flip</button>
 2 | <script>
 3 |   var flipped=false
 4 |   var context = new AudioContext()
 5 |   var monoSource = new OscillatorNode(context,{frequency:200})
 6 |   var stereoSource = context.createChannelMerger(2)
 7 |   monoSource.connect(stereoSource, 0, 0)//source0 goes to input 0 of stereoSource
 8 |   monoSource.start()
 9 |   var splitter = context.createChannelSplitter(2)
10 |   var flipper = context.createChannelMerger(2)
11 |   Flip.onclick= function() {
12 |     context.resume()
13 |     stereoSource.disconnect()
14 |     if (flipped) {
15 |       stereoSource.connect(context.destination)
16 |       flipped=false
17 |     } else {
18 |       stereoSource.connect(splitter)
19 |       splitter.connect(flipper, 0, 1)
20 |       splitter.connect(flipper, 1, 0)
21 |       flipper.connect(context.destination)
22 |       flipped=true
23 |     }
24 |   }
25 | </script>
26 | 


--------------------------------------------------------------------------------
/15 Mixing audio/PingPongDelay.html:
--------------------------------------------------------------------------------
 1 | <button id='ping'>Ping</button>
 2 | <script>
 3 |   ping.onclick = function() {
 4 |     context.resume()
 5 |     BurstGain.gain.value=1
 6 |     BurstGain.gain.linearRampToValueAtTime(0,context.currentTime + 0.040)
 7 |   }
 8 |   var context= new AudioContext()
 9 |   Burst=new OscillatorNode(context)
10 |   BurstGain=new GainNode(context,{gain:0})
11 |   Burst.start()
12 |   Burst.connect(BurstGain)
13 |   var merger = context.createChannelMerger(2)
14 |   var leftDelay = new DelayNode(context,{delayTime:0.5})
15 |   var rightDelay = new DelayNode(context,{delayTime:0.5})
16 |   var leftFeedback = new GainNode(context,{gain:0.8})
17 |   var rightFeedback = new GainNode(context,{gain:0.8})
18 |   BurstGain.connect(leftDelay)
19 |   // Connect the routing - left bounces to right, right bounces to left.
20 |   leftDelay.connect(leftFeedback)
21 |   leftFeedback.connect(rightDelay)
22 |   rightDelay.connect(rightFeedback)
23 |   rightFeedback.connect(leftDelay)
24 |   // Merge the two delay channels into stereo L/R
25 |   leftFeedback.connect(merger, 0, 0)
26 |   rightFeedback.connect(merger, 0, 1)
27 |   // Now connect 'merger' to the output destination.
28 |   merger.connect(context.destination)
29 | </script>
30 | 


--------------------------------------------------------------------------------
/15 Mixing audio/README.md:
--------------------------------------------------------------------------------
1 | # Mixing Audio
2 | 
3 | These code examples illustrate use of the ChannelMergerNode and ChannelSplitterNode, as well as how to perform connections to/from nodes with multiple inputs/outputs.
4 | 
5 | - ChannelFlip: shows how to flip the channels in a stereo audio stream.
6 | - PingPongDelay: shows how a delay effect can 'bounce' delayed copies of a signal between left and right channels of an output audio stream. ChannelMerger is used to combine audio streams into stereo output.
7 | 


--------------------------------------------------------------------------------
/15 Mixing audio/index.html:
--------------------------------------------------------------------------------
 1 | <h2>Mixing audio</h2>
 2 | 
 3 | These code examples illustrate use of the ChannelMergerNode and ChannelSplitterNode, as well as how to perform connections to/from nodes with multiple inputs/outputs.
 4 | 
 5 | Two code examples are provided.
 6 | 
 7 | <ol>
 8 |    <li><a href="ChannelFlip.html">ChannelFlip</a>: shows how to flip the channels in a stereo audio stream
 9 |    <li><a href="PingPongDelay.html">PingPongDelay</a>: shows how a delay effect can 'bounce' delayed copies of a signal between left and right channels of an output audio stream. ChannelMerger is used to combine audio streams into stereo output.
10 | </ol>
11 | 
12 | Code examples correspond to examples from Chapter 15 in the book 'Working with the Web Audio API'.
13 | 
14 | Feel free to contact me at joshua.reiss@qmul.ac.uk
15 | 


--------------------------------------------------------------------------------
/16 Stereo panning/README.md:
--------------------------------------------------------------------------------
1 | # Stereo panning
2 | 
3 | Here, we focus on the StereoPannerNode.
4 | 
5 | Two code examples are provided.
6 | 
7 | - stereoPanning: a simple use of the StereoPannerNode, showing a minimal implementation.
8 | - Stereo Enhancer: a stereo enhancer or stereo widener effect, which takes a stereo input stream and re-represents it as mid and side rather than left and right components. The relative strength of these components can be varied to narrow or widen the audio stream's use of the stereo field.
9 | 


--------------------------------------------------------------------------------
/16 Stereo panning/Stereo Enhancer/Stereo speech.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreiss/Working-with-the-Web-Audio-API/25a2e41c01e11d553cb36bcaba09321e34425e7c/16 Stereo panning/Stereo Enhancer/Stereo speech.wav


--------------------------------------------------------------------------------
/16 Stereo panning/Stereo Enhancer/stereoEnhancer.html:
--------------------------------------------------------------------------------
 1 | <input type='range' min=-1 max=1 value=0 step='any' id='width'>
 2 | <script>
 3 |   let context= new AudioContext()
 4 |   let source = new AudioBufferSourceNode(context,{loop:true})
 5 |   let sourceL = context.createGain()
 6 |   let sourceR = context.createGain()
 7 |   fetch('symphonic_warmup.wav')
 8 |   .then(response => response.arrayBuffer())
 9 |   .then(buffer => context.decodeAudioData(buffer))
10 |   .then(data => source.buffer = data)
11 |   var splitter = context.createChannelSplitter(2)
12 |   source.connect(splitter)
13 |   splitter.connect(sourceL,0)
14 |   splitter.connect(sourceR,1)
15 |   source.start()
16 |   let Mid = new GainNode(context,{gain:Math.sqrt(0.5)})
17 |   let Side = new GainNode(context,{gain:Math.sqrt(0.5)})
18 |   let minusSourceR = new GainNode(context,{gain:-1})
19 |   sourceL.connect(Mid)
20 |   sourceR.connect(Mid)
21 |   sourceL.connect(Side)
22 |   sourceR.connect(minusSourceR).connect(Side)
23 |   let gainMid = new GainNode(context)
24 |   let gainSide = new GainNode(context)
25 |   Mid.connect(gainMid)
26 |   Side.connect(gainSide)
27 |   let outputL = new GainNode(context,{gain:Math.sqrt(0.5)})
28 |   let outputR = new GainNode(context,{gain:Math.sqrt(0.5)})
29 |   let minusGainSide = new GainNode(context,{gain:-1})
30 |   gainMid.connect(outputL)
31 |   gainSide.connect(outputL)
32 |   gainMid.connect(outputR)
33 |   gainSide.connect(minusGainSide).connect(outputR)
34 |   width.oninput = () => {
35 |     context.resume()
36 |     gainMid.gain.value = Math.cos((parseFloat(width.value)+1)*Math.PI/4)
37 |     gainSide.gain.value = Math.sin((parseFloat(width.value)+1)*Math.PI/4)
38 |   }
39 |   let merger = context.createChannelMerger(2)
40 |   outputL.connect(merger,0,0)
41 |   outputR.connect(merger,0,1)
42 |   merger.connect(context.destination)
43 | </script>
44 | 


--------------------------------------------------------------------------------
/16 Stereo panning/Stereo Enhancer/symphonic_warmup.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreiss/Working-with-the-Web-Audio-API/25a2e41c01e11d553cb36bcaba09321e34425e7c/16 Stereo panning/Stereo Enhancer/symphonic_warmup.wav


--------------------------------------------------------------------------------
/16 Stereo panning/index.html:
--------------------------------------------------------------------------------
 1 | <h2>Stereo panning</h2>
 2 | 
 3 | Here, we focus on the StereoPannerNode.
 4 | 
 5 | Two code examples are provided.
 6 | 
 7 | <ol>
 8 |    <li><a href="stereoPanning.html">Listener</a>: a simple use of the StereoPannerNode, showing a minimal implementation.
 9 |    <li><a href="Stereo Enhancer/stereoEnhancer.html">Stereo enhancer</a>: a stereo enhancer or stereo widener effect, which takes a stereo input stream and re-represents it as mid and side rather than left and right components. The relative strength of these components can be varied to narrow or widen the audio stream's use of the stereo field.
10 | </ol>
11 | 
12 | Code examples correspond to examples from Chapter 16 in the book 'Working with the Web Audio API'.
13 | 
14 | Feel free to contact me at joshua.reiss@qmul.ac.uk
15 | 


--------------------------------------------------------------------------------
/16 Stereo panning/stereoPanning.html:
--------------------------------------------------------------------------------
 1 | <input type='range' min=-1 max=1 step='any' id='panning'>
 2 | <script>
 3 |   let context= new AudioContext()
 4 |   let source = context.createOscillator()
 5 |   source.start()
 6 |   let panNode = context.createStereoPanner()
 7 |   panning.oninput = function() {
 8 |     context.resume()
 9 |     panNode.pan.value = this.value
10 |   }
11 |   source.connect(panNode).connect(context.destination)
12 | </script>
13 | 


--------------------------------------------------------------------------------
/17 Spatial audio/README.md:
--------------------------------------------------------------------------------
1 | # Spatial Audio
2 | 
3 | Spatial audio involves placing sound sources anywhere in the three dimensional space around the listener. Here we have two code examples;
4 | 
5 | - listener: moving a listener around a source in two dimensions
6 | - pannerNode: moving a source in the 3D space around a listener.
7 | 


--------------------------------------------------------------------------------
/17 Spatial audio/index.html:
--------------------------------------------------------------------------------
 1 | <h2>Spatial audio</h2>
 2 | 
 3 | Spatial audio involves placing sound sources anywhere in the three dimensional space around the listener. Here we have two code examples;
 4 | 
 5 | <ol>
 6 |    <li><a href="listener/listener.html">Listener</a>: moving alistener around a source in two dimensions
 7 |    <li><a href="pannerNode/panner.html">pannerNode</a>: moving a source in the 3D space around a listener.
 8 | </ol>
 9 | 
10 | Code examples correspond to examples from Chapter 17 in the book 'Working with the Web Audio API'.
11 | 
12 | Feel free to contact me at joshua.reiss@qmul.ac.uk
13 | 


--------------------------------------------------------------------------------
/17 Spatial audio/listener/listener.html:
--------------------------------------------------------------------------------
1 | X<input type='range' min=-8 max=8 step='any' id='panX' oninput='panning()'>
2 | <br><br><br><br>
3 | Z<input type='range' min=-8 max=8 value=-1 step='any' id='panZ'
4 |   style='transform:rotate(90deg)' oninput='panning()'>
5 | <script src='listener.js'></script>
6 | 


--------------------------------------------------------------------------------
/17 Spatial audio/listener/listener.js:
--------------------------------------------------------------------------------
 1 | let context= new AudioContext()
 2 | let source = context.createOscillator()
 3 | let listener= context.listener
 4 | let panNode = new PannerNode(context)
 5 | source.start()
 6 | panNode.positionX.value=0
 7 | panNode.positionY.value=0
 8 | panNode.positionZ.value=-1
 9 | panNode.orientationX.value=0
10 | panNode.orientationY.value=0
11 | panNode.orientationZ.value=1
12 | panNode.coneInnerAngle = 45
13 | panNode.coneOuterAngle = 90
14 | panNode.coneOuterGain = 0.1
15 | panNode.refDistance = 0.5
16 | source.connect(panNode).connect(context.destination)
17 | function panning() {
18 |   context.resume()
19 |   listener.positionX.value=panX.value
20 |   listener.positionZ.value=panZ.value
21 | }
22 | 


--------------------------------------------------------------------------------
/17 Spatial audio/notes.TXT:
--------------------------------------------------------------------------------
 1 | Defaults
 2 | Left / Right
 3 | Down / Up
 4 | Front / Back
 5 | 
 6 | Listener
 7 | position at 0,0,0
 8 | forward is 0,0,-1 , so pointing straight ahead
 9 | Up is 0,1,0
10 | 
11 | Source
12 | position at 0,0,0
13 | orientation is 1,0,0 , pointing to the right
14 | 
15 | cone
16 | coneInnerAngle: 360
17 | coneOuterAngle: 360
18 | coneOuterGain: 0
19 | 
20 | context: AudioContext {baseLatency: 0.01, destination: AudioDestinationNode, currentTime: 0, sampleRate: 48000, listener: AudioListener, …}
21 | distanceModel: 'inverse'
22 | maxDistance: 10000
23 | refDistance: 1
24 | rolloffFactor: 1
25 | 
26 | panningModel: 'equalpower'
27 | 


--------------------------------------------------------------------------------
/17 Spatial audio/pannerNode/drone.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreiss/Working-with-the-Web-Audio-API/25a2e41c01e11d553cb36bcaba09321e34425e7c/17 Spatial audio/pannerNode/drone.wav


--------------------------------------------------------------------------------
/17 Spatial audio/pannerNode/panner.html:
--------------------------------------------------------------------------------
1 | Left / Right<input type='range' min=-8 max=8 step='any' id='panX'><br>
2 | Down / Up   <input type='range' min=-8 max=8 step='any' id='panY'><br>
3 | Front / Back<input type='range' min=-8 max=8 step='any' id='panZ'><br>
4 | <button onclick='context.resume()'>Start</button>
5 | <script src='panner.js'></script>


--------------------------------------------------------------------------------
/17 Spatial audio/pannerNode/panner.js:
--------------------------------------------------------------------------------
 1 | let context= new AudioContext()
 2 | let source = new AudioBufferSourceNode(context,{loop:true})
 3 | fetch('drone.wav')
 4 | .then(response => response.arrayBuffer())
 5 | .then(buffer => context.decodeAudioData(buffer))
 6 | .then(data => source.buffer = data)
 7 | source.start()
 8 | let panNode = new PannerNode(context)
 9 | panNode.refDistance = 0.5
10 | panNode.panningModel = 'HRTF'
11 | source.connect(panNode).connect(context.destination)
12 | panX.oninput = () => panNode.positionX.value = panX.value
13 | panY.oninput = () => panNode.positionY.value = panY.value
14 | panZ.oninput = () => panNode.positionZ.value = panZ.value
15 | 


--------------------------------------------------------------------------------
/18 Working with AudioWorklets/1Noise worklet/basicNoise.html:
--------------------------------------------------------------------------------
1 | <button onclick=context.resume()>Start</button>
2 | <script>
3 |   let context= new AudioContext()
4 |   context.audioWorklet.addModule('basicNoise.js').then(() => {
5 |     let NoiseNode = new AudioWorkletNode(context,'noise-generator')
6 |     NoiseNode.connect(context.destination)
7 |   })
8 | </script>
9 | 


--------------------------------------------------------------------------------
/18 Working with AudioWorklets/1Noise worklet/basicNoise.js:
--------------------------------------------------------------------------------
1 | registerProcessor('noise-generator',class extends AudioWorkletProcessor {
2 |   process(inputs, outputs) {
3 |     for (let i=0;i<outputs[0][0].length;++i) outputs[0][0][i]=2*Math.random()-1
4 |     return true
5 |   }
6 | })
7 | 


--------------------------------------------------------------------------------
/18 Working with AudioWorklets/2async await format/asyncNoise.html:
--------------------------------------------------------------------------------
 1 | <button onclick='context.resume()'>Start</button>
 2 | <script>
 3 |   let context=new AudioContext()
 4 |   async function audioGraph(context) {
 5 |     await context.audioWorklet.addModule('basicnoise.js')
 6 |     let NoiseNode = new AudioWorkletNode(context,'noise-generator')
 7 |     NoiseNode.connect(context.destination)
 8 |   }
 9 |   audioGraph(context)
10 | </script>
11 | 


--------------------------------------------------------------------------------
/18 Working with AudioWorklets/2async await format/basicnoise.js:
--------------------------------------------------------------------------------
1 | registerProcessor('noise-generator',class extends AudioWorkletProcessor {
2 |   process(inputs, outputs) {
3 |     for (let i=0;i<outputs[0][0].length;++i) outputs[0][0][i]=2*Math.random()-1
4 |     return true
5 |   }
6 | })
7 | 


--------------------------------------------------------------------------------
/18 Working with AudioWorklets/3Multiple Inputs/multipleInputs.html:
--------------------------------------------------------------------------------
 1 | <button onclick=context.resume()>Start</button>
 2 | <script>
 3 |   let context= new AudioContext()
 4 |   context.audioWorklet.addModule('multipleInputs.js').then(() => {
 5 |     let Source1= new ConstantSourceNode(context,{offset:1})
 6 |     let Channel2_1= new ConstantSourceNode(context,{offset:2})
 7 |     let Channel2_2= new ConstantSourceNode(context,{offset:4})
 8 |     let Source2= new ChannelMergerNode(context,{numberOfInputs:2})
 9 |     Channel2_1.connect(Source2,0,0)
10 |     Channel2_2.connect(Source2,0,1)
11 |     let MaxNode = new AudioWorkletNode(context,'max-abs-value',
12 |       {numberOfInputs:2}
13 |     )
14 |     Source1.connect(MaxNode,0,0)
15 |     Source2.connect(MaxNode,0,1)
16 |     Source1.connect(MaxNode)
17 |     Source2.connect(MaxNode)
18 |     Source1.start()
19 |     Channel2_1.start()
20 |     Channel2_2.start()
21 |   })
22 | </script>
23 | 


--------------------------------------------------------------------------------
/18 Working with AudioWorklets/3Multiple Inputs/multipleInputs.js:
--------------------------------------------------------------------------------
 1 | registerProcessor('max-abs-value',class extends AudioWorkletProcessor {
 2 |   process(inputs, outputs) {
 3 |     for (let i = 0; i < inputs.length; i++) {
 4 |       for (let j = 0; j < inputs[i].length; j++) {
 5 |         for (let k = 0; k < inputs[i][j].length; k++) {
 6 |           outputs[0][0][k] = Math.max(Math.abs(inputs[i][j][k]),outputs[0][0][k])
 7 |         }
 8 |       }
 9 |     }
10 |     return true
11 |   }
12 | })
13 | 


--------------------------------------------------------------------------------
/18 Working with AudioWorklets/4PanX/panX.html:
--------------------------------------------------------------------------------
 1 | <button onclick=context.resume()>Start</button>
 2 | Panning: <input type=range min=-1 max=1 step=any id=Panning>
 3 | Speaker: <input type=range min=1 max=5 step=1 id=Speaker>
 4 | <script>
 5 |   let context= new AudioContext()
 6 |   context.audioWorklet.addModule('panX.js').then(() => {
 7 |     let Source= new OscillatorNode(context)
 8 |     Source.start()
 9 |     const panX = new AudioWorkletNode(context,'panX-processor',{
10 |       channelCount:5,
11 |       channelCountMode:'explicit',
12 |       channelInterpretation:'discrete'
13 |     })
14 |     console.log(panX.channelCount)
15 |     Source.connect(panX)
16 |     var Splitter = context.createChannelSplitter(5)
17 |     panX.connect(Splitter)
18 |     Splitter.connect(context.destination,1)
19 |     Panning.oninput = function() {
20 |       panX.parameters.get('pan').value=this.value
21 |     }
22 |     Speaker.oninput = function() {
23 |       Splitter.disconnect()
24 |       Splitter.connect(context.destination,this.value-1)
25 |     }
26 |   })
27 | </script>
28 | 


--------------------------------------------------------------------------------
/18 Working with AudioWorklets/4PanX/panX.js:
--------------------------------------------------------------------------------
 1 | registerProcessor('panX-processor',class extends AudioWorkletProcessor {
 2 |   static get parameterDescriptors() { return [{name:'pan',defaultValue:0}] }
 3 |   process(inputs, outputs, parameters) {
 4 |     let input = inputs[0],output = outputs[0]
 5 |     let nChannels=input.length
 6 |     var position = (nChannels-1)*(1+parameters.pan[0])/2 
 7 |     for (let i = 0; i <nChannels; i++) {
 8 |       if ((position-i <= -1) || (position-i>=1)) {
 9 |         for (let j = 0;j< output[i].length;j++) output[i][j]=0
10 |       }
11 |       else {
12 |         for (let j=0;j<output[i].length;j++)
13 |           output[i][j]=input[0][j]*Math.cos((position-i)*Math.PI/2)
14 |       }
15 |     }
16 |     return true
17 |   }
18 | })
19 | 


--------------------------------------------------------------------------------
/18 Working with AudioWorklets/5Gain worklet/gain.html:
--------------------------------------------------------------------------------
 1 | <button onclick=context.resume()>Start</button>
 2 | <p>Gain</p>
 3 | <input type=range min=0 max=1 value=0.1 step=0.01 id=Gain>
 4 | <span id=GainLabel></span>
 5 | <script>
 6 |   let context= new AudioContext()
 7 |   GainLabel.innerHTML = Gain.value
 8 |   context.audioWorklet.addModule('worklets.js').then(() => {
 9 |     let myNoise = new AudioWorkletNode(context,'noise-generator')
10 |     let myGain = new AudioWorkletNode(context,'gain-processor',
11 |       {parameterData:{gain:0.1}}
12 |     )
13 |     Gain.oninput = function() {
14 |       myGain.parameters.get('gain').value=this.value
15 |       GainLabel.innerHTML = this.value
16 |     }
17 |     myNoise.connect(myGain)
18 |     myGain.connect(context.destination)
19 |   })
20 | </script>


--------------------------------------------------------------------------------
/18 Working with AudioWorklets/5Gain worklet/worklets.js:
--------------------------------------------------------------------------------
 1 | registerProcessor('noise-generator',class extends AudioWorkletProcessor {
 2 |   process(inputs, outputs) {
 3 |     for (let i=0;i<outputs[0][0].length;++i)  outputs[0][0][i]=2*Math.random()-1
 4 |     return true
 5 |   }
 6 | })
 7 | 
 8 | registerProcessor('gain-processor',class extends AudioWorkletProcessor {
 9 |   static get parameterDescriptors() { return [{name:'gain',defaultValue:0.1}] }
10 |   process(inputs, outputs, parameters) {
11 |     const input = inputs[0],output = outputs[0]
12 |     if (parameters.gain.length === 1) {
13 |       for (let i=0;i<inputs[0].length;++i) {
14 |         for (let j=0;j<inputs[0][i].length;++j) {
15 |           outputs[0][i][j] = inputs[0][i][j] * parameters.gain[0]
16 |         }
17 |       }
18 |     } else {
19 |       for (let i=0;i<inputs[0].length;++i) {
20 |         for (let j=0;j<inputs[0][i].length;++j) {
21 |           outputs[0][i][j] = inputs[0][i][j] * parameters.gain[j]
22 |         }
23 |       }
24 |     }
25 |     return true
26 |   }
27 | })
28 | 


--------------------------------------------------------------------------------
/18 Working with AudioWorklets/6Smoothing Filter worklet/noiseWorklet.js:
--------------------------------------------------------------------------------
1 | registerProcessor('noise-generator',class extends AudioWorkletProcessor {
2 |   process(inputs, outputs) {
3 |     for (let i=0;i<outputs[0][0].length;++i)  outputs[0][0][i]=2*Math.random()-1
4 |     return true
5 |   }
6 | })
7 | 


--------------------------------------------------------------------------------
/18 Working with AudioWorklets/6Smoothing Filter worklet/smoothing.html:
--------------------------------------------------------------------------------
 1 | <button onclick='context.resume()'>Start</button>
 2 | <p>Time constant (ms)</p>
 3 | <input type='range' min=0 max=10 value=1 step='any' id='Filter'>
 4 | <span id='FilterLabel'></span>
 5 | <script>
 6 |   let context= new AudioContext()
 7 |   FilterLabel.innerHTML = Filter.value
 8 |   Promise.all([
 9 |     context.audioWorklet.addModule('noiseWorklet.js'),
10 |     context.audioWorklet.addModule('smoothingWorklet.js')
11 |   ]).then(() => {
12 |     let myNoise = new AudioWorkletNode(context,'noise-generator')
13 |     let myFilter = new AudioWorkletNode(context,'smoothing-filter')
14 |     Filter.oninput = function() {
15 |       myFilter.parameters.get('timeConstant').value=this.value
16 |       FilterLabel.innerHTML = this.value
17 |     }
18 |     myNoise.connect(myFilter).connect(context.destination)
19 |   })
20 | </script>
21 | 


--------------------------------------------------------------------------------
/18 Working with AudioWorklets/6Smoothing Filter worklet/smoothingWorklet.js:
--------------------------------------------------------------------------------
 1 | registerProcessor('smoothing-filter', class extends AudioWorkletProcessor {
 2 |   static get parameterDescriptors() { return [
 3 |     {name:'timeConstant',defaultValue:1,minValue:0}
 4 |   ]}
 5 |   constructor() {
 6 |     super()
 7 |     this.lastOut = 0
 8 |   }
 9 |   process(inputs, outputs, parameters) {
10 |     let alpha=Math.exp(-1/(parameters.timeConstant[0]*sampleRate/1000))
11 |     for (let i=0;i<outputs[0].length;++i) {
12 |       for (let j=0;j<outputs[0][i].length;++j) {
13 |         outputs[0][i][j]=inputs[0][i][j] * (1-alpha) + alpha * this.lastOut
14 |         this.lastOut=outputs[0][i][j]
15 |       }
16 |     }
17 |     return true
18 |   }
19 | })
20 | 


--------------------------------------------------------------------------------
/18 Working with AudioWorklets/7First order filter options/filterOptions.html:
--------------------------------------------------------------------------------
 1 | <button onclick=context.resume()>Start</button>
 2 | <select id=Type>
 3 |   <option value=lowpass>Lowpass</option>
 4 |   <option value=highpass>Highpass</option>
 5 | </select>
 6 | <p>Cut-off frequency</p>
 7 | <input type=range min=0 max=5000 value=1 step=any id=Cutoff>
 8 | <script>
 9 |   let context= new AudioContext()
10 |   Promise.all([
11 |     context.audioWorklet.addModule('noiseWorklet.js'),
12 |     context.audioWorklet.addModule('filterOptionsWorklet.js')
13 |   ]).then(() => {
14 |     let Noise = new AudioWorkletNode(context,'noise-generator')
15 |     let Filter = new AudioWorkletNode(context,'first-order-filter',
16 |       {processorOptions:{type:'lowpass'}}
17 |     )
18 |     Noise.connect(Filter).connect(context.destination)
19 |     Cutoff.oninput = function() {
20 |       Filter.parameters.get('frequency').value=this.value
21 |     }
22 |     Type.onchange = function() {
23 |       Noise.disconnect()
24 |       Filter.disconnect()
25 |       Filter = new AudioWorkletNode(context,'first-order-filter',
26 |         {processorOptions:{type:Type.value}}
27 |       )
28 |       Noise.connect(Filter).connect(context.destination)
29 |     }
30 |   })
31 | </script>
32 | 


--------------------------------------------------------------------------------
/18 Working with AudioWorklets/7First order filter options/filterOptionsWorklet.js:
--------------------------------------------------------------------------------
 1 | registerProcessor('first-order-filter', class extends AudioWorkletProcessor {
 2 |   static get parameterDescriptors() { return [
 3 |     {name:'frequency',defaultValue:100,minValue:0}] 
 4 |   }
 5 |   constructor(options) {
 6 |     super()
 7 |     this.lastOut = 0
 8 |     this.lastIn = 0
 9 |     this.type = options.processorOptions.type
10 |   }
11 |   process(inputs, outputs, parameters) {
12 |     let omega_0= 2*Math.PI*parameters.frequency[0]/sampleRate
13 |     let a,b
14 |     if (this.type == 'lowpass') {
15 |       a= [Math.tan(omega_0/2)+1,Math.tan(omega_0/2)-1],
16 |       b= [Math.tan(omega_0/2),Math.tan(omega_0/2)]
17 |     } else {
18 |       a= [Math.tan(omega_0/2)+1,Math.tan(omega_0/2)-1],
19 |       b= [1,-1]
20 |     }
21 |     for (let i=0;i<inputs[0].length;++i) {
22 |       for (let j=0;j<inputs[0][i].length;++j) {
23 |         outputs[0][i][j] = 
24 |           (b[0]*inputs[0][i][j] + b[1]*this.lastIn -a[1]*this.lastOut)/a[0]
25 |         this.lastIn=inputs[0][i][j]
26 |         this.lastOut=outputs[0][i][j]
27 |       }
28 |     }
29 |     return true
30 |   }
31 | })


--------------------------------------------------------------------------------
/18 Working with AudioWorklets/7First order filter options/noiseWorklet.js:
--------------------------------------------------------------------------------
1 | registerProcessor('noise-generator',class extends AudioWorkletProcessor {
2 |   process(inputs, outputs) {
3 |     for (let i=0;i<outputs[0][0].length;++i)  outputs[0][0][i]=2*Math.random()-1
4 |     return true
5 |   }
6 | })
7 | 


--------------------------------------------------------------------------------
/18 Working with AudioWorklets/8First order filter messaging/filterMessaging.html:
--------------------------------------------------------------------------------
 1 | <button onclick=context.resume()>Start</button>
 2 | <select id=Type>
 3 |   <option value=lowpass>Lowpass</option>
 4 |   <option value=highpass>Highpass</option>
 5 | </select>
 6 | <p>Cut-off frequency</p>
 7 | <input type=range min=0 max=5000 value=1 step=any id=Cutoff>
 8 | <script>
 9 |   let context= new AudioContext()
10 |   Promise.all([
11 |     context.audioWorklet.addModule('noiseWorklet.js'),
12 |     context.audioWorklet.addModule('filterMessagingWorklet.js')
13 |   ]).then(() => {
14 |     let Noise = new AudioWorkletNode(context,'noise-generator')
15 |     let Filter = new AudioWorkletNode(context,'first-order-filter')
16 |     Cutoff.oninput = () => Filter.parameters.get('frequency').value=Cutoff.value
17 |     Type.onchange = () => Filter.port.postMessage(Type.value)
18 |     Noise.connect(Filter).connect(context.destination)
19 |   })
20 | </script>
21 | 


--------------------------------------------------------------------------------
/18 Working with AudioWorklets/8First order filter messaging/filterMessagingWorklet.js:
--------------------------------------------------------------------------------
 1 | registerProcessor('first-order-filter', class extends AudioWorkletProcessor {
 2 |   static get parameterDescriptors() { return [{name:'frequency',defaultValue:100,minValue:0}] }
 3 |   constructor() {
 4 |     super()
 5 |     this.lastOut = 0
 6 |     this.lastIn = 0
 7 |     this.type = 'lowpass'
 8 |     this.port.onmessage = (event) => { this.type=event.data }
 9 |   }
10 |   process(inputs, outputs, parameters) {
11 |     let omega_0= 2*Math.PI*parameters.frequency[0]/sampleRate
12 |     let a,b
13 |     if (this.type == 'lowpass') {
14 |       a= [Math.tan(omega_0/2)+1,Math.tan(omega_0/2)-1]
15 |       b= [Math.tan(omega_0/2),Math.tan(omega_0/2)]
16 |     } else {
17 |       a= [Math.tan(omega_0/2)+1,Math.tan(omega_0/2)-1]
18 |       b= [1,-1]
19 |     }
20 |     for (let i=0;i<inputs[0].length;++i) {
21 |       for (let j=0;j<inputs[0][i].length;++j) {
22 |         outputs[0][i][j] = (b[0]*inputs[0][i][j] + b[1]*this.lastIn -a[1]*this.lastOut)/a[0]
23 |         this.lastIn=inputs[0][i][j]
24 |         this.lastOut=outputs[0][i][j]
25 |       }
26 |     }
27 |     return true
28 |   }
29 | })
30 | 


--------------------------------------------------------------------------------
/18 Working with AudioWorklets/8First order filter messaging/noiseWorklet.js:
--------------------------------------------------------------------------------
1 | registerProcessor('noise-generator',class extends AudioWorkletProcessor {
2 |   process(inputs, outputs) {
3 |     for (let i=0;i<outputs[0][0].length;++i)  outputs[0][0][i]=2*Math.random()-1
4 |     return true
5 |   }
6 | })
7 | 


--------------------------------------------------------------------------------
/18 Working with AudioWorklets/README.md:
--------------------------------------------------------------------------------
 1 | # Working with AudioWorklets
 2 | 
 3 | The Web Audio API provides an AudioWorkletNode,  which lets developers create their own custom audio nodes for almost any audio processing or synthesis task.
 4 | All the main aspects of audio worklets are explained here. Source code examples are given for;
 5 | - Noise worklet: a 'hello world' audio worklet generating a noise source
 6 | - async await format: the Noise worklet, but now implemented using async await instead of a promise then.
 7 | - Mul,tiple inputs: showing how one can have audio worklet nodes with multiple inputs, demonstrated with an audio worklet that finds the sample with maximum amplitude from all channels of all inputs .
 8 | - PanX: an audio worklet that pans audio between any number of loudspeakers. This demonstrates use of inputs, outputs and options for an audio worklet.
 9 | - Gain worklet: A simple gain node implemented as an audio worklet, to show how audio worklets handle audio parameters.
10 | - Smoothing Filter worklet: to show how an audio worklet stores internal variables, we implemented a smoothing filter. The audio worklet keeps track of the previous sample even though it reads in audio block by block.
11 |  - First order filter options: first order high pass and low pass filters. They are implemented in a single audio worklet, with processorOptions specified to set the filter type.
12 |  - First order filter messages: first order high pass and low pass filters. They are implemented in a single audio worklet, with the message port used to set or change the filter type.
13 | 


--------------------------------------------------------------------------------
/18 Working with AudioWorklets/index.html:
--------------------------------------------------------------------------------
 1 | <h2>Working with audio worklets</h2>
 2 | 
 3 | The Web Audio API provides an AudioWorkletNode, which lets developers create their own custom audio nodes for almost any audio processing or synthesis task.
 4 | All the main aspects of audio worklets are explained here. Source code examples are given for;
 5 | 
 6 | <ol>
 7 |    <li><a href="1Noise worklet/basicNoise.html">Noise worklet</a>: a 'hello world' audio worklet generating a noise source
 8 |    <li><a href="2async await format/asyncNoise.html">async await format</a>: the Noise worklet, but now implemented using async await instead of a promise then.
 9 |    <li><a href="3Multiple Inputs/multipleInputs.html">Multiple inputs</a>: showing how one can have audio worklet nodes with multiple inputs, demonstrated with an audio worklet that finds the sample with maximum amplitude from all channels of all inputs .
10 |    <li><a href="4PanX/panX.html">PanX</a>: an audio worklet that pans audio between any number of loudspeakers. This demonstrates use of inputs, outputs and options for an audio worklet.
11 |    <li><a href="5Gain worklet/gain.html">Gain worklet</a>: A simple gain node implemented as an audio worklet, to show how audio worklets handle audio parameters.
12 |    <li><a href="6Smoothing Filter worklet/smoothing.html">Smoothing Filter worklet</a>: to show how an audio worklet stores internal variables, we implemented a smoothing filter. The audio worklet keeps track of the previous sample even though it reads in audio block by block.
13 |    <li><a href="7First order filter options/filterOptions.html">First order filter options</a>: first order high pass and low pass filters. They are implemented in a single audio worklet, with processorOptions specified to set the filter type.
14 |    <li><a href="8First order filter messaging/filterMessaging.html">First order filter messages</a>: first order high pass and low pass filters. They are implemented in a single audio worklet, with the message port used to set or change the filter type.
15 | </ol>
16 | 
17 | Code examples correspond to examples from Chapter 18 in the book 'Working with the Web Audio API'.
18 | 
19 | Feel free to contact me at joshua.reiss@qmul.ac.uk
20 | 


--------------------------------------------------------------------------------
/19 Wonders of audio worklets/Bit crusher worklet/bitCrush.html:
--------------------------------------------------------------------------------
 1 | <button onclick=context.resume()>Start</button>
 2 | <script>
 3 |   const context = new AudioContext()
 4 |   context.audioWorklet.addModule('bitCrushWorklet.js').then(() => {
 5 |     let osc = new OscillatorNode(context)
 6 |     let bitcrusher = new AudioWorkletNode(context,'bitcrusher')
 7 |     osc.connect(bitcrusher).connect(context.destination)
 8 |     osc.start()
 9 |   })
10 | </script>
11 | 


--------------------------------------------------------------------------------
/19 Wonders of audio worklets/Bit crusher worklet/bitCrushWorklet.js:
--------------------------------------------------------------------------------
 1 | registerProcessor('bitcrusher', class extends AudioWorkletProcessor {
 2 |   static get parameterDescriptors () {
 3 |     return [{name: 'bitDepth',defaultValue: 12,minValue: 1,maxValue: 16}]
 4 |   }
 5 |   process (inputs, outputs, parameters) {
 6 |     const input = inputs[0],output = outputs[0]
 7 |     const bitDepth = parameters.bitDepth
 8 |     const frequencyReduction = parameters.frequencyReduction
 9 |     if (bitDepth.length > 1) {
10 |       // The bitDepth parameter array has 128 sample values.
11 |       for (let channel = 0; channel < output.length; ++channel) {
12 |         for (let i = 0; i < output[channel].length; ++i) {
13 |           let step = Math.pow(0.5, bitDepth[i])
14 |           output[channel][i] = step * Math.floor(input[channel][i] / step + 0.5)
15 |         }
16 |       }
17 |     } else {
18 |       // bitDepth is constant, so put computation of step outside the loop
19 |       const step = Math.pow(0.5, bitDepth[0])
20 |       for (let channel = 0; channel < output.length; ++channel) {
21 |         for (let i = 0; i < output[channel].length; ++i) {
22 |           output[channel][i] = step * Math.floor(input[channel][i] / step + 0.5)
23 |         }
24 |       }
25 |     }
26 |     return true
27 |   }
28 | })
29 | 


--------------------------------------------------------------------------------
/19 Wonders of audio worklets/CircularBufferWorklets.js:
--------------------------------------------------------------------------------
 1 | registerProcessor('fixedDelay', class extends AudioWorkletProcessor {
 2 |   constructor() {
 3 |     super()
 4 |     this.Buffer= new Array(20).fill(0)
 5 |   }
 6 |   process(inputs, outputs) {
 7 |     let delaySamples=12
 8 |     for (let i=0;i<outputs[0][0].length;++i) {
 9 |       outputs[0][0][i]=inputs[0][0][i]
10 |       for (let j=1;j<delaySamples;j++) this.Buffer[j-1]=this.Buffer[j]
11 |       this.Buffer[delaySamples-1]=inputs[0][0][i]//write at 20th sample
12 |     }
13 |     return true
14 |   }
15 | })
16 | 
17 | registerProcessor('fixedDelay2', class extends AudioWorkletProcessor {
18 |   constructor() {
19 |     super()
20 |     this.Buffer= new Array(48000).fill(0)
21 |     this.ReadPtr=0,this.WritePtr=0
22 |   }
23 |   process(inputs, outputs) {
24 |     let delaySamples= 12
25 |     bufferSize=this.Buffer.length
26 |     for (let i=0;i<outputs[0][0].length;++i) {
27 |       while (this.WritePtr>bufferSize) this.WritePtr-=bufferSize
28 |       this.ReadPtr=this.WritePtr-delaySamples
29 |       while (this.ReadPtr<0) this.ReadPtr+=bufferSize
30 |       this.Buffer[this.WritePtr]=inputs[0][0][i]
31 |       outputs[0][0][i]=this.Buffer[this.ReadPtr]
32 |       this.WritePtr++,this.ReadPtr++
33 |     }
34 |     return true
35 |   }
36 | })
37 | 


--------------------------------------------------------------------------------
/19 Wonders of audio worklets/CompressorWorklet/compressor.html:
--------------------------------------------------------------------------------
1 | <button onclick='context.resume()'>Start</button><br>
2 | <input id='Threshold' type='range' min=-100 max=0 value=-30>Threshold<br>
3 | <input id='Ratio' type='range' min=1 max=20 value=12>Ratio<br>
4 | <input id='Knee' type='range' min=0 max=40 value=0>Knee<br>
5 | <input id='Attack' type='range' min=0 max=1000 value=0>Attack<br>
6 | <input id='Release' type='range' min=0 max=1000 value=5>Release
7 | <script src='compressor.js'></script>
8 | 


--------------------------------------------------------------------------------
/19 Wonders of audio worklets/CompressorWorklet/compressor.js:
--------------------------------------------------------------------------------
 1 | let context= new AudioContext()
 2 | const source1 = new OscillatorNode(context)
 3 | const source2 = new OscillatorNode(context,{frequency:0.25})
 4 | const gainNode = new GainNode(context)
 5 | source1.start()
 6 | source2.start()
 7 | source1.connect(gainNode)
 8 | source2.connect(gainNode.gain)
 9 | context.audioWorklet.addModule('compressorWorklet.js').then(() => {
10 |   let compressor = new AudioWorkletNode(context,'compressor')
11 |   gainNode.connect(compressor).connect(context.destination)
12 |   Threshold.oninput = () => compressor.parameters.get('threshold').value = Threshold.value
13 |   Ratio.oninput = () => compressor.parameters.get('ratio').value = Ratio.value
14 |   Knee.oninput = () => compressor.parameters.get('knee').value = Knee.value
15 |   Attack.oninput = () => compressor.parameters.get('attack').value = Attack.value
16 |   Release.oninput = () => compressor.parameters.get('release').value = Release.value
17 | })
18 | 


--------------------------------------------------------------------------------
/19 Wonders of audio worklets/CompressorWorklet/compressorWorklet.js:
--------------------------------------------------------------------------------
 1 | registerProcessor('compressor', class extends AudioWorkletProcessor {
 2 |   static get parameterDescriptors() { return [
 3 |     {name:'threshold',defaultValue:-30},
 4 |     {name:'ratio',defaultValue:12},
 5 |     {name:'knee',defaultValue:0},
 6 |     {name:'attack',defaultValue:0},
 7 |     {name:'release',defaultValue:5}
 8 |   ] }
 9 |   constructor() {
10 |     super()
11 |     this.yPrev = 0
12 |     this.port.onmessage = () => this.port.postMessage(this.reduction)
13 |   }
14 |   process(inputs, outputs, parameters) {
15 |     let alphaAttack=Math.exp(-1/(parameters.attack[0]*sampleRate/1000))
16 |     let alphaRelease=Math.exp(-1/(parameters.release[0]*sampleRate/1000))
17 |     let x,x_dB,y_dB,x_G,y_G,x_B,y_B,c_dB,c
18 |     let T=parameters.threshold[0]
19 |     let R=parameters.ratio[0]
20 |     let W=parameters.knee[0]
21 |     for (let j=0;j<outputs[0][0].length;++j) {
22 |       // dB conversion
23 |       x_dB=inputs[0][0][j]
24 |       y_dB=Math.max(10*Math.log10(x_dB*x_dB),-120)
25 |       // gain computer
26 |       x_G=y_dB
27 |       if ((x_G-T)<= -W/2) y_G=x_G
28 |       else if ((x_G-T)>= W/2) y_G=T+(x_G-T)/R
29 |       else y_G=x_G+(1/R-1)*(x_G-T+W/2)*(x_G-T+W/2)/(2*W)
30 |       //ballistics
31 |       x_B=x_G - y_G
32 |       if (x_B>this.yPrev) y_B = x_B * (1-alphaAttack) + alphaAttack * this.yPrev
33 |       else                y_B = x_B * (1-alphaRelease) + alphaRelease * this.yPrev
34 |       this.yPrev=y_B
35 |       // gain stage
36 |       c_dB = -y_B
37 |       this.reduction = c_dB
38 |       c= Math.pow(10,c_dB/20)
39 |       outputs[0][0][j]=c*inputs[0][0][j]
40 |     }
41 |     return true
42 |   }
43 | })
44 | 


--------------------------------------------------------------------------------
/19 Wonders of audio worklets/KarplusStrong/KSWorklets.js:
--------------------------------------------------------------------------------
 1 | registerProcessor('noise-generator',class extends AudioWorkletProcessor {
 2 |   process(inputs, outputs) {
 3 |     for (let i=0;i<outputs[0][0].length;++i)  outputs[0][0][i]=2*Math.random()-1
 4 |     return true
 5 |   }
 6 | })
 7 | 
 8 | registerProcessor('feedbackDelay-processor', class extends AudioWorkletProcessor {
 9 |   static get parameterDescriptors() { return [
10 |     {name:'gain',defaultValue:0.9,minValue:-1,maxValue:1},
11 |     {name:'delayTime',defaultValue:10,minValue:0,maxValue:1000}]
12 |   }
13 |   constructor() {
14 |     super()
15 |     this.Buffer= new Array(48000).fill(0)
16 |     this.ReadPtr=0,this.WritePtr=0
17 |   }
18 |   process(inputs, outputs, parameters) {
19 |     let delaySamples=Math.round(sampleRate*parameters.delayTime[0]/1000),
20 |         bufferSize=this.Buffer.length
21 |     for (let i=0;i<outputs[0][0].length;++i) {
22 |       outputs[0][0][i]= parameters.gain[0]*this.Buffer[this.ReadPtr]+inputs[0][0][i]
23 |       this.Buffer[this.WritePtr]=outputs[0][0][i]
24 |       this.WritePtr++
25 |       if (this.WritePtr>=bufferSize) this.WritePtr=this.WritePtr-bufferSize
26 |       this.ReadPtr=this.WritePtr-delaySamples
27 |       if (this.ReadPtr<0) this.ReadPtr=this.ReadPtr+bufferSize
28 |     }
29 |     return true
30 |   }
31 | })
32 | 


--------------------------------------------------------------------------------
/19 Wonders of audio worklets/KarplusStrong/KarplusStrongV2.html:
--------------------------------------------------------------------------------
 1 | <p>Decay</p>
 2 | <input type='range' min=0.8 max='0.999' value='0.9' step='any' id='Decay'>
 3 | <span id='DecayLabel'></span>
 4 | <p>Delay (ms)</p>
 5 | <input type='range' min=0 max=20 value=10 step='any' id='Delay'>
 6 | <span id='DelayLabel'></span>
 7 | <p>Width (ms)</p>
 8 | <input type='range' min=0 max='20' value=10 step='any' id='Width'>
 9 | <span id='WidthLabel'></span>
10 | <p>
11 | <input type='button' value='play' id='Play'>
12 | <script>
13 |   DecayLabel.innerHTML = Decay.value
14 |   DelayLabel.innerHTML = Delay.value
15 | </script>
16 | <script src='KarplusStrongV2.js'></script>
17 | 


--------------------------------------------------------------------------------
/19 Wonders of audio worklets/KarplusStrong/KarplusStrongV2.js:
--------------------------------------------------------------------------------
 1 | var context = new AudioContext
 2 | context.audioWorklet.addModule('KSWorklets.js').then(() => {
 3 |   let Noise = new AudioWorkletNode(context,'noise-generator'),
 4 |   NoiseGain = new GainNode(context,{gain:0}),
 5 |   output = new GainNode(context),
 6 |   feedbackDelay= new AudioWorkletNode(context,'feedbackDelay-processor',
 7 |     {parameterData:{delayTime:5,gain:0.9}
 8 |   })
 9 |   Noise.connect(NoiseGain)
10 |   NoiseGain.connect(output)
11 |   NoiseGain.connect(feedbackDelay)
12 |   feedbackDelay.connect(output)
13 |   output.connect(context.destination)
14 |   Decay.oninput = function() {
15 |     feedbackDelay.parameters.get('gain').value=this.value
16 |     DecayLabel.innerHTML = this.value
17 |   }
18 |   Delay.oninput = function() {
19 |     feedbackDelay.parameters.get('delayTime').value=this.value
20 |     DelayLabel.innerHTML = this.value
21 |   }
22 |   Width.oninput = function() { WidthLabel.innerHTML = this.value}
23 |   Play.onclick = function() {
24 |     context.resume()
25 |     var newDelay= Number(Delay.value)+1000*128/context.sampleRate
26 |     feedbackDelay.parameters.get('delayTime').value= newDelay
27 |     let now = context.currentTime
28 |     NoiseGain.gain.setValueAtTime(0.5, now)
29 |     NoiseGain.gain.linearRampToValueAtTime(0, now + Width.value/1000)
30 |   }
31 | })


--------------------------------------------------------------------------------
/19 Wonders of audio worklets/PulseWave/Pulse.html:
--------------------------------------------------------------------------------
 1 | <button onclick=context.resume()>Start</button><br>
 2 | <input type=range min=0 max=2000 value=440 step='any' id='Freq'>Freq<br>
 3 | <input type=range min=0 max=1 value=0.5 step='any' id='Duty'>Duty cycle<br>
 4 | <input type=number min=0 max=360 value=0 step='any' id='Phase'>Phase
 5 | <script>
 6 |   let context= new AudioContext()
 7 |   context.audioWorklet.addModule('PulseWorklet.js').then(() => {
 8 |     let pulse = new AudioWorkletNode(context,'pulse-generator',
 9 |       {processorOptions:{phase:Phase.value}}
10 |     )
11 |     pulse.connect(context.destination)
12 |     Freq.oninput = () => pulse.parameters.get('frequency').value=Freq.value
13 |     Duty.oninput = () => pulse.parameters.get('duty').value=Duty.value
14 |     Phase.oninput = () => pulse.parameters.get('phase').value=Phase.value
15 |   })
16 | </script>


--------------------------------------------------------------------------------
/19 Wonders of audio worklets/PulseWave/PulseWorklet.js:
--------------------------------------------------------------------------------
 1 | registerProcessor('pulse-generator',class extends AudioWorkletProcessor {
 2 |   constructor(options) {
 3 |     super()
 4 |     if (typeof options.processorOptions !== 'undefined') this.phase = 0
 5 |     else this.phase = options.processorOptions.phase / 360
 6 |   }
 7 |   static get parameterDescriptors() { return [
 8 |     {name:'frequency',defaultValue: 440},
 9 |     {name:'duty',defaultValue:0.5,max:1,min:0},
10 |     {name:'phase',defaultValue:0,max:360,min:0}
11 |   ]}
12 |   process(inputs, outputs, params) {
13 |     for (let channel = 0; channel < outputs[0].length; ++channel) {
14 |       if (params.frequency.length === 1) {
15 |         for (let i = 0; i < outputs[0][channel].length; ++i) {
16 |           if (this.phase > params.duty[0]) outputs[0][channel][i]=-1
17 |           else outputs[0][channel][i]=1
18 |           this.phase += params.frequency[0] / sampleRate
19 |           this.phase = this.phase-Math.floor(this.phase)
20 |         }
21 |       } else {
22 |         for (let i = 0; i < outputs[0][channel].length; ++i) {
23 |           if (this.phase > params.duty[i]) outputs[0][channel][i]=-1
24 |           else outputs[0][channel][i]=1
25 |           this.phase += params.frequency[i] / sampleRate
26 |           this.phase = this.phase-Math.floor(this.phase)
27 |         }
28 |       }
29 |     }
30 |     return true
31 |   }
32 | })
33 | 


--------------------------------------------------------------------------------
/19 Wonders of audio worklets/README.md:
--------------------------------------------------------------------------------
 1 | # The Wonders of Audio Worklets
 2 | 
 3 | Here, we revisit previous examples, and show how they can be achieved using audio worklets instead.
 4 | 
 5 | - PulseWave: shows how pulse waves and square waves may be created without use of a Fourier series,
 6 | - Bit crusher worklet: a bit crusher designed without storing a wave shaping curve
 7 | - CompressorWorklet: a dynamic range compressor be implemented with very fast response
 8 | - StereoWidenerWorklet: a stereo enhancer that preserves signal power.
 9 | - KarplusStrong: the Karplus-Strong algorithm implemented without the limitations on the pitch range that come from the DelayNode in a feedback loop.
10 | 


--------------------------------------------------------------------------------
/19 Wonders of audio worklets/StereoWidenerWorklet/Stereo speech.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joshreiss/Working-with-the-Web-Audio-API/25a2e41c01e11d553cb36bcaba09321e34425e7c/19 Wonders of audio worklets/StereoWidenerWorklet/Stereo speech.wav


--------------------------------------------------------------------------------
/19 Wonders of audio worklets/StereoWidenerWorklet/stereoWidenerNode.html:
--------------------------------------------------------------------------------
 1 | <input type='range' min=-1 max=1 value=0 step='any' id='width'>
 2 | <script>
 3 |   let context= new AudioContext()
 4 |   context.audioWorklet.addModule('stereoWidenerWorklet.js').then(() => {
 5 |     let Widener= new AudioWorkletNode(context,'stereo-widener')
 6 |     let monoSource = context.createOscillator()
 7 |     let source = new StereoPannerNode(context,{pan:0.5})
 8 |     source.pan.value = 0.5
 9 |     monoSource.connect(source)
10 |     source.connect(Widener)
11 |     monoSource.start()
12 |     Widener.connect(context.destination)
13 |     width.oninput = () => {
14 |       context.resume()
15 |       Widener.parameters.get('width').value= width.value
16 |     }
17 |   })
18 | </script>
19 | 


--------------------------------------------------------------------------------
/19 Wonders of audio worklets/StereoWidenerWorklet/stereoWidenerWorklet.js:
--------------------------------------------------------------------------------
 1 | registerProcessor('stereo-widener', class extends AudioWorkletProcessor {
 2 |   static get parameterDescriptors() { return [
 3 |     {name:'width',defaultValue:0,minValue:-1,maxValue:1}
 4 |   ]}
 5 |   constructor(options) {
 6 |     super()
 7 |     options.numberOfOutputs=2
 8 |   }
 9 |   process(inputs, outputs, parameters) {
10 |     const input = inputs[0],output = outputs[0]
11 |     for (let channel = 0; channel < input.length; ++channel) {
12 |       for (let i = 0; i < input[channel].length; ++i) {
13 |         let L,R,M,S,newM,newS,newL,newR,W,norm
14 |         L=input[0][i]
15 |         if (input.length>1) R=input[1][i]
16 |         else R=input[0][i]
17 |         M = (L+R)/Math.sqrt(2) // obtain mid-signal from left and right
18 |         S = (L-R)/Math.sqrt(2) // obtain side-signal from left and right
19 |         W= (parameters.width[0]+1)*Math.PI/4
20 |         newM= M*Math.cos(W)
21 |         newS= S*Math.sin(W)
22 |         newL= (newM+newS)/Math.sqrt(2)
23 |         newR= (newM-newS)/Math.sqrt(2)
24 |         norm= Math.sqrt((L*L + R*R) / (newL*newL+newR*newR))
25 |         output[0][i]= norm*newL
26 |         output[1][i]= norm*newR
27 |       }
28 |     }
29 |     return true
30 |   }
31 | })
32 | 


--------------------------------------------------------------------------------
/19 Wonders of audio worklets/index.html:
--------------------------------------------------------------------------------
 1 | <h2>The Wonders of Audio Worklets</h2>
 2 | 
 3 | Here, we revisit previous examples, and show how they can be achieved using audio worklets instead.
 4 | 
 5 | Code examples correspond to examples from Chapter 19 in the book 'Working with the Web Audio API'.
 6 | 
 7 | <ol>
 8 |     <li><a href="PulseWave/Pulse.html">PulseWave</a> - shows how pulse waves and square waves may be created without use of a Fourier series</li>
 9 |     <li><a href="Bit crusher worklet/bitCrush.html">Bit crusher worklet</a> - a bit crusher designed without storing a wave shaping curve</li>
10 |     <li><a href="CompressorWorklet/compressor.html">CompressorWorklet</a> - a dynamic range compressor implemented with very fast response</li>
11 |     <li><a href="StereoWidenerWorklet/stereoWidenerNode.html">StereoWidenerWorklet</a> - a stereo enhancer that preserves signal power.</li>
12 |     <li><a href="KarplusStrong/KarplusStrongV2.html">KarplusStrong</a> - the Karplus-Strong algorithm implemented without the limitations on the pitch range that come from the DelayNode in a feedback loop</li>
13 | </ol>
14 | 
15 | 
16 | Feel free to contact me at joshua.reiss@qmul.ac.uk
17 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Working with the Web Audio API
 2 | 
 3 | Various simple Web Audio API examples
 4 | 
 5 | They demonstrate almost all audio nodes and other interfaces of the Web Audio API with short, working examples. The aim of these tutorials is to give very short but still fully functional examples for those trying to learn the API but not spend a long amount of time dissecting larger code samples, or understanding code snippets without their context. The examples are roughly ordered sequentially to cover the simplest Hello World to nodes that use more audio cor Web Audio programming concepts.
 6 | 
 7 | Code examples are organised into 19 sections, corresponding to the 19 chapters in the book 'Working with the Web Audio API'.
 8 | 
 9 | 1. [Introducing the Web Audio API](https://github.com/joshreiss/Working-with-the-Web-Audio-API/tree/master/01%20Introducing%20the%20Web%20Audio%20API) - A simple Hello World, generating sound with the Web Audio API, and building up to show more functionality
10 | 2. [Oscillators](https://github.com/joshreiss/Working-with-the-Web-Audio-API/tree/master/02%20Oscillators) - demonstrating the OscillatorNode and PeriodicWave
11 | 3. [Audio Buffer sources](https://github.com/joshreiss/Working-with-the-Web-Audio-API/tree/master/03%20Audio%20Buffer%20Sources) - showing the AudioBufferSourceNode and BufferSource, with examples on creating buffered noise, pausing playback, playing audio backwards...
12 | 4. [The Constant Source Node](https://github.com/joshreiss/Working-with-the-Web-Audio-API/tree/master/04%20Constant%20Sources) - all about the ConstantSourceNode, with examples for grouping multitrack audio, DC offsets and another way to generate square waves
13 | 5. [Scheduling and setting parameters](https://github.com/joshreiss/Working-with-the-Web-Audio-API/tree/master/05%20Parameter%20automation) - showcasing all the parameter scheduling methods (SetValueAtTime, SetValueCure ...) with examples on crossfading, beep sounds, sinusoidal modeling of bell sounds and more
14 | 6. [Connecting Audio Parameters and Modulation](https://github.com/joshreiss/Working-with-the-Web-Audio-API/tree/master/06%20Connecting%20audio%20parameters%20and%20modulation) - explaining how to connect to audio parameters, and other types of connections, illustrated with AM and FM synthesis examples
15 | 7. [Analysis and Visualization](https://github.com/joshreiss/Working-with-the-Web-Audio-API/tree/master/07%20Analysis%20and%20visualization) - in-depth discussion of the Analyser node, with an example analysing and visualizing a PeriodicWave in time and frequency
16 | 8. [Loading, playing and recording](https://github.com/joshreiss/Working-with-the-Web-Audio-API/tree/master/08%20Loading%20and%20recording) - all the other types of sources and destinations, including MediaElementAudioSourceNode, MediaStreamAudioDestinationNode and MediaElementAudioSourceNode. It also covers decodeAudioData. Examples include a level meter and two approaches to recording the output of an audio node
17 | 9. [OfflineAudioContext](https://github.com/joshreiss/Working-with-the-Web-Audio-API/tree/master/09%20OfflineAudioContext) - three examples of offline audio processing, both with and without use of an online audio context.
18 | 10. [Delay](https://github.com/joshreiss/Working-with-the-Web-Audio-API/tree/master/10%20Delay) - all about the DelayNode, with examples of comb filtering, vibrato, feedback delay and the Karplus-Strong algorithm
19 | 11. [Filtering](https://github.com/joshreiss/Working-with-the-Web-Audio-API/tree/master/11%20Filters) - covers the BiquadFilterNode and the IIRFilterNode, as well as examples of how the filters can go unstable
20 | 12. [Waveshaper](https://github.com/joshreiss/Working-with-the-Web-Audio-API/tree/master/12%20Waveshaper) - covers the WaveshaperNode, with examples of clipping and bit crushing
21 | 13. [Dynamic range compression](https://github.com/joshreiss/Working-with-the-Web-Audio-API/tree/master/13%20Dynamic%20Range%20Compression) - covers the DynamicsCompressorNode with examples focused on the compressor's Attack and Release, and on use of all compressor parameters
22 | 14. [Reverberation](https://github.com/joshreiss/Working-with-the-Web-Audio-API/tree/master/14%20Reverb) - on use of the ConvolverNode, with an example on general use with a simulated impulse response, and an example on use of normalization with an impulse response loaded from a file
23 | 15. [Mixing audio](https://github.com/joshreiss/Working-with-the-Web-Audio-API/tree/master/15%20Mixing%20audio) - use of the ChannelMergerNode and ChannelSplitterNode. Examples include flipping channels in a stereo audio stream, and ping pong delay.
24 | 16. [Stereo panning](https://github.com/joshreiss/Working-with-the-Web-Audio-API/tree/master/16%20Stereo%20panning) - on the StereoPannerNode, with examples on basic use and a stereo enhancer effect
25 | 17. [Spatialized sound](https://github.com/joshreiss/Working-with-the-Web-Audio-API/tree/master/17%20Spatial%20audio) - use of the panner node. Examples are given for use of all of the node's parameters, either with a moving listener in 2D  or moving source in 3D.
26 | 18. [Working with AudioWorklets](https://github.com/joshreiss/Working-with-the-Web-Audio-API/tree/master/18%20Working%20with%20AudioWorklets) - 8 examples of audio worklets, each one introducing different aspects. Examples also show generating noise, panning with many loudspeakers and the exponential moving average smoothing filter
27 | 19. [The wonders of audio worklets](https://github.com/joshreiss/Working-with-the-Web-Audio-API/tree/master/19%20Wonders%20of%20audio%20worklets) - revisits examples from previous chapters, but now improved by using audio worklets; stereo enhancer, bit crusher, compressor, pulse wave generator and Karplus-Strong algorithm
28 | 
29 | 
30 | 
31 | Feel free to contact me at joshua.reiss@qmul.ac.uk
32 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <h2>Working with the Web Audio API</h2>
 2 | 
 3 | Various simple Web Audio API examples
 4 | 
 5 | They demonstrate almost all audio nodes and other interfaces of the Web Audio API with short, working examples. The aim of these tutorials is to give very short but still fully functional examples for those trying to learn the API but not spend a long amount of time dissecting larger code samples, or understanding code snippets without their context. The examples are roughly ordered sequentially to cover the simplest Hello World to nodes that use more audio cor Web Audio programming concepts.
 6 | 
 7 | Code examples are organised into 19 sections, corresponding to the 19 chapters in the book 'Working with the Web Audio API'.
 8 | 
 9 | <ol>
10 |     <li><a href="01 Introducing the Web Audio API/">Introducing the Web Audio API</a> - A simple Hello World, generating sound with the Web Audio API, and building up to show more functionality</li>
11 |     <li><a href="02 Oscillators/">Oscillators</a> - demonstrating the OscillatorNode and PeriodicWave</li>
12 |     <li><a href="03 Audio Buffer Sources/">Audio Buffer sources</a> - showing the AudioBufferSourceNode and BufferSource, with examples on creating buffered noise, pausing playback, playing audio backwards...</li>
13 |     <li><a href="04 Constant Sources/">The Constant Source Node</a> - all about the ConstantSourceNode, with examples for grouping multitrack audio, DC offsets and another way to generate square waves</li>
14 |     <li><a href="05 Parameter automation/">Scheduling and setting parameters</a> - showcasing all the parameter scheduling methods (SetValueAtTime, SetValueCure ...) with examples on crossfading, beep sounds, sinusoidal modeling of bell sounds and more</li>
15 |     <li><a href="06 Connecting audio parameters and modulation/">Connecting Audio Parameters and Modulation</a>/06%20Connecting%20audio%20parameters%20and%20modulation) - explaining how to connect to audio parameters, and other types of connections, illustrated with AM and FM synthesis examples</li>
16 |     <li><a href="07 Analysis and visualization/">Analysis and Visualization</a> - in-depth discussion of the Analyser node, with an example analysing and visualizing a PeriodicWave in time and frequency</li>
17 |     <li><a href="08 Loading and recording/">Loading, playing and recording</a> - all the other types of sources and destinations, including MediaElementAudioSourceNode, MediaStreamAudioDestinationNode and MediaElementAudioSourceNode. It also covers decodeAudioData. Examples include a level meter and two approaches to recording the output of an audio node</li>
18 |     <li><a href="09 OfflineAudioContext/">OfflineAudioContext</a> - three examples of offline audio processing, both with and without use of an online audio context.</li>
19 |     <li><a href="10 Delay/">Delay</a> - all about the DelayNode, with examples of comb filtering, vibrato, feedback delay and the Karplus-Strong algorithm</li>
20 |     <li><a href="11 Filters/">Filtering</a> - covers the BiquadFilterNode and the IIRFilterNode, as well as examples of how the filters can go unstable</li>
21 |     <li><a href="12 Waveshaper/">Waveshaper</a> - covers the WaveshaperNode, with examples of clipping and bit crushing</li>
22 |     <li><a href="13 Dynamic Range Compression/">Dynamic range compression</a> - covers the DynamicsCompressorNode with examples focused on the compressor's Attack and Release, and on use of all compressor parameters</li>
23 |     <li><a href="14 Reverb/">Reverberation</a> - on use of the ConvolverNode, with an example on general use with a simulated impulse response, and an example on use of normalization with an impulse response loaded from a file</li>
24 |     <li><a href="15 Mixing audio/">Mixing audio</a> - use of the ChannelMergerNode and ChannelSplitterNode. Examples include flipping channels in a stereo audio stream, and ping pong delay.</li>
25 |     <li><a href="16 Stereo panning/">Stereo panning</a> - on the StereoPannerNode, with examples on basic use and a stereo enhancer effect</li>
26 |     <li><a href="17 Spatial audio/">Spatialized sound</a> - use of the panner node. Examples are given for use of all of the node's parameters, either with a moving listener in 2D  or moving source in 3D.</li>
27 |     <li><a href="18 Working with AudioWorklets/">Working with AudioWorklets</a> - 8 examples of audio worklets, each one introducing different aspects. Examples also show generating noise, panning with many loudspeakers and the exponential moving average smoothing filter</li>
28 |     <li><a href="19 Wonders of audio worklets/">The wonders of audio worklets</a> - revisits examples from previous chapters, but now improved by using audio worklets; stereo enhancer, bit crusher, compressor, pulse wave generator and Karplus-Strong algorithm</li>
29 | </ol>
30 | 
31 | 
32 | Feel free to contact me at joshua.reiss@qmul.ac.uk
33 | 


--------------------------------------------------------------------------------