Making Music with the Web Audio API, JSConf Colombia 2023

Transcript

1. Steve Kinney — JSConf Colombia 2023 Making Music with the Web Audio API.
2. Hi, I’m Steve. I work at Temporal.
3. https:// synthesizzler.vercel.app Also, you can scan this code at any time.
4. Someone snuck a synthesizer into your web browser.
9. const context = new AudioContext();
11. const oscillator = context.createOscillator();
13. oscillator.connect(context.destination);
14. oscillator.connect(context.destination); const context = new AudioContext(); const oscillator = context.createOscillator();
17. oscillator.connect(context.destination); const context = new AudioContext(); const oscillator = context.createOscillator();
18. oscillator.connect(volume); const context = new AudioContext(); const oscillator = context.createOscillator(); const volume = context.createGain(); volume.connect(context.destination);
19. const oscillator = context.createOscillator(); oscillator.type = 'sine'; oscillator.frequency.value = 440; oscillator.connect(context.destination); oscillator.start();
20. oscillator.start(); oscillator.stop(); oscillator.start(); This won’t work.
21. oscillator.stop(); oscillator.disconnect(); oscillator = null;
23. Let’s take a look at this in action.
25. A3 220 Hz A4 440 Hz A5 880 Hz
26. A3 220 Hz A4 440 Hz B4 C5 C#5 D5 D#5 E5 F5 F#5 G5 G#5
27. https://synthesizzler.vercel.app/ notes
28. 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); }
29. 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
30. 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
32. 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);
33. 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);
36. 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 }; };
37. Emits a keyDown event
38. https://synthesizzler.vercel.app/ keys
39. ⏰ Keeping time.
41. get secondsPerBeat() { return 60 / this.beatsPerMinute; }
42. 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); }
43. 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; };
44. https://synthesizzler.vercel.app/ metronome
45. https://synthesizzler.vercel.app/ step-sequencer
46. Someone snuck a synthesizer into your web browser.
47. Someone snuck a web browser into your synthesizer.
48. +
49. https://synthesizzler.vercel.app/ theremin
52. Music is pretty awesome.
53. The web is pretty awesome.
54. Music and the web are even more awesome when their together.
55. Thank you! @stevekinney https://temporal.io