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. T he 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.
Key Features
Uses the readers existing knowledge of audio technology to facilitate learning how to program using JavaScript. The teaching will be done through a series of annotated examples and explanations.
Downloadable code examples and links to additional reference material included on the books companion website.
This book makes learning programming more approachable to nonprofessional programmers
The context of teaching JavaScript for the creative audio community in this manner does not exist anywhere else in the market and uses example-based teaching
A program is any set of instructions that is created or followed. In this book, we focus on writing computer programs, which are lists of instructions that a computer carries out. These instructions can be written and stored in various forms. Some of the first modern computers used punched cards, switches, and cables. Early analog music synthesizers were a type of computer that used a patchbay style interface to manually allow a programmer to create specific sounds.
What Is JavaScript?
JavaScript is a multipurpose programming language initially created to aid developers in adding dynamic features to websites. The language was initially created in 11 days and released in 1995 by a company called Netscape. Developed by Brendan Eich, its original release name was LiveScript. When Netscape introduced support for the language in its browser, LiveScript was renamed JavaScript. Although JavaScript is similar in name to the Java programming language, they are completely unrelated. Today, JavaScript is used in everything from robotics to home automation systems.
HTML, CSS, and JavaScript
The three main technologies used to build websites and web applications are HTML, CSS, and JavaScript.
HTML stands for hypertext markup language and is the standard by which we create documents for the World Wide Web. You program HTML by writing elements (sometimes referred to as tags for brevity). These elements contain text and other nested elements, which make up the documentâs content.
CSS stands for cascading style sheets and is a tool used to modify how HTML elements and text are presented. CSS is primarily a visual design tool. For example, with CSS you could modify an HTML element and give it an orange background, change its font size, place it vertically or horizontally, or perform any number of creative visual changes.
JavaScript is used to add interactive responses to user input. Every time a user clicks, scrolls, taps, moves the mouse cursor, types, or performs an interactive event, JavaScript code can be triggered to change the page in some manner. The JavaScript language was initially designed to perform these functions within the context of designing websites and applications.
What Is a Web Application?
A web application is any website that contains more than static, non-interactive pages. This means that, in a web application, the pages have some interactive components in addition to the static text and images displayed. In the early days of the World Wide Web, websites were composed mostly of collections of static documents connected through highlighted text called hyperlinks. These static pages had no interaction with databases. In the early 1990s, this began to change, and web developers began creating websites that had features similar to desktop applications that allowed users to interact with the page via form fields, buttons, and other interactive means to send data over a web server to and from a database.
Early web applications were slow and limited by the technology of the time. In the early 2000s, a culmination of technical shifts that included client-side- rather than server-side-focused web applications helped make web applications more responsive. Part of this shift is attributable to a technology called AJAX (asynchronous JavaScript and XML). This technology pushed dynamic web application development forward by allowing the browser to retrieve and send data to a web server without having to automatically refresh the page in the process. As the J in AJAX indicates, JavaScript is central to this technology, and web applications began to approach the interactive speed of their desktop counterparts.
As you might expect, within the audio world there were attempts to leverage this new technology, which resulted in browser-based audio players, editors, and musical instruments. Many of these applications were initially written using a technology called Flash. This is a proprietary technology that required the user to download and install an additional plug-in to run all programs written in it.
In 2008, a newer version of the HTML standard was written, called HTML-5. This version included an audio player that could directly stream sound files off a web server using a single line of HTML code. The player also included built-in, user-facing controls for play, fast-forward, rewind, pause, stop, loop, and other actions. However, for serious audio development, this was inadequate. Web application developers and audio aficionados wanted something more fully featured.
What Is the Web Audio API?
The Web Audio API is a series of exposed code pieces that you can use to accomplish musical and audio tasks in a web browser with less effort than if you were to create them all from scratch. The unexposed portion of the Web Audio API lies in the web browserâs source code and is written in whatever language the web browser itself is written in. The technical core of web browsers is usually written in multiple lower-level languages, which can include (but are not limited to) C++, Java, and machine language.
To understand the Web Audio API, you must first understand what an API is. API stands for application programming interface. An API is a portion of code that a programmer is given access to, which controls a larger unseen body of code within certain constraints. Imagine if, in order to learn how to play your favorite musical instrument, you had to literally build it from scratch. As you can imagine, this would get very tediousâespecially if the instrument were to break. Thus, itâs much more convenient to learn to play a premade musical instrument. The convenience here is that the construction process is removed and your only concern is what is important to you, which is the controls needed to use the instrument. In a similar manner, programmers write APIs that expose only small pieces of code for developers to use, and these small pieces of code allow you to do a lot of work with minimal effort.
In addition to being able to load and play back sound files, the Web Audio API also allows you to generate sound from scratch in the form of oscillators. You can then manipulate any sound playback or generation using filters, reverb effects, dynamic compressors, delay effects, and a host of other options.
Setting Up Your Work Environment
To begin working, you must first determine what browser you are going to troubleshoot with. In real-world environments, you would use a test suite to troubleshoot among different browsers and platforms. In this book, we are going to keep things simple and only use Google Chrome. The next thing you need is a code editor. For the exercises, we assume you will be using the Sublime Text editor. Technically, you can use any code editor you want, but Sublime Text is offered as a free trial download and is extremely powerful and widely used. We think itâs worth your investment of time to learn it.
The next thing you need to do is create a folder with a basic work template.
1. If you are not already using it, go to this URL to download and install Google Chrome: https://www.google.com/chrome/browser/desktop/.
2. Go to http://www.sublimetext.com/ and download and install Sublime Text.
3. Create a folder on your desktop or in a directory and call it web audio template.
4. Open Sublime Text, and in the window that appears, type the following code into it. Then save the file (go to the File menu in Sublime Text and click Save As) as index.html and choose your web audio template folder as the directory to save it in.
