Making Music with the Web Audio API, JSConf Colombia 2023

Slide 1

Slide 1 text

Steve Kinney — JSConf Colombia 2023 Making Music with the Web Audio API.

Slide 2

Slide 2 text

Hi, I’m Steve. I work at Temporal.

Slide 3

Slide 3 text

https:// synthesizzler.vercel.app Also, you can scan this code at any time.

Slide 4

Slide 4 text

Someone snuck a synthesizer into your web browser.

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

const context = new AudioContext();

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

const oscillator = context.createOscillator();

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

oscillator.connect(context.destination);

Slide 14

Slide 14 text

oscillator.connect(context.destination); const context = new AudioContext(); const oscillator = context.createOscillator();

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

oscillator.connect(context.destination); const context = new AudioContext(); const oscillator = context.createOscillator();

Slide 18

Slide 18 text

oscillator.connect(volume); const context = new AudioContext(); const oscillator = context.createOscillator(); const volume = context.createGain(); volume.connect(context.destination);

Slide 19

Slide 19 text

const oscillator = context.createOscillator(); oscillator.type = 'sine'; oscillator.frequency.value = 440; oscillator.connect(context.destination); oscillator.start();

Slide 20

Slide 20 text

oscillator.start(); oscillator.stop(); oscillator.start(); This won’t work.

Slide 21

Slide 21 text

oscillator.stop(); oscillator.disconnect(); oscillator = null;

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Let’s take a look at this in action.

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

A3 220 Hz A4 440 Hz A5 880 Hz

Slide 26

Slide 26 text

A3 220 Hz A4 440 Hz B4 C5 C#5 D5 D#5 E5 F5 F#5 G5 G#5

Slide 27

Slide 27 text

https://synthesizzler.vercel.app/ notes

Slide 28

Slide 28 text

const A4 = 440; const A4_NOTE_NUMBER = 69; const TWELFTH_ROOT_OF_TWO = Math.pow(2, 1 / 12); export function getFrequency() { const noteNumber = noteToNumber(note); return A4 * Math.pow(TWELFTH_ROOT_OF_TWO, noteNumber - A4_NOTE_NUMBER); }

Slide 29

Slide 29 text

Note Frequency (hz) A 440.00 A̅ 476.67 B 513.33 C 550.00 C̅ 586.67 D 623.33 D̅ 660.00 E 696.67 F 733.33 F̅ 770.00 G 806.67 G̅ 843.33 A 880.00

Slide 30

Slide 30 text

Note Frequency (hz) Frequency (hz) A 440.00 A̅ 476.67 B 513.33 C 550.00 550.00 C̅ 586.67 595.83 D 623.33 641.67 D̅ 660.00 687.50 E 696.67 733.33 F 733.33 779.17 F̅ 770.00 825.00 G 806.67 870.83 G̅ 843.33 916.67 A 880.00 962.50 A̅ 1008.33 B 1054.17 C 1100.00

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

const oscillator = context.createOscillator(); const gain = context.createGain(); oscillator.connect(gain); gain.connect(context.destination); oscillator.type = waveType; oscillator.frequency.value = frequency; gain.gain.setValueAtTime(0, startTime); gain.gain.linearRampToValueAtTime(1, startTime + duration / 100); gain.gain.exponentialRampToValueAtTime(0.0001, startTime + duration); oscillator.start(startTime); oscillator.stop(startTime + duration + 0.05);

Slide 33

Slide 33 text

const startTime = context.currentTime; const duration = 1; gain.gain.setValueAtTime(0, startTime); gain.gain.linearRampToValueAtTime(1, startTime + duration / 100); gain.gain.exponentialRampToValueAtTime(0.0001, startTime + duration); oscillator.start(startTime); oscillator.stop(startTime + duration + 0.05);

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

const startOscillator = ( context, note, ): OscillatorAndGain = { const oscillator = context.createOscillator(); const gain = context.createGain(); oscillator.frequency.value = getFrequency(note); gain.gain.value = 0.01; oscillator.connect(gain); gain.connect(context.destination); gain.gain.linearRampToValueAtTime(1, context.currentTime + 0.1); oscillator.start(); return { oscillator, gain }; };

Slide 37

Slide 37 text

Emits a keyDown event

Slide 38

Slide 38 text

https://synthesizzler.vercel.app/ keys

Slide 39

Slide 39 text

⏰ Keeping time.

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

get secondsPerBeat() { return 60 / this.beatsPerMinute; }

Slide 42

Slide 42 text

public start() { if (this.on) return; this.on = true; this.currentBeat = 0; this.tick(); } public stop() { this.on = false; this.nextScheduledBeat = null; if (this.interval) clearTimeout(this.interval); }

Slide 43

Slide 43 text

public tick = () = { if (!this.on) return; if (!this.nextScheduledBeat) { this.nextScheduledBeat = this.context.currentTime; } this.incrementBeat(); this.onTick(this.currentBeat, this.nextScheduledBeat); this.interval = setTimeout(this.tick, this.secondsPerBeat * 1000); this.nextScheduledBeat += this.secondsPerBeat; };