JavaScript for Sound Artists: Learn to Code with the Web Audio API

Cover
Half Title
Title Page
Copyright Page
Dedication
Table of Contents
Preface
1. Overview and Setup
What Is a Program?
What Is JavaScript?
HTML, CSS, and JavaScript
What Is a Web Application?
What Is the Web Audio API?
Setting Up Your Work Environment
How to View in Browser
How to Create Code Snippets
Accessing the Developer Tools
Troubleshooting Problems and Getting Help
2. Getting Started with JavaScript and the Web Audio API
Hello Sound Program
Variables
Null
Documenting Your Code with Comments
Exploring Variables with an Oscillator
console.log()
String
Built in String Methods
The Length Property
Numbers
How to Determine the Data Type of a Variable?
Examples of Arithmetic Operators
Number to String Conversion
BigInt
Arrays
Summary
3. Operators
What Are Operators?
Assignment Operators
Assignment
Addition Assignment
Subtraction Assignment
Multiplication Assignment
Division Assignment
Modulo Assignment
The Boolean Data Type
Comparison Operators
Equality Operator
Strict Equality Operator
Greater Than and Less Than Operators
Greater Than or Equal To Operator
Less Than or Equal To Operator
Not Equal To Operator
Strict Not Equal To Operator
Logical Operators
The Logical AND Operator
The Logical OR Operator
The NOT Operator
Summary
4. Conditional Statements, Loops, and Scope
Conditional Statements
The If Statement
The Switch Statement
Ternary Operator
Loops
For Loops
Using For Loops with Arrays
While Loops
When to Use for Loops and When to Use While Loops
Scope
Block Scoped Variables Using Let and Const
Non-Block Scoped Variables Using Var
Local and Higher Scope Access
Hoisting and Variables
Hoisting with Let and Const
Summary
5. Functions
Functions—A Simple Example
Parts of a Function
Function Expressions
Abstracting Oscillator Playback
A Working Effects Box Example
Default Arguments
The Arguments Object
Rest Parameter
Function Scope
Why You Should Always Declare Your Variables
Hoisting and Functions
Anonymous Functions
Closures
What Is a Closure?
Callback Functions
Working with JavaScript’s Built-In Callback Functions
filter()
map()
Function Arrow Syntax
Recursion
Summary
6. Objects
JavaScript Data Types
Looping through Objects
When to Use Objects Rather than Arrays
How to Check If an Object Has Access to a Particular Property or Method
Cloning Objects
Prototypal Inheritance
Object.creates Nested Object Gotcha
The “this” Keyword
The bind Function
Summary
7. Node Graphs and Oscillators
The AudioContext() Method
Node Graphs
Oscillators
The stop Method
The onended Property
How to Stop Oscillators and Restart Them
The type Property
The frequency Property
The detune Property
Summary
8. Using HTML and CSS to Build User Interfaces
What Is a User Interface?
HTML
Explanation of the HTML Template
Understanding HTML Elements
Form and Input Elements
CSS
Comments
Element Selectors
Grouping Selectors
Descendent Selectors
Child Selectors
class and id
Modifying the App Interface
Margin, Border, and Padding
Removing List Element Bullet Points
Font Size, Style (Type), and Color
Centering Block-Level Elements
Summary
9. DOM Programming with JavaScript
How Does JavaScript Communicate with the DOM?
HTML
JavaScript
Building the Application
How to Trigger an Oscillator by Clicking a Button
Toggling the Start/Stop Text
Programming the Frequency Slider
Changing the Frequency in Real Time
Changing Waveform Types
Completed Code with Waveform Selection
Giving an Outline to the Selected Waveform Type
Summary
10. Simplifying DOM Programming with JQuery
What is JQuery?
JQuery Setup
Referencing JQuery Directly
Using JQuery from a CDN
How to Use JQuery
Selecting HTML Elements
Storing DOM Selectors as Variables
Using Methods
HTML
JQuery/JavaScript to Change a Single Property
JQuery/JavaScript to Change Multiple Properties
Method Chaining
HTML
CSS
JQuery/JavaScript
HTML
JQuery/JavaScript
The this Keyword
HTML
JQuery/JavaScript
Refactoring the Oscillator Player to Use JQuery
Without JQuery
With JQuery
Setting Up the Event Listener for the User-Selected List Element
Event Listener without JQuery
Event Listener with JQuery
Modifying the Code in setInterval
setInterval Method without JQuery
setInterval Method with JQuery
onOff Method without JQuery
$onOff Selector with JQuery
Summary
11. Loading and Playing Audio Files
Prerequisites
XMLHttpRequest and Fetch API
The Two Steps to Loading an Audio File
Loading an Audio File with the XMLHttpRequest Object
get Requests
A Word on Audio File Type Compatibility
Synchronous versus Asynchronous Code Execution
Playing the Audio Content
Processing the Audio Buffer with the Node Graph
Loading Audio Files Using the Fetch API
Summary
12. Factories, Constructors, and Classes
JavaScript and the Concept of Class
What Are Classes?
The Factory Pattern
Dynamic Object Extension
Private Data
Getters and Setters
Constructors and the New Keyword
Adding Methods to Constructors
The Prototype Object and the Prototype Property
Why Do Constructors Exist If You Can Do the Same Thing with Factories?
Web Audio API Nodes Can Be Written in Constructor Syntax
Classes
Classes in JavaScript Are Just Constructors with a Different Syntax
A Class Example
Private Data and Classes
Summary
13. Abstracting the File Loader
Thinking about Code Abstraction
Creating the Abstraction
Walking through the Code
Summary
14. The Node Graph and Working with Effects
How to Think About the Node Graph
Gain Nodes
The Placement of Nodes Is Up to You
What Effects Are Available?
How to Determine the Nodes You Need to Create the Effect You Want
A Real-World Example
Some Effects Require Development Work
Summary
15. Adding Flexibility to the Audio Loader Abstraction
The Problem
Complete Working Library Update Incorporating Node Graph Code
Summary
16. The Biquad Filter Node
Using the Biquad Filter Node
Filter Types
Creating an Equalizer
Graphic EQ
Parametric EQ
Summary
17. The Convolver Node
Convolution Reverb
Where to Get Pre-Recorded Impulse Response Files
Using Impulse Response Files
HTML
JavaScript
Controlling the Amount of Reverberation
Summary
18. Stereo Panning, Channel Splitting, and Merging
The Stereo Panner Node
The Channel Splitter
The Channel Merger
Merging All Channels of a Multichannel File into a Single Mono Channel
Using the Merger and Splitter Nodes Together
Summary
19. The Delay Node
The Delay Node
Creating Echo Effects
Creating Slap Back Effects
Creating a Ping-Pong Delay
Summary
20. Dynamic Range Compression
The Dynamics Compressor Node
Summary
21. Time
The Timing Clock
The start Method
Looping Sounds
Update Your Audio Loader Library
Changing Audio Parameters over Time
The audio Parameter Methods
The setValueAtTime Method
The exponentialRampToValueAtTime Method
The linearRampToValueAtTime Method
The setTargetAtTime() Method
The setValueCurveAtTime() Method
Summary
22. Creating Audio Visualiza tions
A Brief Word on Fourier Analysis
A Brief Explanation of Binary-Coded Decimal Numbers
The Spectrum Analyzer
JavaScript/JQuery
HTML
CSS
Walking through the Code
Storing the Frequency Data in an Array
How to Think About the frequencyData Array
Building the Display Interface
Connecting the Analyzer to the DOM
Summary
23. Building a Step Sequencer
The Problem
Can I Use setInterval or setTimeout?
The Solution
How It Works
Changing Tempo
Building the Sequencer
Playing Back Sounds in Sequence
Creating the User Interface Grid
HTML
CSS
Adding Interactivity to the Grid Elements
Summary
24. AJAX and JSON
AJAX
JSON
Making an AJAX Call to the iTunes Search API
How the Code Works
Creating Your Own Web API to Reference Synthesizer Patch Data
Node.js
Launching the Terminal
Launching Node.JS
Getting Started
Node.JS Hello World
Building a Simple Web API
How the Code Works
Client Request
Building a Synth Application to Consume the Data
The Patch Data Explained
HTML
CSS
How the Code Works
Extending the API
module.js
Summary
25. The Future of JavaScript and the Web Audio API
Web Audio 3D Spacial Positioning
Raw Modification of Audio Buffer Data
Suggestions for Continued Learning
JavaScript
Node.js
Libraries and Front-End Frameworks
The Web MIDI API
Open Sound Control
Summary
Further Reading
Book Website
Index