JavaScript for Sound Artists
eBook - ePub

JavaScript for Sound Artists

Learn to Code with the Web Audio API

William Turner, Steve Leonard

Share book
  1. 233 pages
  2. English
  3. ePUB (mobile friendly)
  4. Available on iOS & Android
eBook - ePub

JavaScript for Sound Artists

Learn to Code with the Web Audio API

William Turner, Steve Leonard

Book details
Book preview
Table of contents
Citations

About This Book

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

Frequently asked questions

How do I cancel my subscription?
Simply head over to the account section in settings and click on “Cancel Subscription” - it’s as simple as that. After you cancel, your membership will stay active for the remainder of the time you’ve paid for. Learn more here.
Can/how do I download books?
At the moment all of our mobile-responsive ePub books are available to download via the app. Most of our PDFs are also available to download and we're working on making the final remaining ones downloadable now. Learn more here.
What is the difference between the pricing plans?
Both plans give you full access to the library and all of Perlego’s features. The only differences are the price and subscription period: With the annual plan you’ll save around 30% compared to 12 months on the monthly plan.
What is Perlego?
We are an online textbook subscription service, where you can get access to an entire online library for less than the price of a single book per month. With over 1 million books across 1000+ topics, we’ve got you covered! Learn more here.
Do you support text-to-speech?
Look out for the read-aloud symbol on your next book to see if you can listen to it. The read-aloud tool reads text aloud for you, highlighting the text as it is being read. You can pause it, speed it up and slow it down. Learn more here.
Is JavaScript for Sound Artists an online PDF/ePUB?
Yes, you can access JavaScript for Sound Artists by William Turner, Steve Leonard in PDF and/or ePUB format, as well as other popular books in Informatique & Programmation en JavaScript. We have over one million books available in our catalogue for you to explore.

Information

Publisher
Routledge
Year
2017
ISBN
9781317334934

1 Overview and Setup

Images
What Is a Program?

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.

Images
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.

Images
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.
Images
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.
Images
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.

Images
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.

Images
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.

Images
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.
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>app</title>
    <script src="js/app.js"></script>
    <link rel="stylesheet" href="css/app.css">
    </head>
    <!--__________________________________________BEGIN APP--...

Table of contents