Web Directions

Conffab

  • Speakers
  • Presentations
  • Conferences
  • Organizers
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
  • Speakers
  • Presentations
  • Conferences
  • Organizers
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
Advanced Search
Searching videos

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 Once More with Feeling

Once More with Feeling

Tim Kadlec

Thumbnail for CSS Grid Layout

CSS Grid Layout

Rachel Andrew

Thumbnail for Flexing Your Layout Muscles – A Pragmatic Look at Flexbox

Flexing Your Layout Muscles – A Pragmatic Look at Flexbox

Stephanie Rewis

Thumbnail for The Power and Responsibility of Unicode Adoption

The Power and Responsibility of Unicode Adoption

Katie McLaughlin

Thumbnail for Does Your Web App Speak Schadenfreude?

Does Your Web App Speak Schadenfreude?

Greg Rewis

Thumbnail for CSS: Code Smell Sanitation

CSS: Code Smell Sanitation

Fiona Chan

Thumbnail for Zen of JavaScript

Zen of JavaScript

Dmitry Baranovskiy

Thumbnail for Progressing Your Web Apps With Service Worker

Progressing Your Web Apps With Service Worker

Marcos Caceres

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

    Thumbnail for Business Models Panel

    Business Models Panel

    Alan Duncan

    Thumbnail for The Basics of Three

    The Basics of Three

    Alex Danilo

    Thumbnail for Roll Your Own (Style Guide)

    Roll Your Own (Style Guide)

    Arunan Skanthan

    Thumbnail for Passion and Purpose

    Passion and Purpose

    Avis Mulhall

    Thumbnail for In Conversation

    In Conversation

    Mike Cannon-Brookes

    Thumbnail for Beyond HTML5

    Beyond HTML5

    Chaals McCathieNevile

    Thumbnail for Better than MVC

    Better than MVC

    Damon Oehlman

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

© Conffab 2025