1

我目前正在尝试使用现在支持音频文件的插件 Bodymovin 播放从 After Effects 导出的 JSON 动画。

问题是它只是播放那个动画而不是播放音频。首先，我认为是 Bodymovin 没有正确导出带有声音的文件，但后来我找到了一个带有正确播放声音的动画的 codepen 示例。在这个 codepen 中，他们链接了一个存储在网络中的 json 文档，它正在按应有的方式播放。

为了测试问题是否与我的 json 文件有关，我下载了 codepen 站点，转到存储 json 动画文件的站点并将所有代码复制到记事本并将其保存为 json。然后，我没有使用链接作为路径，而是使用了我创建的本地 json 文件并且动画播放完美（我正在谈论来自 codepen 的动画，所以它证明文件正在工作）但它不播放音频。所以基本上，当它存储在网络上时，完全相同的 json 代码正在播放音频，但当它是使用 Windows 记事本创建的本地文件时则不会。

我真的不明白 json 是如何工作的，因为 Bodymovin 会自动为我创建它，我只需要将它链接到我的网站，但我认为它与记事本创建的 json 文件有关，它没有音频编解码器或类似的东西那。

这是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);
}

在 js 文件的第 11 行，您可以看到动画的链接，然后我打开它复制所有内容并将其粘贴到记事本中，通过链接可以正常工作（动画 + 音频），使用记事本文件它只是播放动画而不是音频。

谁能帮我？提前致谢。

4

0 回答 0