Automating the Audio Parameters – How it Works

Exclusive offer: get 50% off this eBook here
Instant Audio Processing with Web Audio [Instant]

Instant Audio Processing with Web Audio [Instant] — Save 50%

Learn how to use the Web Audio API to implement audio effects such as loop stitching, audio ducking, and audio equalization through practical, hands-on recipes with this book and ebook

$12.99    $6.50
by Chris Khoo | September 2013 | Open Source Web Development

In this article by Chris Khoo, the author of Instant Audio Processing with Web Audio, we will see how automating the audio parametes is carried out. There are several key rules in regards to scheduling the automation events:

  • If an event is added at a time when there is already an event of the exact same type, the new event replaces the old one.

  • If an event is added at a time when there is already an event of a different type, it is scheduled to occur immediately after it.

  • Events may not overlap – some events occur over time, such as the linearRampToValueAtTime() automation behavior. No events may be scheduled in the time when such events are active, otherwise Web Audio will throw a runtime exception.

(For more resources related to this topic, see here.)

We leverage the AudioParam automation support to implement ducking. The following is the overview of the ducking logic implemented in the AudioLayer class:

  1. We add a GainNode instance into the node graph as the duck controller.

  2. When a sound effect is played, we script the duck controller's gain audio parameter to reduce the audio output gain level for the duration of the sound effect.

  3. If ducking is reactivated while it is still active, we revise the scheduled ducking events so that they end at the appropriate time.

The following is the node graph diagram produced by the code:

Why use two GainNode instances instead of one?

It's a good idea to split up the independent scripted audio gain behaviors into separate GainNode instances. This ensures that the scripted behaviors will interact properly.

Now, let's take a look at AudioLayer.setDuck() which implements the ducking behavior:

  1. The AudioLayer.setDuck() method takes a duration (in seconds) indicating how long the duck behavior should be applied:

    AudioLayer.prototype.setDuck = function( duration ) {

  2. We cache the duck controller's gain audio parameter in duckGain:

    var TRANSITIONIN_SECS = 1; var TRANSITIONOUT_SECS = 2; var DUCK_VOLUME = 0.3; var duckGain = this.duckNode.gain;

  3. We cancel any existing leftover scheduled duck behaviors, thereby allowing us to start with a clean slate:

    var eventSecs = this.audioContext.currentTime; duckGain.cancelScheduledValues( eventSecs );

  4. We employ the linearRampToValueAtTime() automation behavior to schedule the transition in—the audio parameter is scripted to linearly ramp from the existing volume to the duck volume, DUCK_VOLUME, over the time, TRANSITIONIN_SECS. Because there are no future events scheduled, the behavior starts at the current audio context time:

    duckGain.linearRampToValueAtTime( DUCK_VOLUME, eventSecs + TRANSITIONIN_SECS );

    If the volume is already at DUCK_VOLUME, the transition has no effect, thereby creating the effect of extending the ducking behavior.

  5. We add an automation event to mark the start of the TRANSITIONOUT section. We do this by scheduling a setValueAtTime() automation behavior:

    duckGain.setValueAtTime( DUCK_VOLUME, eventSecs + duration );

  6. Finally, we set up the TRANSITIONOUT section using a linearRampToValueAtTime() automation behavior. We arrange the transition to occur over TRANSITIONOUT_SECS by scheduling its end time to occur after the TRANSITIONOUT_SECS duration of the previous setValueAtTime() automation behavior:

    // Schedule the volume ramp up duckGain.linearRampToValueAtTime( 1, eventSecs + duration + TRANSITIONOUT_SECS ); };

The following is a graph illustrating the automation we've applied to duckGain, the duck controller's gain audio parameter:

In order to have the sound effects activation duck the music volume, the sound effects and music have to be played on separate audio layers. That's why this recipe instantiates two AudioLayer instances—one for music playback and the other for sound effect playback.

The dedicated music AudioLayer instance is cached in the WebAudioApp attribute, musicLayer, and the dedicated sound effects AudioLayer instance is cached in WebAudioApp attribute sfxLayer:

WebAudioApp.prototype.start = function() { ... this.musicLayer = new AudioLayer( this.audioContext ); this.sfxLayer = new AudioLayer( this.audioContext ); ... };

Whenever a sound effects button is clicked, we play the sound and simultaneously activate the duck behavior on the music layer. This logic is implemented as part of the behavior of the sound effect's click event handler in WebAudioApp.initSfx():

jqButton.click(function( event ) { me.sfxLayer.playAudioBuffer( audioBuffer, 0 ); me.musicLayer.setDuck( audioBuffer.duration );

We activate ducking on webAudioApp.musicLayer, the music's AudioLayer instance. The ducking duration is set to the sound effects duration (we read the sound effects sample duration from its AudioBuffer instance).

The ducking behavior is just one demonstration of the power of automation. The possibilities are endless given the breadth of automation-friendly audio parameters available in Web Audio. Other possible effects that are achievable through automation include fades, tempo matching, and cyclic panning effects.

Please refer to the latest online W3C Web Audio documentation at http://www.w3.org/TR/webaudio/ for a complete list of available audio parameters.

Summary

In this article we looked at different rules in scheduling the automation events. we also looked at the overview of ducking logic implemented in the AudioLayer class and checked how we implement AudioLayer.setDuck() method which implements the ducking behaviour. Finally, we analyzed the ducking behaviour with the help of graph.

Resources for Article :


Further resources on this subject:


Instant Audio Processing with Web Audio [Instant] Learn how to use the Web Audio API to implement audio effects such as loop stitching, audio ducking, and audio equalization through practical, hands-on recipes with this book and ebook
Published: August 2013
eBook Price: $12.99
See more
Select your format and quantity:

About the Author :


Chris Khoo

Chris Khoo has been an avid programmer since his first encounter with the personal computer in the 80s. Since then, he's evolved from a nerdy hobbyist programmer into a full-fledged software developer with over 15 years of industry experience in developing games at companies including Microsoft, Disney, Electronic Arts, and Nexon. To date, he has shipped over a dozen console, mobile, and online games including the FIFA series, the SSX series, Def Jam: FFNY, Tom and Jerry Online, and Hyper Grav. His unique combination of AAA console game programming experience and web development experience makes him uniquely qualified to pen a practical study of implementing audio using the Web Audio API.

Chris presently resides in Vancouver, BC, with his wife and two children. He is the founder and primary developer at Wappworks Studio, a 3-man indie game studio dedicated to online and mobile web games. When he's not busy at work, Chris enjoys playing board games and helping out with praise and worship at his local church.

Books From Packt


Drupal Multimedia
Drupal Multimedia

Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery
Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery

Kinect in Motion – Audio and Visual Tracking by Example
Kinect in Motion – Audio and Visual Tracking by Example

Joomla! 1.5 Multimedia
Joomla! 1.5 Multimedia

Moodle 1.9 Multimedia
Moodle 1.9 Multimedia

Web Host Manager Administration Guide
Web Host Manager Administration Guide

LMMS: A Complete Guide to Dance Music Production
LMMS: A Complete Guide to Dance Music Production

Getting started with Audacity 1.3
Getting started with Audacity 1.3


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
t
P
P
X
5
x
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software