如何解决如何使用 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 举报,一经查实,本站将立刻删除。