I am using A-frame 1.5 for which the primitive “a-video” (https://aframe.io/docs/1.5.0/primitives/a-video.html) doesn’t provide spatial sound, the audio of videos si then playing the volume depen..ding of my rig position on the virtual world.
Here is a bit of my current code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="https://..../favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wy Wordl</title>
<meta name="description" content="">
<link rel="stylesheet" href="Style.css">
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="aframe.js"></script>
<script src="Scripts/[email protected]"></script>
<script src="Scripts/[email protected]"></script>
<script src="Scripts/aframe-proxy-event-component2.1.0.js"></script>
<script src="Scripts/aframe-blink-controls.js"></script>
<script src="Scripts/highlight.js"></script>
<script src="Scripts/info-panel.js"></script>
<script src="Scripts/main.js"></script>
<script src="Scripts/[email protected]"></script>
<script src="Scripts/liquid-portal.js"></script>
<script src="Scripts/joystick.js"></script>
<script src="Scripts/simple-navmesh-constraint.js"></script>
<script src="Scripts/aframe-gradient-sky.js"></script>
<script src="Scripts/gradient-shader.js"></script>
<script src="src/video-comp.js" ></script>
</head>
<body>
<!-- -->
<!-- AFRAME SCENE -->
<!-- -->
<a-assets>
<a-asset-item id="Room" src="Assets/world.glb"></a-asset-item>
<a-asset-item id="navmesh" src="Assets/world.navmesh.glb"></a-asset-item>
<audio id="background-music" src="Assets/ambient.mp3"></audio>
<a-mixin id="progressivecontrolspointdefault" raycaster="showLine: true; objects: .clickable" super-hands="colliderEvent: raycaster-intersection; colliderEventProperty: els; colliderEndEvent: raycaster-intersection-cleared; colliderEndEventProperty: el"></a-mixin>
<a-img id="line-cont" src="Assets/Line.png"></a-img>
<video id="videoAsset1" autoplay loop playsinline webkit-playsinline crossorigin="anonymous"></video>
<video id="videoAsset2" autoplay loop playsinline webkit-playsinline crossorigin="anonymous"></video>
<video id="videoAsset3" autoplay loop playsinline webkit-playsinline crossorigin="anonymous"></video>
<video id="videoAsset4" autoplay loop playsinline webkit-playsinline crossorigin="anonymous"></video>
<video id="videoAsset5" autoplay loop playsinline webkit-playsinline crossorigin="anonymous"></video>
<video id="videoAsset6" autoplay loop playsinline webkit-playsinline crossorigin="anonymous"></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</a-assets>
<!-- Cursor -->
<a-entity cursor="rayOrigin: mouse" raycaster="objects: .clickable; far: 10"></a-entity>
<!-- Camera RIG PC & VR -->
(I removed the most out of it)
<!-- Music -->
<a-entity id="music" sound="src: #background-music; autoplay: true; loop: true; volume: 1.5; positional: true; refDistance: 1; rolloffFactor: 1; maxDistance: 25;" position="0 0 0"></a-entity>
<!-- Room -->
<a-entity id="full-room" scale="1 1 1" rotation="0 270 0" position="0 0 0">
<!-- Mesh + Navmesh -->
<a-gltf-model src="#Room" scale="1 1 1" position="0 0 0" animation-mixer></a-gltf-model>
<a-gltf-model src="#Room_eyes" scale="1 1 1" position="0 0 0" animation-mixer></a-gltf-model>
<a-gltf-model id="floor" src="#navmesh" scale="1 1 1" position="0 0 0" class="navmesh" visible="false"></a-gltf-model>
</a-entity>
<!-- Music -->
<a-entity id="music" sound="src: #background-music; autoplay: true; loop: true; volume: 1.5; positional: true; refDistance: 1; rolloffFactor: 1; maxDistance: 25;" position="0 0 0"></a-entity>
<!-- Video elements -->
<a-video src="#videoAsset1" position="8.59776 6.46145 0" width="4" height="2.25" rotation="0 -90 0" material="" geometry="" scale="2.2206 2.2206 2.2206" sound="src: #videoAsset1; maxDistance: 25"></a-video>
// Here then my video sound isn't spatial, using the a-video primitive, what I'm looking at is having a code or something that would help me to get its sound spatial as it is for the music element just above
<a-video src="#videoAsset2" position="-20.33656 3.59567 -22.14214" width="4" height="2.25" rotation="" material="" geometry="" scale="2.01618 2.68823 0.59264"></a-video>
<a-video src="#videoAsset3" position="20.0805 3.60574 -22.55541" width="4" height="2.25" rotation="" scale="2.016 2.688 0.593" material="" geometry=""></a-video>
<a-video src="#videoAsset4" position="37.4867 3.59486 -0.0247" width="4" height="2.25" rotation="0 -90 0" scale="2.01618 2.68823 0.59264" material="" geometry=""></a-video>
<a-video src="#videoAsset5" position="19.05554 3.87522 22.32539" width="4" height="2.25" rotation="0 180 0" scale="2.01607 2.68809 0.59261" material="" geometry=""></a-video>
<a-video src="#videoAsset6" position="-20.46981 3.68333 21.84823" width="4" height="2.25" rotation="0 180 0" scale="2.016 2.688 0.593" material="" geometry=""></a-video>
</a-scene>
<script>
function initHLS(videoElementId, hlsUrl, audioEntityId) {
if (Hls.isSupported()) {
var video = document.getElementById(videoElementId);
var hls = new Hls();
hls.loadSource(hlsUrl);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
video.play();
});
hls.on(Hls.Events.AUDIO_TRACK_METADATA, (event, data) => {
const audioEl = new Audio();
audioEl.src = URL.createObjectURL(new Blob([data.samples], { type: 'audio/mpeg' }));
audioEl.play();
const soundEl = document.getElementById(audioEntityId);
soundEl.setObject3D('sound', new THREE.PositionalAudio(audioEl));
soundEl.object3D.sound.setLoop(true);
soundEl.object3D.sound.setRefDistance(1);
soundEl.object3D.sound.setRolloffFactor(1);
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
var video = document.getElementById(videoElementId);
video.src = hlsUrl;
video.addEventListener('loadedmetadata', function() {
video.play();
});
}
}
// Initialize other HLS videos without spatial audio
(i removed this part with the HLS from the code here)
</script>
I looked for many solutions but didn't found anything really working.
Does anyone knows how I can do to make the sound of my video spatial (as it is with the “sound” component https://aframe.io/docs/1.5.0/components/sound.html ) ?
I also tried this solution (https://github.com/chetu3319/aframe-video) but it was bringing errors and wasn’t working on A-frame 1.5 which I am using.
Any help would be very appreciated
New contributor
Remi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.