Audio

Lottie doesn't have a built-in support for audio layers so it depends on other libraries to play audio.

Howler

If the howler library is in the global scope and lottie finds the Howl constructor, Lottie will take care of the rest.
https://github.com/goldfire/howler.js/
Example:

<script>https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.0/howler.min.js</script>
<script>https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.10/lottie.min.js</script>
<script>
lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json
});
</script>

Option 2

If you don't want to expose Howler in the global scope, you can pass a factory function in the loadAnimation method that will get called every time a new audio layer is instanced. Example:

function createAudio(assetPath) {
    return new Howl({
        src: [assetPath]
    })
}
lottie.loadAnimation({
  container: element,
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json',
  audioFactory: createAudio,
});

Option 3

If you don't want to use howler and want to use another library, similar to option two, you can pass a different object as long as it exposes these methods:

• play
• seek
• playing
• rate
• setVolume

Example:

function createAudio(assetPath) {
    return {
        play: function(){this.isPlaying = true},
        seek: function(){this.isPlaying = false},
        playing: function(){},
        rate: function(){},
	setVolume: function(){},
   }
}
lottie.loadAnimation({
  container: element,
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json',
  audioFactory: createAudio,
});