Nothing Sounds Quite Like An NG-808

A talk given at Seattle.js in February 2016, that introduces NG-808, a drum machine written using Angular 2 and TypeScript.

Transcript

1. Nothing sounds quite like an NG-808 Leigh Caplan texel1@gmail.com github.com/texel @texel
3. Demo!
4. How does it work?
5. How does it work? ‣ Web Audio APIs ‣ Angular 2 ‣ TypeScript
6. Web Audio APIs
7. Signal Graph Context
8. Signal Graph Context Context AudioBufferSourceNode
9. Signal Graph Context AudioBufferSourceNode GainNode
10. Signal Graph Context AudioBufferSourceNode GainNode DynamicsCompressorNode
11. Signal Graph Context AudioBufferSourceNode GainNode DynamicsCompressorNode AudioDestinationNode
12. Signal Graph Context AudioBufferSourceNode GainNode DynamicsCompressorNode AudioDestinationNode
13. Signal Graph Context AudioBufferSourceNode OscillatorNode GainNode BiquadFilterNode AnalyserNode AudioDestinationNode [128, 150, 240, 101, 23, 12, 110, ...]
14. Analyser Node AnalyserNode [128, 150, 240, 101, 23, 12, 110, ...]
15. Signal Graph Code var context = new AudioContext(); var source = new AudioBufferSourceNode(); var osc = new OscillatorNode(); var gain = new GainNode(); var analyzer = new AnalyserNode(); var filter = new BiquadFilterNode(); source.connect(gain); osc.connect(gain); gain.connect(analyzer); gain.connect(filter); filter.connect(context.destination);
16. Sequencing
17. Sequencing ‣ setTimeout is imprecise ‣ Setting start time using Web Audio API allows for sample-accurate placement of events
18. Sequencing Source: http://www.html5rocks.com/en/tutorials/audio/scheduling/
19. Angular 2
20. Angular 2 Advantages
21. Speed
22. Modularity App List Sidebar ListItem ListItem
24. TypeScript
25. TypeScript ‣ Developed by MS ‣ Superset of ES6 ‣ Compiles to ES5 or ES6 ‣ Adds type system and other features to vanilla ES6
26. TypeScript let addOne = (i) => i + 1;
27. TypeScript // (i: number) => number let addOne = (i: number) => i + 1;
28. TypeScript // (i: number) => number let addOne = (i: number) => i + 1; var three = addOne(2); // var three: number
29. TypeScript // (i: number) => number let addOne = (i: number) => i + 1; var three = addOne(2); // var three: number var three = "tacos"; // Nope!
30. TypeScript // (i: number) => number let addOne = (i: number) => i + 1; var three = addOne(2); // var three: number var three = "tacos"; // Nope! let wtf = addOne("tacos"); // Also nope!
31. TypeScript in Angular 2
32. Angular 2 Components import {Component, Input} from 'angular2/core'; @Component({ selector: "awesome-button", template: ` <button (click)="onClick()"> {{buttonText}} </button> ` }) class AwesomeButton { @Input() buttonText; onClick() { console.log("You clicked the awesome button!"); } }
33. Angular 2 Components import {Component, Input} from 'angular2/core'; @Component({ selector: "awesome-button", template: ` <button (click)="onClick()"> {{buttonText}} </button> ` }) class AwesomeButton { @Input() buttonText; onClick() { console.log("You clicked the awesome button!");
34. <button (click)="onClick()"> {{buttonText}} </button> ` }) class AwesomeButton { @Input() buttonText; onClick() { console.log("You clicked the awesome button!"); } }
35. Angular 2 Components import {Component, Input} from 'angular2/core'; @Component({ selector: "awesome-button", template: ` <button (click)="onClick()"> {{buttonText}} </button> ` }) class AwesomeButton { @Input() buttonText; onClick() { console.log("You clicked the awesome button!"); } }
36. template: ` <button (click)="onClick()"> {{buttonText}} </button> ` }) class AwesomeButton { @Input() buttonText; onClick() { console.log("You clicked the awesome button!"); } }
37. Use in a template <awesome-button [buttonText]="Click me!"> </awesome-button>
38. Use in a template <awesome-button [buttonText]="Click me!"> </awesome-button> AwesomeButton @Input() buttonText; [buttonText] <button (click)="onClick()"> Click me! </button>
39. NG-808 View <div class="container-fluid"> <div class="row"> <div class="col-lg-2"> <h1>NG-808 MK2</h1> </div> <controls></controls> <sequence-selector></sequence-selector> </div> <sequencer></sequencer> </div>
40. NG-808 View <div class="container-fluid"> <div class="row"> <div class="col-lg-2"> <h1>NG-808 MK2</h1> </div> <controls></controls> <sequence-selector></sequence-selector> </div> <sequencer></sequencer> </div>
41. Q&A Leigh Caplan @texel github.com/texel soundcloud.com/quadrant Links https://developer.mozilla.org/en-US/docs/Web/API/ Web_Audio_API/Visualizations_with_Web_Audio_API
 http://www.html5rocks.com/en/tutorials/audio/scheduling/
 https://splice.com