OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

A-frame spatial(positional) audio for the a-video primitive

  • Thread starter Thread starter Remi
  • Start date Start date
R

Remi

Guest
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 :

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

<p>I am using A-frame 1.5 for which the primitive "a-video" (<a href="https://aframe.io/docs/1.5.0/primitives/a-video.html" rel="nofollow noreferrer">https://aframe.io/docs/1.5.0/primitives/a-video.html</a>) doesn't provide spatial sound, the audio of videos si then playing the volume depen..ding of my rig position on the virtual world.</p>
<p>Here is a bit of my current code :</p>
<pre><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.
</code></pre>
<p>Does anyone knows how I can do to make the sound of my video spatial (as it is with the "sound" component <a href="https://aframe.io/docs/1.5.0/components/sound.html" rel="nofollow noreferrer">https://aframe.io/docs/1.5.0/components/sound.html</a> ) ?</p>
<p>I also tried this solution (<a href="https://github.com/chetu3319/aframe-video" rel="nofollow noreferrer">https://github.com/chetu3319/aframe-video</a>) but it was bringing errors and wasn't working on A-frame 1.5 which I am using.</p>
<p>Any help would be very appreciated</p>
 

Latest posts

Online statistics

Members online
0
Guests online
2
Total visitors
2
Ads by Eonads
Top