Conffab by Web Directions
  • Speakers
  • Presentations
  • Conferences
  • Live streams
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
  • Speakers
  • Presentations
  • Conferences
  • Live streams
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In

Search Conffab

Search presentations, speakers, transcripts, slides and topics.

Searching Conffab

Monster Music Mash

Tim Gleeson at South 2012
Sign up for Conffab Free to watch this and hundreds of other videos for free
  • Details
  • Keypoints

Using the power of the Audio API to show how to mix and mash audio files together to create interactions between the audio and elements within the page.

Web Audio API – included in HTML5 media set. Currently in editorial draft with the W3C. Support is not great, but it is emerging technology so let’s hold out for it.

At the base of the API is the audio context, which is currently webkit prefixed (yey). You can load audio a few ways; it depends what you are loading – long or short soundtracks.

(The demo gods strike! No audio coming through!)

You can pass your audio signal to things like gain. Create a gain node; then you have access to change the gain value. gain_node.gain.value = 0.5;

Compression: compressors can take different sources and normalises the volume.

Filters allow you filter out frequencies based on filter type – there are 8 in the API. First in the default is Lowpass, which lets you get a bassier audio track. Highpass brings out treble. Panning controls the direction/position.

(DEMO GODS!! Panning not working… friendly sound guy helps out ;))

Finally – frequency analysis, which gets data which can be rendered as waveforms and so on. But use this wisely! Do not play audio when your website loads!

You may also be interested in

Thumbnail for Web apps of the future with Web AI

Web apps of the future with Web AI

Jason Mayes

Dev Summit ’24

Thumbnail for Wait, my browser can do Bluetooth?!

Wait, my browser can do Bluetooth?!

Simon Hildebrandt

Code ’23

Thumbnail for The State of Augmented Reality in the Web Platform

The State of Augmented Reality in the Web Platform

Ada Rose Cannon

Code ’21

Thumbnail for Fine-grained everything

Fine-grained everything

Rich Harris

performance.now() 2025

Thumbnail for Cranking View Transitions up to 11

Cranking View Transitions up to 11

Bramus Van Damme

CSS Day 2026

Thumbnail for LoAF

LoAF

Andy Davies

performance.now() 2025

Thumbnail for CSS Doom Lasers

CSS Doom Lasers

Niels Leenheer

CSS Day 2026

Thumbnail for A Love Letter to CSS Variables

A Love Letter to CSS Variables

Danny Banks

Clarity ’23

More presentations from South 2012

Thumbnail for Building a Next Generation Mobile Browser Using Web Technologies

Building a Next Generation Mobile Browser Using Web Technologies

Adam Stanley

South 2012

Thumbnail for Business Models Panel

Business Models Panel

Alan Duncan

South 2012

Thumbnail for The Basics of Three

The Basics of Three

Alex Danilo

South 2012

Thumbnail for Roll Your Own (Style Guide)

Roll Your Own (Style Guide)

Arunan Skanthan

South 2012

Thumbnail for Passion and Purpose

Passion and Purpose

Avis Mulhall

South 2012

Thumbnail for In Conversation

In Conversation

Mike Cannon-Brookes

South 2012

Thumbnail for Beyond HTML5

Beyond HTML5

Chaals McCathieNevile

South 2012

Thumbnail for Better than MVC

Better than MVC

Damon Oehlman

South 2012

© 2026

  • About
  • Speakers
  • Presentations
  • Conferences
  • Contact
  • Sign in
Sign Up