Interactive Web Audio: The Footsteps Generator

May 28, 2020| The Sound Pack Tree

While we are surfing the internet, we constantly see visual content moving or changing shape & color, interactively in reaction to the user. But what about the audio? In most cases, it is limited to a play/stop button. While graphic designers are used to show interactive work on websites, sound designers usually stay locked into their local DAWs. Does it have to be that way?

Not really. In fact, there is a capable audio processor built into your browser. To make use of its functionality, the magic term to google for is called the Web Audio API.

To be honest: I’m not a coder, really.

But as the owner of a web shop, I obviously needed to gain some web development skills. I recommend it. It’s no rocket science and it can’t hurt to have some knowledge about HTML, CSS and JavaScript. It opens doors to a universe of possibilities, and while I’m just scratching the surface, it makes me curious.

WHAT CAN BE DONE WITH WEB AUDIO?

Basically, you can build audio signal processing chains which can be executed in and by a web browser and be controlled by the user. It’s like a little DAW in your browser /on your website. You can play sound files or start oscillators, do complex routings, control volume, pan & pitch and insert effects. Important to mention is that audio files are pre-loaded and can be run with absolute time-accuracy.

Here is a list of basic FX you can use:

  • Equalizer
  • Compressor / Limiter
  • Delay
  • Convolution Reverb

The tricky thing: It’s all code. Your desired web application needs to be written in the most used scripting language of the internet: JavaScript. But there are good resources online on how to get started with the Web Audio API and simple results can be achieved quickly.

THE FOOTSTEPS GENERATOR

As a creator and distributor of sound libraries, I am constantly looking for new ways to present my products. Therefore I had the idea to go interactive with the Footstep Loops II sound pack. The result is the Footsteps Generator, an online app which lets you select a pace, then you can select different shoes and surfaces while the audio keeps on walking. You can also turn the rustling of clothes on and off.

The Footstep Loops II library is a collection of loops which can be layered – which means, if the files are played in sync, a constant walking pace can be achieved while switching between the different sound types.

In the web app, it works like this: All audio files are pre-loaded and started (in loop) at the exact same time. Because the files have the exact same length and “foot hits the ground” sync points, simple volume on/offs, triggered by button clicks, can switch between footstep types without losing the constant pace.

For example – when the user hits the “Boots Heavy” button, the heavy boots’ volume is set to maximum, while all others are muted. All files keep on running in the background.

To plan the Online Footsteps Generator, I made a sketch beforehand which showed how to structure the signal routing, including some buses, and then translated it into code and connected its functionality to the buttons which are displayed on the website.

Hopefully I could encourage you to experiment in the interesting field of interactive web audio, and I’m open for any exchange about this topic. Get in touch!

Get the Footstep Loops II sound library at 40% OFF for limited time.

Find out The Sound Pack Tree libraries on We Sound Effects


ALSO CHECK OUT THESE PROJECTS AND TUTORIALS IF YOU WANT TO DIG IN A BIT MORE WITHIN THE WEB AUDIO:

FREE BONUS CONTENT ON ANY ORDER AT WE SOUND EFFECTS

Get our Re:Cycle sound design software + 1.4GB Free Royalty Sound Effects on any order at We Sound Effects. Find Out More

Re:Cycle is a 64Bit standalone software developed for creating new sounds from your existing sound effects libraries. Create endless variations from any sound effect on a dynamic, funny and quick way. Change several parameters to re-design your sounds.


Subscribe to our newsletter to get the latest news, interviews, jobs, tutorials, resources and much more.

FREE SFX ON EVERY ISSUE


SOCIAL SHARE
Categories: Sound Projects