如何使用 json 文件在网站上播放音频?

如何解决如何使用 json 文件在网站上播放音频?

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

问题在于它只是播放动画而不是播放音频。首先,我认为是 bodymovin 没有正确导出带有声音的文件,但后来我发现了一个声音播放正确的动画的代码笔示例。在这代码笔中,他们链接一个存储在网络中的 json 文档,它正在播放。

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

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

这是代码笔的链接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 行,您可以看到动画的链接,然后我打开它复制所有内容并将其粘贴到记事本中,使用它的链接(动画 + 音频),使用记事本文件只播放动画,不播放音频

谁能帮帮我?提前致谢。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName()”和“ Class.forName()。newInstance()”之间有什么区别?
在此环境中不提供编译器。也许是在JRE而不是JDK上运行?
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖?
Java 什么是Runtime.getRuntime()。totalMemory()和freeMemory()?
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类。怎么处理?
Java 是否应该在HttpServletResponse.getOutputStream()/。getWriter()上调用.close()?
Java RegEx元字符(。)和普通点?