Hands On Web Audio slides
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Hands On Web Audio

A slide deck which is also an in-context demo

I made this because most of the talks on multimedia-y things have to leave the slides to go to a demo, and I feel that breaks the flow for the audience. So now the demos in this talk are all integrated with the talk, and you never leave the slides.

Watch online or read on for how to get the code and build the slides.

Headphones or a properly spatialised audio system highly recommended.


To run

git clone https://github.com/sole/howa.git
cd howa
npm install
npm start

(i.e. you need node.js installed to run npm)

The slides will be built into build/. Open build/index.html with your browser of choice and enjoy! (It will take a while to load as there's a lot of 3D content to generate)


  • Left/Right arrows to move between slides
  • F to toggle full screen
  • 3 to toggle between anaglyph ('3D') or normal rendering
  • Move the mouse up/down or left/right in some scenes to get interesting audio effects


This is very synthetic, just in case you want some pointers. I will provide more info soon in the shape of an article or similar. You should subscribe to my blog to stay updated! ;-)

  • slide content is determined by index.jade
  • one section = one slide
  • no nesting
  • Each slide is an instance of Slide3D which is Renderable
    • there's the .render() method
  • on load the content of each section is parsed and some nodes are converted into three dimensional text and other nodes are replaced by three.js scenes
  • scenes code must be placed in client/js/scenes/
  • scenes.render method
  • inheriting from Renderable
    • Renderable things are able to traverse their children and call render on them, if the method exists (you don't need to inherit from renderable if you just want to render)
    • you want to render when you want dynamic content in an object. otherwise an static representation should be fine.
  • img replacement attribute = data-replace='scene key' in the array of replacements in htmlTo3D.js (replacementScenes)

More resources!