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.
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.
Copy the recipe framework from
tools/RecipeFrameworkto the recipe application root.Navigate to the web server's
confdirectory, and add the following tohttp.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>Replace all the snippet references to
/webaudiowith the absolute path to the recipe application root.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:
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.
A copy of the base framework template is stored at tools/RecipeFramework in the code bundle.
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 frameworkThe
assert()helper function to test for runtime conditions and to report the failures to the output window of the frameworkThe
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 |
|---|---|
|
|
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 |
|
|
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 theWebAudioAppclass implementation.The HTML section contains the application's HTML implementation. This section is the
appwindow<div>element in the body of the page.