1

I'm currently trying to play a JSON animation exported from After Effects with the plugin Bodymovin that now supports audio files.

The problem is that it is just playing that animation and not playing the audio. First, I thought it was Bodymovin not exporting correctly the file with the sound, but then i found a codepen example of an animation with sound playing correctly. In this codepen they link a json document stored in the web and it's is playing as it should.

To test if the problem was with my json file, i dowdnoaded the codepen site, went to the site where the json animation file is stored and copied all the code to the notepad and saved it as json. Then instead of using the link as the path i used the local json file i created and animation plays perfectly (i am talking about the animation from the codepen, so it proves that the file is working) but it does not play the audio. So basically, the exact same json code is playing audio when it is stored on the web, but not when it is a local file created with the Windows notepad.

I don't really understand how json works as Bodymovin creates it automatically for me and i just need to link it to my site, but i think it has something to do with the json file created by notepad not having the audio codecs or something like that.

Here is the link to the codepen: https://codepen.io/airnan/pen/gOrwBqm

var anim;
var elem = document.getElementById("lottie");
var startButton = document.getElementById("start-button");
var speed = document.getElementById("speed");
var volume = document.getElementById("volume");
var animData = {
  container: elem,
  renderer: "svg",
  loop: false,
  autoplay: false,
  path: "https://labs.nearpod.com/bodymovin/demo/mixstories/data.json"
};
anim = lottie.loadAnimation(animData);

anim.addEventListener("complete", function (error) {
  startButton.style.display = "block";
  anim.goToAndStop(0);
});

anim.addEventListener("DOMLoaded", function (error) {
  startButton.style.display = "block";
  anim.setVolume(0.5);
  addListeners();
});

function togglePlay() {
  if (anim.isPaused) {
    startButton.style.display = "none";
    anim.play();
  } else {
    anim.pause();
    startButton.style.display = "block";
  }
}

function updateSpeed(ev) {
  anim.setSpeed(ev.target.value);
}
function updateVolume(ev) {
  anim.setVolume(ev.target.value);
}

function addListeners() {
  speed.addEventListener("change", updateSpeed);
  speed.addEventListener("input", updateSpeed);
  volume.addEventListener("change", updateVolume);
  volume.addEventListener("input", updateVolume);
  elem.addEventListener("click", togglePlay);
  startButton.addEventListener("click", togglePlay);
} 

on the 11th line of the js file you can see the link to the animation, i then opened it copied everything and pasted it in the note pad, With the link it works (animation + audio), with the notepad file it just plays the animation and not the audio.

Can anyone help me? thanks in advance.

VC.One
  • 14,790
  • 4
  • 25
  • 57
  • I can hear sounds, on your Pen demo. **Click**, **Thump**, etc. Perhaps you already found a fix? But if not... I was using Firefox latest at Mid March 2021 and running latest Win10 x64. I hope my reply helps, even if it points to a browser/platform/or local issue at your end. i.e. It may be that your dev computer isn't playing sounds, but I could hear them. Lastly, I'm no expert so these comments are subjective. This is my first comment on Stack. I'm not sure what I have fed back, will help, but I hope so! Cheers – David Mar 16 '21 at 05:24

0 Answers0