JavaScript for Sound Artists

JavaScript for Sound Artists

by William Turner, Steve Leonard
Released January 2017
Publisher(s): Focal Press
ISBN: 9781317334934

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Learn how to program JavaScript while creating interactive audio applications with JavaScript for Sound Artists: Learn to Code With the Web Audio API! William Turner and Steve Leonard showcase the basics of JavaScript language programing so that readers can learn how to build browser based audio applications, such as music synthesizers and drum machines. The companion website offers further opportunity for growth. Web Audio API instruction includes oscillators, audio file loading and playback, basic audio manipulation, panning and time. This book encompasses all of the basic features of JavaScript with aspects of the Web Audio API to heighten the capability of any browser.

Table of contents

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

Product information

  • Title: JavaScript for Sound Artists
  • Author(s): William Turner, Steve Leonard
  • Release date: January 2017
  • Publisher(s): Focal Press
  • ISBN: 9781317334934