The ability to have finite control over the audio properties in a space unlocks all kinds of design superpowers. Areas that amplify voices when participants stand on them, places for private conversations, spaces for media viewing without interrupting others, and many other applications. In Mozilla Hubs, we can use Audio Zones to customize some sound properties to achieve different results.
Hubs released Audio Zones in 2021 to give designers more control over sound properties by location. One experiment I tried early on was to recreate the popular Telephone Game by surrounding phone booths with Audio Zones that prevent sound from leaking out into the rest of the space. Two participants can enter the phone booths and communicate their secret word/phrase without other participants in the room being able to hear them.
Another use case for Audio Zones from Professor Gary Burnett of the University of Nottingham, UK who created a translucent cylinder space to have private discussions with students so that others can see they are in a conversation but not hear them.
Similarly, this dark backstage area leads into a VIP lounge that allows for private conversation so as not to interrupt anyone on stage or in the audience. Guests of the VIP area can watch the stage through in-room cameras speaking freely and making noise without worrying about bothering people outside. Great to use as a green room where speakers and guests can hang out during the event.
We have taken a look at a few ways to keep audio contained, but Audio Zones can also be used to bring audio out of space. Let's look at examples of stages where anyone standing on the stage can be heard throughout the space and learn how to set those up.
In the video below, notice what happens when the tree resembling members of a great American blues rock band moves to the stage. The green area represents the sound's distance traveled in space. The blue box above the stage is an audio zone with specific properties.
Creating an Audio Zone for a Speaker Stage
Let's take a quick look at how to create this using the 'Awesome Mozilla Hubs' space built by Cris K B with community contributors.
I'll quickly demonstrate how to use the Hubs Blender add-on to add an Audio Zone to the stage area in the Awesome Hubs Space that allows speakers to be heard all over the space regardless of a participant's position.
Next, we will need to edit some properties in the Hubs audio zone component. These properties come from the Web Audio API pannernode interface, an audio-processing object that represents the location, direction, and behavior of an audio source signal in a simulated physical space. You won't need to understand every property to set up a stage. Check out this helpful space if you would like more understanding of what these properties do. I think you'll find experiencing it in real-time is never gonna let you down!
This is the default setup for an Audio Zone component.
We make some edits for our stage setup
Next, we want to scale up the size of our Audio Zone, outlined in green, so the volume covers the whole stage.
To test your work, you may find it useful to use the audio debug panel in Hubs which will visualize your audio zones and help you to make tweaks to settings to test in real-time. You can find these options in the preferences 'Audio' section.
Finally, be sure to check out this test scene which gives you examples of different audio zones with properties courtesy of Senior Software Engineer Manuel Martin.
I hope you found this post useful. Do you have any interesting audio zone examples to share or questions? Let us know on Twitter or Discord.
