Helpers
Audio Manager
The CAAT.AudioManager object is located in the file AudioManager.js.
Even though the AudioManager can be instantiated and used directly, it is normally instrumented via a CAAT.Director object.
This tutorial uses a director instance to perform audio play.
Prior to using the audio manager, audio elements must be preloaded into the director. This can be done however the developer likes more, either by defining audio elements in the html, or by creating Audio objects. To do so the function addAudio( id, url_or_DOMaudio ) must be called. This function call is chainable, here's an example:
director.
addAudio('01', document.getElementById('audio_01')).
addAudio('10', document.getElementById('audio_10')).
addAudio('11', document.getElementById('audio_11'));
After this, the audio elements can be referenced by their ids, in this case '01', '10', '11'.
The underlying AudioManager instance can play concurrently the same sound, loop an audio, cancel playing sounds, etc. It is limited to a maximum number of concurrent sounds though, 8 by default. So if concurrently more than 8 audio elements are already playing, calling another audio play won't have any effect until one ends playing.
The function audioLoop(id) will make a sound loop.
The function audioPlay(id) will make a sound play. It can be concurrently called up to 8 times (maximum number of audio channels).
The functions setSoundEffectsEnabled setMusicEnabled isMusicEnabled isSoundEffectsEnabled allow the developer to know about music and FX flags status.
Looping audios are considered music, and playing audios sound effects, so enabling/disabling Music or SoundEffects will enable/disable such audio elements.
Finally, calling the method endSound() will terminate Music and SoundEffects at once. It must be called again audioLoop(id) for each music that wants to be played.
Example
Mouse over the colored actors to play a sound. Use audio controls to the right to enable/disable music and/or FX.
new CAAT.Module.Preloader.ImagePreloader().loadImages(
[
{ id:'sound', url:'resource/sound.png' }
],
function(count, images) {
var director = new CAAT.Foundation.Director().initialize(400, 100, '_c1');
director.setImagesCache(images);
var scene = director.createScene();
// add audio elements to director cache.
director.
addAudio('0', document.getElementById('audio_01')).
addAudio('1', document.getElementById('audio_11')).
addAudio('2', document.getElementById('audio_12')).
addAudio('mm', document.getElementById('music'));
var actor = [];
var i;
var color = [ '#f00', '#0f0', '#00f' ];
// create 3 actors to play each of the audio_xx sounds.
for (i = 0; i < 3; i++) {
var ac = new CAAT.Actor().
setSize(100, 100).
setFillStyle(color[i]);
(function(ac, i) {
// on mouseEnter, play the sound
ac.mouseEnter = function(e) {
ac.setStrokeStyle('green');
director.audioPlay('' + i);
CAAT.setCursor('pointer');
};
})(ac, i);
ac.mouseExit = function(e) {
ac.setStrokeStyle(null);
CAAT.setCursor('default');
};
actor.push(ac);
scene.addChild(ac);
}
// lay out the colored actors on a row
CAAT.Module.LayoutUtils.RowLayout.Row(
scene,
actor,
{
padding_left: 10,
padding_right:40
}
);
// define audio control UI.
var ci = new CAAT.Foundation.SpriteImage().initialize(director.getImage('sound'), 2, 3);
var dw = director.width;
var dh = director.height;
// one button to enable/disabled music
var music = new CAAT.Foundation.Actor().
setAsButton(ci.getRef(), 0, 1, 0, 0,
function(button) {
director.setMusicEnabled(!director.audioManager.isMusicEnabled());
if (director.isMusicEnabled()) {
button.setButtonImageIndex(0, 1, 0, 0);
} else {
button.setButtonImageIndex(2, 2, 2, 2);
}
}).
setBounds(dw - ci.singleWidth - 2, 2, ci.singleWidth, ci.singleHeight);
// one button to enable/disabled sound fx
var sound = new CAAT.Foundation.Actor().
setAsButton(ci.getRef(), 3, 4, 3, 3,
function(button) {
director.setSoundEffectsEnabled(!director.audioManager.isSoundEffectsEnabled());
if (director.isSoundEffectsEnabled()) {
button.setButtonImageIndex(3, 4, 3, 3);
} else {
button.setButtonImageIndex(5, 5, 5, 5);
}
}).
setBounds(dw - ci.singleWidth - 2, 2 + 2 + ci.singleHeight, ci.singleWidth, ci.singleHeight);
scene.addChild(sound);
scene.addChild(music);
// set background music on.
director.audioLoop('mm');
CAAT.loop(20);
});