javascript - 我只想在模型查看器中播放带有音频的动画
问题描述
我想在模型查看器中增强动画 3d 模型,其中动画应该与音频同步播放。我有实现,但增强表面指向和与不同浏览器(Android 和 iOs)的音频同步存在一些问题。故障编辑器
<!DOCTYPE html>
<html lang="en">
<head>
<title><model-viewer> example</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->
<!-- REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>
<!-- OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>
<!-- OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
<script src="https://unpkg.com/resize-observer-polyfill@1.5.0/dist/ResizeObserver.js"></script>
<!-- OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
<!--<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>-->
<!-- OPTIONAL: Include prismatic.js for Magic Leap support -->
<script src="https://unpkg.com/@magicleap/prismatic/prismatic.min.js"></script>
</head>
<body>
<!-- pfc sync between audio time and model-viewer animation time -->
<script>
function Sync(selector, audioSelector) {
var checkExist = setInterval(function() {
if (document.querySelector(selector) != null) {
var modelViewer = document.querySelector(selector);
var sound = document.querySelector(audioSelector);
sound.addEventListener("timeupdate", () => {
modelViewer.currentTime = sound.currentTime;
});
var promise = sound.play();
if (promise !== undefined) {
promise
.then(_ => {
// Autoplay started!
})
.catch(error => {
// Autoplay was prevented.
// Show a "Play" button so that user can start playback.
});
}
clearInterval(checkExist);
}
}, 1000);
}
</script>
<!--
Penguin + Train Sound = ok
"https://cdn.glitch.com/7d7e8236-5fa5-4809-ab74-eb6bf2bef1c6%2Fmodel.glb?sound=https://cdn.glitch.com/99537520-86ee-43b2-9c9a-4e6b399f9e42%2FSteamTrain.ogg&link=https://prefrontalcortex.de"
Train + Train sound = kein Sound
"https://cdn.glitch.com/99537520-86ee-43b2-9c9a-4e6b399f9e42%2FTrain-br111.glb?sound=https://cdn.glitch.com/99537520-86ee-43b2-9c9a-4e6b399f9e42%2FSteamTrain.ogg&link=https://prefrontalcortex.de"
-->
<model-viewer
src="https://cdn.glitch.com/7fa75de4-559e-4a0e-9d57-bbfce6666947%2FTrainAnimated-Blender-3.glb?sound=https://cdn.glitch.com/99537520-86ee-43b2-9c9a-4e6b399f9e42%2FSteamTrain.ogg&link=https://google.com"
ios-src="https://cdn.glitch.com/7fa75de4-559e-4a0e-9d57-bbfce6666947%2FTrain-br111-fixedTangents.usdz?sound=https://cdn.glitch.com/7fa75de4-559e-4a0e-9d57-bbfce6666947%2FSteamTrain.mp3&link=https://google.com"
ar
background-color="#fffff"
alt="BR 111"
exposure="1"
shadow-intensity="1"
camera-controls
auto-rotate
autoplay
quick-look-browsers="safari chrome"
id="modelviewer"
style="position:absolute; left:0; top:0; margin:0; padding:0; width:100%; height:100%;"
>
</model-viewer>
<section class="attribution">
<span>
<span><audio controls autoplay loop id="sound">
<source src="https://cdn.glitch.com/99537520-86ee-43b2-9c9a-4e6b399f9e42%2FSteamTrain.ogg" type="audio/ogg">
<source src="https://cdn.glitch.com/7fa75de4-559e-4a0e-9d57-bbfce6666947%2FSteamTrain.mp3" type="audio/mp3">
</audio></span>
</span>
</section>
<script>
Sync("#modelviewer", "#sound");
</script>
<!-- Include both scripts below to support all browsers! -->
<!-- Import the component -->
<script
type="module"
src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"
></script>
<script
nomodule
src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"
></script>
</body>
</html>
谁能帮我解决这个问题。音频与动画模型不正确同步。模型渲染也有一些问题。预先感谢
解决方案
您的模型和声音的持续时间不相等。
您的模型持续时间是8.333333015441895但您的声音持续时间是47.827732。而且我认为没有必要使用 setInterval。
<!DOCTYPE html>
<html lang="en">
<head>
<title><model-viewer> example</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->
<!-- REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>
<!-- OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>
<!-- OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
<script src="https://unpkg.com/resize-observer-polyfill@1.5.0/dist/ResizeObserver.js"></script>
<!-- OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
<!--<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>-->
<!-- OPTIONAL: Include prismatic.js for Magic Leap support -->
<script src="https://unpkg.com/@magicleap/prismatic/prismatic.min.js"></script>
</head>
<body>
<!-- pfc sync between audio time and model-viewer animation time -->
<script>
function Sync(selector, audioSelector) {
var sound = document.querySelector(audioSelector);
var modelViewer = document.querySelector(selector);
if (modelViewer && sound) {
sound.addEventListener("timeupdate", () => {
if (sound.currentTime > modelViewer.duration) {
// restart both model and sound
modelViewer.currentTime = 0;
sound.currentTime = 0;
} else {
modelViewer.currentTime = sound.currentTime;
}
});
}
// I commented these two because currentTime=0 doesn't affect those.
modelViewer.setAttribute("camera-controls", true);
modelViewer.setAttribute("auto-rotate", true);
modelViewer.setAttribute("autoplay", true);
sound.play();
modelViewer.play();
}
</script>
<!--
Penguin + Train Sound = ok
"https://cdn.glitch.com/7d7e8236-5fa5-4809-ab74-eb6bf2bef1c6%2Fmodel.glb?sound=https://cdn.glitch.com/99537520-86ee-43b2-9c9a-4e6b399f9e42%2FSteamTrain.ogg&link=https://prefrontalcortex.de"
Train + Train sound = kein Sound
"https://cdn.glitch.com/99537520-86ee-43b2-9c9a-4e6b399f9e42%2FTrain-br111.glb?sound=https://cdn.glitch.com/99537520-86ee-43b2-9c9a-4e6b399f9e42%2FSteamTrain.ogg&link=https://prefrontalcortex.de"
-->
<model-viewer
src="https://cdn.glitch.com/7fa75de4-559e-4a0e-9d57-bbfce6666947%2FTrainAnimated-Blender-3.glb?sound=https://cdn.glitch.com/99537520-86ee-43b2-9c9a-4e6b399f9e42%2FSteamTrain.ogg&link=https://google.com"
ios-src="https://cdn.glitch.com/7fa75de4-559e-4a0e-9d57-bbfce6666947%2FTrain-br111-fixedTangents.usdz?sound=https://cdn.glitch.com/7fa75de4-559e-4a0e-9d57-bbfce6666947%2FSteamTrain.mp3&link=https://google.com"
ar
background-color="#fffff"
alt="BR 111"
exposure="1"
shadow-intensity="1"
quick-look-browsers="safari chrome"
id="modelviewer"
style="
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
"
>
</model-viewer>
<section class="attribution">
<span>
<span
><audio controls loop id="sound">
<source
src="https://cdn.glitch.com/99537520-86ee-43b2-9c9a-4e6b399f9e42%2FSteamTrain.ogg"
type="audio/ogg"
/>
<source
src="https://cdn.glitch.com/7fa75de4-559e-4a0e-9d57-bbfce6666947%2FSteamTrain.mp3"
type="audio/mp3"
/></audio
></span>
</span>
</section>
<script>
Sync("#modelviewer", "#sound");
</script>
<!-- Include both scripts below to support all browsers! -->
<!-- Import the component -->
<script
type="module"
src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"
></script>
<script
nomodule
src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"
></script>
</body>
</html>
推荐阅读
- vue.js - 如何在不添加我自己的 prop 的情况下将内置的 Vuetify 组件 prop 从其父级应用到 SFC 的根元素?
- angular - 使用 formio 时如何在 Angular *module* 中捕获 onSubmit
- ios - 使用更新的@published 变量推送导航链接
- javascript - 是否可以在“获取”选项中使用变量?
- vb.net - 过滤Sql中的错误返回直接转换错误
- angular - 使用 ng update @angular/cli @angular/core --allow-dirty --force 进行角度更新
- ansible - 我正在尝试使用 ansible 角色角色执行 SQL 脚本:ansible-role-sql-sqlscripts,但它给出了错误“无效的 sql 文件名”
- python - PyTorch TypeError:“ToTensor”对象不可迭代
- r - 如何基于组创建(在 r 中)UTM 位置之间的距离向量?
- php - 如何从数组中获取信息以正确显示(Laravel)?