Web Directions

Conffab

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

Monster Music Mash

Tim Gleeson at South 2012
Sign up for a free membership to watch this and hundreds of other videos
  • 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 The state of passwordless auth on the web

    The state of passwordless auth on the web

    Thumbnail for QA with Phil Nash

    QA with Phil Nash

    Thumbnail for The Experience is the Product

    The Experience is the Product

    Thumbnail for Effective CSS refactoring

    Effective CSS refactoring

    Thumbnail for Financial Inclusion in the Solomon Islands

    Financial Inclusion in the Solomon Islands

    Thumbnail for The New Age of Indie

    The New Age of Indie

    Thumbnail for It’s Time to Talk About Type Checkers

    It’s Time to Talk About Type Checkers

    Thumbnail for New in ‘22 — the CSS browsers will ship this year

    New in ‘22 — the CSS browsers will ship this year

More presentations from South 2012

    Thumbnail for Grow & Sustain a Passionate Community

    Grow & Sustain a Passionate Community

    Thumbnail for Single Page Web Apps

    Single Page Web Apps

    Thumbnail for Datatium – Radiation Free Responsive Experiences

    Datatium – Radiation Free Responsive Experiences

    Thumbnail for Buttons are a Hack

    Buttons are a Hack

    Thumbnail for Beyond Mobile: Where No Geek Has Gone Before

    Beyond Mobile: Where No Geek Has Gone Before

    Thumbnail for The Incubator Experience

    The Incubator Experience

    Thumbnail for Programming Style and Your Brain

    Programming Style and Your Brain

    Thumbnail for HOT Animation!

    HOT Animation!

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

© Conffab 2023