Import json file with audio

Design help Animations & Interactions
1

I have a lottie file created from a logo intro video. This has sound… it’s just a 7second file. I exported using bodymovin which now supports audio and it works great. Until I import into webflow where there’s an import error.
Why? If json files can support embedded audio then webflow should be able to as well.
I’ve read about using background music options but that seems a lot for a 7 second file.
Any other ideas?
Thanks
Pete

Here is my public share link: LINK
(how to access public share link)

2

Hello @PeteM, I believe you need another library to work with Lottie and audio, and even if you add the proper library, Webflow does not support MP3 files, so you will have to host your audio assets somewhere else. I hope this helps.

3

hi Pablo,
Hosting the mp3 is not a problem - Although the link doesn’t mention the audio - I presume it’s the Json file that i would have to host somewhere else? Sorry to be slow here but I am not sure what the configuration is supposed to be?

Thanks
Pete

1 Like
4

So if you host the json file somewhere else you can’t use Webflow’s native Lottie element, you will have to code the whole thing. Im sure they have the code on their github page, might be worth a try. I hope this helps.

5

Hi Pablo,
I really don’t understand what you mean . I’ve exported the JSon file using Bodymovin which now includes the audio but Webflow won’t let me import it as it says its invalid.

So I would have to rewrite the Json to not include the audio which defeats the idea.

The library example says that it works with Lottie when the json includes the audio… but again, I can’t use the Json in webflow. So it’s a vicious circle…

Pete

6

As an example

“If the howler library is in the global scope and lottie finds the Howl constructor, Lottie will take care of the rest.”

But as I can’t import the audio within the Json file, it won’t work.

Pete

7

@PeteM yeah so Webflow uses the library provided by Bodymovin to render the Json file you provide, however, I think new Json files, with audio files, provided by Bodymovin, are not supported by the library that Webflow uses. Maybe you can use Howler and make your Lottie work, but like I said before, you will have to code the entire thing. An example of what you have to do is here. I hope this helps.

8

Thanks Pablo - I think we are saying the same thing here - looking at the code for Howler, suggests I can put the Json file on a server, enter the URL and then this can be used. Bypassing the Webflow Lottie library. Or I have to find a library that can load in a audio file and play it automatically to synch in with the lottie file.

Cheers
Pete

1 Like