Archives

Archives

Tag / EaselJS

Sebastian De Rossi

Sebastian De Rossi is a senior software developer working at gskinner. During this time, most of his efforts have been in developing web- and mobile-based applications. Serving as the Community Evangelist for CreateJS, he finds himself answering a ton of great questions from community members.

We recently spent some time playing with a new feature in Chrome called Web Audio Input, which provides access to a microphone or other audio input.

The result was “Orcastra” (ha!) which allows users to select one of five deep sea characters who lip sync along to the user’s audio input.

Creating Orcastra was quite straightforward. The characters were all created in the Flash CS6 IDE (MovieClips with timeline animations) and exported to HTML5 using Toolkit for CreateJS. We used PreloadJS to load all our assets, TweenJS for simple tweens, and EaselJS as the display layer.

We use feature detection to ensure the browser supports audio input, prompt users to allow access to their microphone, then listen for volume changes (with maximum mic gain) to confirm audio input before showing the character selection screen. Once the user picks a character, it’s just a simple matter of syncing the CreateJS animations with the current input volume level.