I've been working Augmented Reality with AR.js for WebAR experiences & I need play sounds touching 3d objects on screen, but by now I can't, this is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Reproducción de sonido en AR.js</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/2.2.0/aframe/build/aframe-ar.js"></script>
<script>
function reproducirSonido() {
var sonido = document.getElementById("sonido");
sonido.play();
}
</script>
<style>
#marcador {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
margin-top: -150px;
margin-left: -150px;
background-color: white;
}
</style>
</head>
<body style="margin: 0px; overflow: hidden">
<a-scene embedded arjs>
<a-marker
preset="custom"
type="pattern"
url="https://cdn.glitch.global/847d4754-7230-4eb5-baeb-1626c2b619be/marker.patt?v=1681415242369"
>
<a-entity
gltf-model="https://cdn.glitch.global/847d4754-7230-4eb5-baeb-1626c2b619be/tecla001.gltf?v=1681415241911"
scale="0.5 0.5 0.5"
position="0 0 0"
rotation="0 45 0"
onclick="reproducirSonido()"
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
<audio
id="sonido"
src="https://cdn.glitch.global/847d4754-7230-4eb5-baeb-1626c2b619be/Funny_Scream.ogg?v=1681423344830"
></audio>
</body>
</html>
If you want, you can try the example from Glitch website the pattern for this example is the classic AR black square. Any suggestion or idea? Comment please.
Show & learn new experiences of WebAR with AR.js for anybody interested in this topic.
