Book Image

Instant Audio Processing with Web Audio

By : Chris Khoo, Chris Keat Khoo
Book Image

Instant Audio Processing with Web Audio

By: Chris Khoo, Chris Keat Khoo

Overview of this book

Web Audio is an upcoming industry standard for web audio processing. Using the API, developers today can develop web games and applications with real-time audio effects to rival their desktop counterparts. Instant Audio Processing with Web Audio is your hands-on guide to the Web Audio API. Using clear, step-by-step exercises, this book explores the API and how to apply it to produce real-time audio effects such as audio stitching, audio ducking, and audio equalization. This book is an in-depth study of the Web Audio API. Through a series of practical, step-by-step exercises, this book will guide you through the basics of playing audio all the way to the task of building a 5-band audio equalizer. Along the way, we'll learn how to utilize Web Audio's scripting functionality to build real-time audio effects such as audio stitching and ducking. Then, we'll use this knowledge to build a basic audio layer step-by-step which can be used in our web applications/games. With its in-depth coverage of the Web Audio API and its practical advice on various audio implementation scenarios, Instant Audio Processing with Web Audio How-to is your ultimate guide to Web Audio.
Table of Contents (7 chapters)

Setting up a web host (Simple)

We'll need to set up a web server to host our Web Audio recipes, because we will be exploring Web Audio's audio file manipulation capabilities. Loading of the audio files rely on AJAX and AJAX-only functions reliably when the said audio files are served by a web host. Ergo, we'll need a web host for the recipes.

If we don't yet have a web server set up, this recipe will help us do just that.

We'll set up an Apache Server to host our recipes at http://localhost/mywebaudio, which will be the recipe application URL. As we don't have a Web Audio recipe yet, we'll set it up to host our recipe base framework instead. The recipe base framework implements all the necessary plumbing so that we can focus on using Web Audio. I've included an overview of the framework at the end of this recipe.


Already have a web server set up? Go ahead and create a new subdirectory for the recipes and host it at http://localhost/mywebaudio.

Getting ready

If you don't yet have Apache Web Server installed on your machine, now is the time to do that. The easiest way to install it is through installers such as XAMPP (

In addition, please create a subdirectory to act as the recipe application root for the recipes in this book. The recipes in this book assume that the recipe application root is the webaudio subdirectory that is placed just off the root of the drive. However, feel free to select a different path for the recipe application root.

The configuration changes that we'll be applying to Apache are available in tools/ApacheConfiguration/apache.conf.

How to do it...

  1. Copy the recipe framework from tools/RecipeFramework to the recipe application root.

  2. Navigate to the web server's conf directory, and add the following to http.conf—the snippet links of the recipe application root to the recipe application URL:

    Alias /mywebaudio /webaudio
    <Directory "/webaudio">
        Order allow,deny
        Allow from all
  3. Replace all the snippet references to /webaudio with the absolute path to the recipe application root.

  4. Restart Apache Web Server.


Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at If you purchased this book elsewhere, you can visit http://www. and register to have the files e-mailed directly to you.

Open the recipe application URL (http://localhost/mywebaudio) in a web browser. You should see the following output on the browser screen:

How it works...

The configuration snippet maps the recipe application root to mywebaudio—a virtual directory on the web server:

Alias /mywebaudio /webaudio

We set up the access permissions of the directory so that it's publicly available as shown in the following code. Note that the directory access permissions are always linked to the physical directory path:

<Directory "/webaudio">
  Options Indexes
  Order allow,deny
  Allow from all

Now that we have our web hosting set up, we can start writing recipes.

There's more...

A copy of the base framework template is stored at tools/RecipeFramework in the code bundle.

The recipe base framework

The recipes in this book are built on top of a base framework. This framework provides the application plumbing that is required to allow us to focus on exploring Web Audio. The framework's core functionalities are:

  • jQuery for handling all the DOM manipulations

  • jQuery UI for building the user interface of the recipes

  • The consoleout() helper function to output messages to the output window of the framework

  • The assert() helper function to test for runtime conditions and to report the failures to the output window of the framework

  • The later() helper function for deferring function execution outside of the calling execution scope

The following table summarizes the base file organization of the framework:




This directory contains all the audio assets which we may be used in the recipes.


This contains the jQuery open source library (MIT license).



This contains the jQuery UI open source library with the pepper grinder theme (MIT license).


This file contains all the CSS styles utilized by the recipes.


This file contains the consoleout(), assert(), and later() helper functions.


This file is the framework launch page. Recipe implementations are added to this file.

The base framework splits the application implementation into two sections. These two sections are found in index.html:

  • The JavaScript section contains the JavaScript implementation of the application. The section is the <script> element in the header of the page containing the WebAudioApp class implementation.

  • The HTML section contains the application's HTML implementation. This section is the appwindow <div> element in the body of the page.