Rive Blog

Add sounds to animations with Audio Events

Free access to Soundly's library of 3,000+ sounds.

-

Wednesday, April 17, 2024

Make some noise because the moment we’ve been teasing is finally here — Audio Events! Rive now has Audio support across our runtimes and editor. This means designers can add user-triggered sounds to their animations to give them that extra oomph. 

This first phase of audio is an expansion of Events and is ideal for playing short sound effects triggered by animations. Longer form audio — such as background music and voice overs — can also be triggered with Audio Events, but you won’t be able to manipulate volume and panning over time. We plan to add features to support this later.

Just like an Event, Audio can be fired on a timeline, state transition, or listener. When a Rive Event fires, your runtime application receives the Event signal at a specific time to allow it to execute any code at just the right moment. 

Audio Events can be used to play audio at runtime in sync with your Rive graphic, as we demonstrated in the original launch video for Events. At that point, audio could only play at runtime and required additional engineering effort to implement. Now, Audio Events plays at runtime and lets you play sound directly in the Rive Editor – with no further engineering effort required. 

George Lucas famously said sound is 50% of the cinematic experience. For animators, adding sound helps bring their interactive experiences to life ✨even more✨and empowers them to build new types of creative experiences that stand out from the norm.

Learn how to integrate Audio Events into your runtime

Watch the Audio Events Youtube tutorial

Free access to Soundly library

We partnered with Soundly to give everyone access to their free library of 3,000+ sounds sourced from audio professionals. For more customization, you can upload your own sounds with a paid Rive account. This is similar to how we give you Google Fonts for free, and then allow you to upload your own fonts with a Pro, Team, or Enterprise subscription. 

More control over your audio clips

With Audio Events we're also introducing the Waveform Clipper, which lets you create smaller clips from a longer audio file. It’s particularly useful when selecting clips from the Soundly files. For example, if you search for a “beep,” one file may provide five to six versions of a beep sound. You can use the clipper to trim the files you want, and then add those clips as an Event trigger to the State Machine in whatever combination you choose.


Quick tip: don't forget to "click to start"

What’s next?

In the future we plan to build out Audio even more. Here’s a sneak peek of what’s to come: 

  • Audio Emitters — Animate audio to change volume or effects over time. This will be useful for creating longer audio, like looping or background music. 

  • Audio Groups — Categorize and combine sounds with effects.

Examples from the Rive Creative Team

Now let’s dig into three use cases so you can see and hear Audio Events in action. You can remix these designs via the corresponding Community links. Remixing is an easy way to quickly learn how to use Audio Events.

Hearts and skulls

Creative Director Jerry Liu / Community file

This “hearts & skulls” interactive grid shows how a simple arrangement of repeated components and sound effects can serve as building blocks for more complex and rich experiences — such as drawing tools, map creators, mini games, experiential art, and more.

Skater spelling game

Animator Ross Plaskow / Community file

In this spelling challenge, the different audio tones for picking up and dropping the blocks cue the player.

Interactive piano

Animator Pedro Alpera / Community file

Audio helps your design hit all the right notes, like in this piano animation. 

Animate with Audio Events

Audio Events can be used in countless scenarios, whether you’re building an in-app game, designing a company website, or creating a fun personal project. 

Learn how to integrate Audio Events into your runtime

Watch the Audio Events Youtube tutorial

Join our newsletter

Get all the latest Rive news delivered to your inbox.