Skip to main content
3mo ago

Not able to render animation with sound

Hello,

I designed an interactive animation, and I am rendering it on a Wordpress website.

I managed to render the animation without audio, but when I render the animation with audio the animation starts and stop immediately, without rendering any audio.

This is the link to the animation in Rive: https://rive.app/community/files/12682-24036-abstract-communication

This is the link of the website where I am rendering the animation: https://kontradiktion.fi/2024/09/sara-sssimone/

And this is the code I have been writing:
<div class="sscontainer">

<canvas id="sscanvas" width="700" height="397"></canvas>

</div>

<script src="https://unpkg.com/@rive-app/canvas@2.9.1"></script>

<script>

const r = new rive.Rive({

src: "https://kontradiktion.fi/wp/wp-content/uploads/2024/09/Sara-Sssimone-animation-with-audio.riv",

canvas: document.getElementById("sscanvas"),

autoplay: true,

stateMachines: "State Machine 1",

onLoad: () => {

r.resizeDrawingSurfaceToCanvas();

},

});

</script>

I tried to render the animation on Firefox 130.0 (64-bit) and Google Chrome 128.0.6613.120 (Official Build) (64-bit). I used Rive app v 0.8.1780

Could someone help me to solve the issue?

Thanks a lot,
Sssimone

2 replies
C
C
3mo ago

Hi. Your site is calling an old version of the WASM runtime which does not have support for audio. If you edit this line <script src="https://unpkg.com/@rive-app/canvas@2.9.1"></script>and replace "2.9.1" with "2.20.0" the audio should work. You can see which runtime versions support each major feature here: https://rive.app/community/doc/feature-support/dockjX9x72UM

3mo ago

Thanks a lot Chad, it works now!