I want to augment an animated 3d model in model-viewer where the animation should play in sync with audio. I have the implementation but there is some issue with augmentation surface pointing and audio sync with different browsers (Android And iOs) . Glitch Editor
<!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>Can any one help me fixing the issue . The audio is not properly in sync with the animated model. The Model rendering is also having some issue . Thank in Advance
from I Just want To Play Animation With Audio In model-viewer
No comments:
Post a Comment