Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Instant Audio Processing with Web Audio
  • Table Of Contents Toc
Instant Audio Processing with Web Audio

Instant Audio Processing with Web Audio

By : Chris Khoo
4 (1)
Buy this Book
close
close
Instant Audio Processing with Web Audio

Instant Audio Processing with Web Audio

4 (1)
By: Chris Khoo
Buy this Book

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)
close
close
close
Instant Audio Processing with Web Audio
Icon
Instant Audio Processing with Web Audio
Credits
Icon
Credits
About the Author
Icon
About the Author
About the Reviewer
Icon
About the Reviewer
www.PacktPub.com
Icon
www.PacktPub.com
Preface
Icon
Preface
Lock Free Chapter
1
Instant Audio Processing with Web Audio
chevron up
Icon
Instant Audio Processing with Web Audio
Icon
Setting up a web host (Simple)
Icon
Playing audio in a loop (Simple)
Icon
Setting the volume (Simple)
Icon
Automating the audio parameters (Intermediate)
Icon
Building an equalizer using BiquadFilterNode (Advanced)

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.

Note

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 (http://www.apachefriends.org).

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
</Directory>

  3. Replace all the snippet references to /webaudio with the absolute path to the recipe application root.

  4. Restart Apache Web Server.

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www. packtpub.com/support 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
</Directory>

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:

Directory/File

Description

assets

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

thirdparty/jquery-1.9.1.min.js

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

thirdparty/jquery-ui-1.10.2.custom.min.js

thirdparty/css/pepper-grinder

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

app.css

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

utils.js

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

index.html

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.

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Instant Audio Processing with Web Audio
End of Section 1
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon