To feel an energetic and vibrant user experience, an app might want to include sound effects on events, notifications, transitions, interactions, or even music. ARWES provides a few tools to manage audio playback.

Bleeps

ARWES Bleeps can be used to manage beeps, bleeps, chimes, bells, typing, scanning, processing, or any kind of sounds. It is mostly recommended for short sound effects rather than playing long music or recording audio files. It is inspired by the Howler.js library.

Sounds are categorized by groups which can be configured accordingly such as relative volume or loading settings.

• Background: Ambient sounds with lowest volume.
• Transition: Sounds when UI elements enter or exit the app with low volume.
• Interaction: Sounds when user interacts with UI elements with medium volume.
• Notification: Sounds on events with high volume.
• Voice: Communication sounds with highest volume.

For example, global app volume can be at 50% of current operative system volume, then relative by category, notifications/voice can be at 100% relative volume, interactions at 75%, transitions at 50%, and backgrounds at 25%.

Normally, the audio files are loaded once per application and provided to all applicable components to play either declaratively or imperatively.

Accessibility

It mostly depends on the target audience of the app, for most cases, little or no sound effects is the recommended approach, but for others having sound feedback makes the experience more alive such as games and highly immersive experiences. First think about the audience before investing effort in sound effects.

To prevent Sensory Overload, sound effects should be meticulously selected (or designed) to create a non-invasive, non-intrusive, non-cumbersome experience throughout your app. The volume, the frequency, the timbre, reverb, the timing, the intensity, and many other factors are important to provide a pleasent experience to the user. It is recommended to allow the user to update sound settings to enable/disable them as preferred.

Modern browsers have an Audio Playback Policy to prevent web apps to intrusively play sounds until user properly interacts with it. If the app requires to have access for audio playback, having something like a mandatory entry screen and force the user to click/tap a button/icon to unlock audio playback can be an option.

You can read Material Design v2 Sound guidelines for more recommendations.

Compatibility

First .webm and then .mp3 audio file formats are recommended for cross-browser support and performance. .webm is supported in most browsers except in iOS. .mp3 should be used as a fallback. .wav can be used for high-quality too. You can read more at Media container formats. ARWES provides ways to define and prioritize audio files to load and play.

Feel free to use tools like Audacity to export your audio files in the formats required and even adjust them.

Getting Sounds

Usually, unless there is an available sound designer, the sounds used are bought individually or in bundles from providers or services. There are many options and inspirations on the Internet. It takes time to define what are the requirements for a project and decide on which sounds to use.

Download the Google Product Sounds bundle of sounds for your own use as a starting point if you need.