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

Cover
Half Title
Title Page
Copyright Page
Table of Contents
Preface
Acknowledgment
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
Setup View in Browser for Windows
Setup View in Browser for Mac
How to Create Code Snippets
Accessing the Chrome 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
toUpperCase()
toLowerCase()
charAt()
replace()
slice()
The length Property
Numbers
How to Determine the Data Type of a Variable
Examples of Arithmetic Operators
Examples of Precedence
Math.min() and Math.max()
Math.ceil() and Math.floor()
Math.random()
Math.abs()
Number-to-String Conversion
Arrays
push()
pop()
shift()
unshift()
concat()
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 and Loops
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
Summary
5. Functions
Functions—A Simple Example
Parts of a Function
Function Expressions
Abstracting Oscillator Playback
A Working Effects Box Example
The Arguments Object
Function Scope
Why You Should Always Declare Your Variables with var
Variable Hoisting
How Hoisting Affects Functions
Anonymous Functions
Closures
What Is a Closure?
Callback Functions
Working with JavaScript’s Built-In Callback Functions
filter()
map()
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
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
The Two Steps to Loading an Audio File
The XMLHttpRequest Object
get Requests
A Word on Audio File Type Compatibility
Synchronous versus Asynchronous Code Execution
Processing the Audio Buffer with the Node Graph
Summary
12. Factories and Constructors
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?
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. The Biquad Filter Node
Using the Biquad Filter Node
Filter Types
Creating an Equalizer
Graphic EQ
Parametric EQ
Summary
16. 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
17. 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
18. The Delay Node
The Delay Node
Creating Echo Effects
Creating Slap Back Effects
Creating a Ping-Pong Delay
Summary
19. Dynamic Range Compression
The Dynamics Compressor Node
Summary
20. 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
21. Creating Audio Visualizations
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
22. Adding Flexibility to the Audio Loader Abstraction
The Updated Interface
Modifying the Library
Modifying audioBatchLoader
An Explanation of the Previous Code Edit
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
HTML
JavaScript
Creating Your Own Web API to Reference Synthesizer Patch Data
The Data Structure
HTML
CSS
How the Code Works
Building on the API
data.js
module.js
Extend the JSON Object
Summary
25. The Future of JavaScript and the Web Audio API
The Web Audio API 1.0
3D Spacial Positioning
Raw Modification of Audio Buffer Data
Suggestions for Continued Learning
JavaScript 6
node.js
The Web MIDI API
Open Sound Control
Summary
Further Reading
Book Website
Index