JSFoo 2015

The future of JavaScript

Srikumar

@srikumarks

Orchestrating the Web Audio API

Submitted Jun 20, 2015

Understand the basics of low latency audio performance within the browser using the graph-based Web Audio API. Understand intricacies of orchestrating WAA’s graphs to build sophisticated composable sound models using the timing and graph abstractions in the Steller library.

Outline

The evergreen browsers today ship with a powerful low latency audio generation and processing API - the Web Audio API - that opens up new possibilities for immersive browser-based games, advanced audio/music applications, interactive simulations for children and such. The purpose of this talk is to give a glimpse of this API, dive into its design and provide tips on effective usage and relevant abstractions, focusing on Steller - a small library developed by the author for coordinating audio and visuals.

Tentative flow: Ways of “organizing sound” - a lightning tour of computer music. A brief history of in-browser audio. Low latency audio generation and processing. The Web Audio API and its underlying graph model. Intro to some commonly used node types. Importance of sample accurate timing. Orchestrating lifetimes of ephemeral “one shot” nodes. Steller’s GraphNode and declarative scheduler abstractions. Issues with precise coordination of audio and visuals - case: a metronome app. Advanced: Signal processing in Javascript using the JS audio node.

Requirements

This could be in a workshop format too. Participants would need a computer with the latest version of Chrome installed, a decent pair of headphones or in-built speakers for ... making noise :)

Speaker bio

Currently heads engineering at Pramati Technologies, Chennai. Has worked with the Web Audio API since its early days and used it heavily for research into gamaka synthesis for Carnatic music.

Slides

http://sriku.org/talks/jsfoo2015-webaudioapi-srikumarks.pdf

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more