Introduction
While visuals often take center stage, there's an unsung hero working behind the scenes, amplifying the depth of our engagements: audio. Sound undeniably augments a project, particularly if the objective is to engage your audience emotionally then it is a mandatory component. We often speak about visual reward for interaction, sound is just as valuable in eliciting immersion and emotion. The soundscape makes the project more memorable.
For creative and technical reasons audio comes at the end of the Design phase, by then you might be a bit tired, but don’t let up it’s well worth it 🙂
Here's a few things producers should know about audio production for the web.
Sound Types
Lets start with the different sound types.
- Sound Design: Envision this as sonic brush strokes on a canvas. It's the aural essence that sets the mood, constructs the ambiance, and often becomes the heart of the story.
- Music: Memorable jingles, ambient scores, and thematic tones can shape brand perception, evoke emotions, and establish lasting connections.
- Voiceovers: The human voice lends narrative weight, context, and a touch of humanity to visual content, ensuring clarity and relatability.
- Ambience and Sound Effects (SFX): these elements intensify and enrich user interactions (a menu opening, a scene transition, an event), making them feel more intuitive and real.
Use Cases
Let’s look at how these different sound files can be used in digital projects.
- Web Audio: beyond the visual interfaces of websites and applications, and you'll find audio cues and atmospheres distinguishing one experience from another. You can scroll through Awwwards to get hundreds of examples of this.
- App Soundscapes: Those familiar notification pings or feedback chimes are not mere sounds, but carefully designed cues that shape our interaction with apps. Think Duolingo.
- Virtual and Augmented Reality: Spatial sound here roots users, guiding them and enhancing the immersive experience. Audio loops and exact synchronization with animations play a vital role in crafting seamless and compelling alternate realities.
- Gaming and Interactive Storytelling: Here, audio doesn't merely accompany visuals; it's integral to the narrative and gameplay. Whether it's matching the exact duration of an animation or looping background music.
If you’re particularly interested in sound, I recommend this interactive article on the nature of waveforms:
Technical Considerations
When bringing audio into a digital experience, you’ll need to consider a few technical constraints. Here are a few to keep in mind when your vendor is producing audio:
Looping and Duration Matching:
If a sound or piece of music needs to be looped, it should be edited so that it can be played on repeat without noticeable jumps or gaps. This is almost always the case for ambient sound.
For 3D or 2D animations, or videos, the audio should be timed perfectly. The start and end of the audio should coincide with the visual content to ensure a cohesive experience. So you’ll need to have that asset ready and approved by the client before creating audio for it.
Browser Limitations:
All the major browsers have security and user experience measures in place that prevent media from autoplaying. This can affect the immediate playback of audio content when a webpage loads.
Given the autoplay restrictions, you’ll need to include a step with an easily identifiable button or prompt at the start of the experience. This allows users to actively initiate audio playback when they're ready.
Mobile Considerations
Many mobile users, especially those on cellular data, may have audio turned off by default to save on data or avoid disruptions. It's essential to keep this in mind when designing the user experience.
Given that mobile users might not always have audio enabled, make sure that the story or message being conveyed isn't solely reliant on audio. The visual content should be able to stand alone and effectively communicate the intended message.
Which is why most often audio serves as an enhancement to the visual experience rather than a core storytelling mechanism. Therefore make sure the sound levels aren’t too high so that audio doesn’t become a distraction from the experience. It should augment the story or visuals rather than overshadow it.
Consider treating audio as an "added layer" or bonus to the experience. This approach makes the inclusion of audio feel like a reward or additional feature for those who choose to enable it, without penalizing those who don't.
Exercise
Go on Awwwards and have a look at a few experiences to better understand how sound is used. Then create a free account on a sound library to choose a few ambient sounds for your project.
Naturally I’d recommend looking at a few of Immersive Garden’s productions!
