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


6559cad8a96cc04-261x361.jpg Author William Turner
Isbn 1138961531
File size 5MB
Year 2017
Pages 250
Language English
File format PDF
Category information technologies


 

JavaScript for Sound Artists Learn to Code with the Web Audio API JavaScript for Sound Artists Learn to Code with the Web Audio API Authored by: William Turner Edited by: Steve Leonard CRC Press Taylor & Francis Group 6000 Broken Sound Parkway NW, Suite 300 Boca Raton, FL 33487-2742 © 2017 by Taylor & Francis Group, LLC CRC Press is an imprint of Taylor & Francis Group, an Informa business No claim to original U.S. Government works Printed on acid-free paper Version Date: 20161208 International Standard Book Number-13: 978-1-138-96153-1 (Paperback) This book contains information obtained from authentic and highly regarded sources. Reasonable efforts have been made to publish reliable data and information, but the author and publisher cannot assume responsibility for the validity of all materials or the consequences of their use. The authors and publishers have attempted to trace the copyright holders of all material reproduced in this publication and apologize to copyright holders if permission to publish in this form has not been obtained. If any copyright material has not been acknowledged please write and let us know so we may rectify in any future reprint. Except as permitted under U.S. Copyright Law, no part of this book may be reprinted, reproduced, transmitted, or utilized in any form by any electronic, mechanical, or other means, now known or hereafter invented, including photocopying, microfilming, and recording, or in any information storage or retrieval system, without written permission from the publishers. For permission to photocopy or use material electronically from this work, please access www. copyright.com (http://www.copyright.com/) or contact the Copyright Clearance Center, Inc. (CCC), 222 Rosewood Drive, Danvers, MA 01923, 978-750-8400. CCC is a not-for-profit organization that provides licenses and registration for a variety of users. For organizations that have been granted a photocopy license by the CCC, a separate system of payment has been arranged. Trademark notice: Product or corporate names may be trademarks or registered trademarks, and are used only for identification and explanation without intent to infringe. Library of Congress Cataloging‑in‑Publication Data Names: Turner, William (Web site developer), author. | Leonard, Steve (Web site developer), author. Title: JavaScript for sound artists : learn to code with the Web Audio API / William Turner, Steve Leonard. Description: Boca Raton : Taylor & Francis, CRC Press, 2017. Identifiers: LCCN 2016032832| ISBN 9781138961531 (pbk. : alk. paper) | ISBN 9781138731134 (hardback : alk. paper) Subjects: LCSH: Computer sound processing. | JavaScript (Computer program language) | Webcasting. Classification: LCC TK7881.4 .T87 2017 | DDC 006.5--dc23 LC record available at https://lccn.loc.gov/2016032832 Visit the Taylor & Francis Web site at http://www.taylorandfrancis.com and the CRC Press Web site at http://www.crcpress.com Contents Preface xv Acknowledgment xix 1. Overview and Setup 1 What Is a Program? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1 What Is JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1 HTML, CSS, and JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2 What Is a Web Application? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3 What Is the Web Audio API? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3 Setting Up Your Work Environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4 Setup View in Browser for Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6 Setup View in Browser for Mac . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6 How to Create Code Snippets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6 Accessing the Chrome Developer Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7 Troubleshooting Problems and Getting Help . . . . . . . . . . . . . . . . . . . . . . . . . .8 v 2. Getting Started with JavaScript and the Web Audio API 9 Hello Sound Program . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9 Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10 null . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12 Documenting Your Code with Comments . . . . . . . . . . . . . . . . . . . . . . . . . . .12 Exploring Variables with an Oscillator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12 console.log() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13 String . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14 Built-In String Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15 toUpperCase() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15 toLowerCase() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15 charAt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15 replace() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16 slice() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16 The length Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17 Numbers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17 How to Determine the Data Type of a Variable . . . . . . . . . . . . . . . . . . . . .17 Examples of Arithmetic Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18 Examples of Precedence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18 Math.min() and Math.max() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19 Math.ceil() and Math.floor() . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19 Math.random() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19 Math.abs() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20 Number-to-String Conversion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20 Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20 push() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21 pop() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21 shift() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22 unshift() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22 concat() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22 3. Operators 23 What Are Operators? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23 Assignment Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24 Assignment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24 Addition Assignment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24 Subtraction Assignment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25 Multiplication Assignment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25 Division Assignment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25 Modulo Assignment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25 The Boolean Data Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25 Comparison Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26 Equality Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26 vi Contents Strict Equality Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .27 Greater Than and Less Than Operators . . . . . . . . . . . . . . . . . . . . . . . . .27 Greater Than or Equal to Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . .27 Less Than or Equal to Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28 Not Equal to Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28 Strict Not Equal to Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28 Logical Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28 The Logical AND Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29 The Logical OR Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29 The NOT Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30 4. Conditional Statements and Loops 31 Conditional Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31 The if Statement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32 The switch Statement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33 Ternary Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34 Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35 for Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35 Using for Loops with Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .36 while Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37 When to Use for Loops and When to Use while Loops . . . . . . . . . . .38 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38 5. Functions 39 Functions—A Simple Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .39 Parts of a Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40 Function Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41 Abstracting Oscillator Playback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41 A Working Effects Box Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .42 The Arguments Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43 Function Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .44 Why You Should Always Declare Your Variables with var . . . . . . . . . . . . .46 Variable Hoisting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .46 How Hoisting Affects Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .47 Anonymous Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .48 Closures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .49 What Is a Closure? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .49 Callback Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .52 Working with JavaScript’s Built-In Callback Functions . . . . . . . . . . . . . .53 filter() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .53 map() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .53 Recursion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .54 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55 Contents vii 6. Objects 57 JavaScript Data Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57 Looping through Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59 When to Use Objects Rather Than Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . .60 How to Check If an Object Has Access to a Particular Property or Method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60 Cloning Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60 Prototypal Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .61 The "this" Keyword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .61 The bind Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .62 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .64 7. Node Graphs and Oscillators 65 The AudioContext() Method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .65 Node Graphs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .66 Oscillators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .66 The stop Method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67 The onended Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67 How to Stop Oscillators and Restart Them . . . . . . . . . . . . . . . . . . . . . . . . . . .67 The type Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68 The frequency Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69 The detune Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69 8. Using HTML and CSS to Build User Interfaces 71 What Is a User Interface? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .71 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .71 Explanation of the HTML Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72 Understanding HTML Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .73 Form and Input Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .76 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .77 Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .79 Element Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .79 Grouping Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .80 Descendent Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .80 Child Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .80 class and id . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .81 Modifying the App Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .81 Margin, Border, and Padding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .84 Removing List Element Bullet Points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .86 Font Size, Style (Type), and Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .86 Centering Block-Level Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .87 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .89 viii Contents 9. DOM Programming with JavaScript 91 How Does JavaScript Communicate with the DOM? . . . . . . . . . . . . . . . . . .91 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .91 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .92 Building the Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .93 How to Trigger an Oscillator by Clicking a Button . . . . . . . . . . . . . . . . . . . .93 Toggling the Start/Stop Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .94 Programming the Frequency Slider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .96 Changing the Frequency in Real Time . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .97 Changing Waveform Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .99 Completed Code with Waveform Selection . . . . . . . . . . . . . . . . . . . . . . . . . .100 Giving an Outline to the Selected Waveform Type . . . . . . . . . . . . . . . . . . .101 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102 10. Simplifying DOM Programming with JQuery 103 What Is JQuery? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103 JQuery Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103 Referencing JQuery Directly . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .104 Using JQuery from a CDN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .104 How to Use JQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105 Selecting HTML Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105 Storing DOM Selectors as Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105 Using Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .106 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .106 JQuery/JavaScript to Change a Single Property . . . . . . . . . . . . . . . . . . . .106 JQuery/JavaScript to Change Multiple Properties . . . . . . . . . . . . . . . . . .107 Method Chaining . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107 JQuery/JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .108 JQuery/JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .108 The this Keyword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .108 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .108 JQuery/JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .108 Refactoring the Oscillator Player to Use JQuery . . . . . . . . . . . . . . . . . . . . . .108 Without JQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .109 With JQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .109 Setting Up the Event Listener for the User-Selected List Element . . . . . . . 110 Event Listener without JQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Event Listener with JQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Modifying the Code in setInterval . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 setInterval Method without JQuery . . . . . . . . . . . . . . . . . . . . . . . . . 111 setInterval Method with JQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . .112 Contents ix onOff Method without JQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112 $onOff Selector with JQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113 11. Loading and Playing Audio Files 115 Prerequisites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .115 The Two Steps to Loading an Audio File . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 The XMLHttpRequest Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 get Requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 A Word on Audio File Type Compatibility . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Synchronous versus Asynchronous Code Execution . . . . . . . . . . . . . . . . . . 118 Processing the Audio Buffer with the Node Graph . . . . . . . . . . . . . . . . . . .120 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .120 12. Factories and Constructors 121 JavaScript and the Concept of Class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121 What Are Classes? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .122 The Factory Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .122 Dynamic Object Extension . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123 Private Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .124 Getters and Setters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .124 Constructors and the new Keyword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .125 Adding Methods to Constructors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .126 The Prototype Object and the Prototype Property . . . . . . . . . . . . . . . . . . . .126 Why Do Constructors Exist If You Can Do the Same Thing with Factories? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128 13. Abstracting the File Loader 129 Thinking about Code Abstraction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .129 Creating the Abstraction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .130 Walking through the Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .132 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .135 14. The Node Graph and Working with Effects 137 How to Think About the Node Graph . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .137 Gain Nodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .138 The Placement of Nodes Is Up to You . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .139 What Effects Are Available? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .139 How to Determine the Nodes You Need to Create the Effect You Want . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 x Contents A Real-World Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .141 Some Effects Require Development Work . . . . . . . . . . . . . . . . . . . . . . . . . . .141 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .142 15. The Biquad Filter Node 143 Using the Biquad Filter Node . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .143 Filter Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .144 Creating an Equalizer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .146 Graphic EQ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .146 Parametric EQ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .148 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .149 16. The Convolver Node 151 Convolution Reverb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151 Where to Get Pre-Recorded Impulse Response Files . . . . . . . . . . . . . . . . . .152 Using Impulse Response Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .152 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153 Controlling the Amount of Reverberation . . . . . . . . . . . . . . . . . . . . . . . . . .154 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .155 17. Stereo Panning, Channel Splitting, and Merging 157 The Stereo Panner Node . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .157 The Channel Splitter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .158 The Channel Merger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .159 Merging All Channels of a Multichannel File into a Single Mono Channel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .159 Using the Merger and Splitter Nodes Together . . . . . . . . . . . . . . . . . . . . . . .160 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .160 18. The Delay Node 161 The Delay Node . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 Creating Echo Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .162 Creating Slap Back Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .162 Creating a Ping-Pong Delay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .163 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .164 19. Dynamic Range Compression 165 The Dynamics Compressor Node . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .165 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .167 Contents xi 20. Time 169 The Timing Clock . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .169 The start Method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .170 Looping Sounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .170 Update Your Audio Loader Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .171 Changing Audio Parameters over Time . . . . . . . . . . . . . . . . . . . . . . . . . . . . .171 The Audio Parameter Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .172 The setValueAtTime Method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .172 The exponentialRampToValueAtTime Method . . . . . . . . . . . . .172 The linearRampToValueAtTime Method . . . . . . . . . . . . . . . . . . . .173 The setTargetAtTime() Method . . . . . . . . . . . . . . . . . . . . . . . . . . . .173 The setValueCurveAtTime() Method . . . . . . . . . . . . . . . . . . . . . . .173 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 21. Creating Audio Visualizations 175 A Brief Word on Fourier Analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .175 A Brief Explanation of Binary-Coded Decimal Numbers . . . . . . . . . . . . . .176 The Spectrum Analyzer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .176 JavaScript/JQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .176 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .177 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .178 Walking through the Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .179 Storing the Frequency Data in an Array . . . . . . . . . . . . . . . . . . . . . . . . . . . .180 How to Think About the frequencyData Array . . . . . . . . . . . . . . . . . . . 181 Building the Display Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Connecting the Analyzer to the DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .182 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .183 22. Adding Flexibility to the Audio Loader Abstraction 185 The Updated Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185 Modifying the Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .186 Modifying audioBatchLoader . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .188 An Explanation of the Previous Code Edit . . . . . . . . . . . . . . . . . . . . . . . . . .188 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .189 23. Building a Step Sequencer 191 The Problem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .191 Can I Use setInterval or setTimeout? . . . . . . . . . . . . . . . . . . . . . . . .192 The Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .193 How It Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .193 Changing Tempo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .195 Building the Sequencer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .196 xii Contents Playing Back Sounds in Sequence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .197 Creating the User Interface Grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .202 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .202 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .203 Adding Interactivity to the Grid Elements . . . . . . . . . . . . . . . . . . . . . . . . . .205 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .206 24. AJAX and JSON 207 AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .207 JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .208 Making an AJAX Call to the iTunes Search API . . . . . . . . . . . . . . . . . . . . .208 How the Code Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .209 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .210 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .210 Creating Your Own Web API to Reference Synthesizer Patch Data . . . . .210 The Data Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .213 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .213 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 How the Code Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 Building on the API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .217 data.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .217 module.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .218 Extend the JSON Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .219 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .220 25. The Future of JavaScript and the Web Audio API 221 The Web Audio API 1 .0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .221 3D Spacial Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .221 Raw Modification of Audio Buffer Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . .222 Suggestions for Continued Learning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .222 JavaScript 6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .222 node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .223 The Web MIDI API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .223 Open Sound Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .223 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .223 Further Reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .223 Book Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .223 Index Contents 225 xiii Preface Learning to program can be daunting, and we want to be the first to congratulate you for taking on the challenge! Second, we want to thank you for choosing this book . Who Is This Book For? This book is for anyone who is involved in the world of creative audio and wants to learn to program using the JavaScript language . There are many programming books directed toward artists to help them build websites, mobile applications, games, and other things, but next to none is directed exclusively toward the sound arts community . This book is designed to fill this role and to teach the fundamentals of web-based software development, and specifically, the basics of the JavaScript programming language to sound artists . What This Book Is Not This book is not an audio technology reference . It does not take the time to explain the fundamentals of audio theory or sound engineering in depth . Words and phrases like dynamic range compression, convolution reverb, and sample rate are thrown around like candy with only a cursory explanation (if they are xv explained at all) . We assume that you are either familiar with many of these core audio concepts or know enough to find the answers on your own . If you need an accommodating audio technology reference, we suggest David Miles Huber’s excellent book Modern Recording Techniques, Taylor & Francis . This book is also not directed toward experienced programmers who are simply interested in JavaScript or the Web Audio API . If this describes you, then you may find some value here, but you are not the intended audience . How to Learn to Program The following are a few tips to help you get the most from this book . Make Connections Generally, it is easier to learn new things by making associations and connections to areas that you are already familiar with . If you have ever programmed a synth or a MIDI sequencer, then you have already done a form of programming . The contents of this book are designed to be a bridge that connects a world you are (presumably) familiar with (sound and audio technology) to a topic you are less familiar with—JavaScript and programming . We suggest that you tap into whatever has drawn you to sound art while learning the material in this book . Flow and Frustration Are Not Opposites It’s very important to embrace a sense of flow when learning to program . It is also important to embrace frustration as part of the flow state and not as the antithesis of it . When you learn something new, the neurons in your brain are making connections; this may physically feel like frustration, but it just means your brain is rewiring—literally . Embrace this . Make It Habitual Programming is all about learning a bunch of little things that combine to make big things . The best way to learn a lot of little things is through repetition and habit . One way to do this is to simply accept programming as a new part of your lifestyle and do a little bit (or a lot) every day . Be Creative and Have Personal Projects It is a good idea to have your own personal programming projects . The more you are personally invested in a project, the more you will learn . Talk and Teach One of the best ways to validate your own learning is to teach someone else . If you don’t have anyone to teach, then you can substitute this by writing tutorials . This will force you to collect your thoughts and express them clearly . xvi Preface Keep Going Our final piece of advice is to simply stick with it . Best of luck! If you have any questions or comments, you can find us at: http://www .javascriptforsoundartists .com William Turner Steve Leonard Preface xvii Acknowledgment Thanks to technical assistant Keith Oppel . xix

Author William Turner Isbn 1138961531 File size 5MB Year 2017 Pages 250 Language English File format PDF Category Information Technologies Book Description: FacebookTwitterGoogle+TumblrDiggMySpaceShare 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.     Download (5MB) JavaScript for Sound Artists Introducing HTML5, 2nd Edition Web Audio API REST API Design Rulebook Getting Started with Fluidinfo Load more posts

Leave a Reply

Your email address will not be published. Required fields are marked *