Audiobystrata

src/components/audio-by-strata-aframe.js

@@ -0,0 +1,114 @@
+/* global AFRAME */
+
+/*
+ * Description
+ * ===========
+ * Allows for specified sounds to be played inside designated height ranges "stratas" within the environment
+ *
+ * Usage
+ * =======
+ * Attach this component to an empty a-entity after the related audio sources have been declared
+ * as separate sound entities. 
+ * 
+ * Reference the various audio sources using their id selectors in the component's audio1, audio2, audio3, and audio4 properties
+ * 
+ * Example
+ * ========
+ * <a-entity id="sound-1" position="0 0 0" sound="src: #sound-asset-1; volume: .5; loop: true"></a-entity>
+ * <a-entity id="sound-2" position="0 5 0" sound="src: #sound-asset-2; volume: .5; loop: true"></a-entity>
+ * <a-entity id="sound-3" position="0 10 0" sound="src: #sound-asset-3; volume: .5; loop: true"></a-entity>
+ * <a-entity id="sound-4" position="0 15 0" sound="src: #sound-asset-4; volume: .5; loop: true"></a-entity>
+ * 
+ * audio-by-strata="audio1: #sound-1; from1: 0; to1: 2.5; audio2: #sound-2; from2: 2.5; to2: 5.0; audio3: #sound-3; from3: 5.0; to3: 7.5; audio4: #sound-4; from4: 7.5; to4: 10.0"></a-entity>
+ */
+
+AFRAME.registerComponent("audio-by-strata", {
+    schema: {
+      audio1: { type: "selector" }, 
+      from1: { type: "number"},
+      to1: {type: "number"},
+      audio2: { type: "selector"},
+      from2: { type: "number"},
+      to2: {type: "number"},
+      audio3: { type: "selector" },
+      from3: { type: "number"},
+      to3: {type: "number"},
+      audio4: { type: "selector" },
+      from4: { type: "number"},
+      to4: {type: "number"},
+    },
+    init: function() {
+        const cameraEl = document.querySelector("[networked-avatar]"); //query the user
+        let strataMusicEntities = [this.data.audio1, this.data.audio2, this.data.audio3, this.data.audio4];
+        // let strataMusicEntities = document.querySelectorAll("[sound]");
+        console.log("strataMusicEntities.length: " + strataMusicEntities.length);
+
+        const from1 = this.data.from1;
+        const from2 = this.data.from2;
+        const from3 = this.data.from3;
+        const from4 = this.data.from4;
+
+        const to1 = this.data.to1;
+        const to2 = this.data.to2;
+        const to3 = this.data.to3;
+        const to4 = this.data.to4;
+
+        let userCurrStrata = 0;
+        let userPrevStrata = 0;
+
+        //Start scene
+        strataMusicEntities[0].components.sound.playSound();
+
+        //Continously update scene info
+        setInterval(function() {     
+            //let localPos = cameraEl.object3D.position;
+            let playerPos = cameraEl.object3D.getWorldPosition();  
+
+            //Calculate user current strata
+            userCurrStrata = calcStrata(playerPos.y);
+
+            //Check if user left the strata
+            if(userPrevStrata != userCurrStrata){           
+                if(strataMusicEntities.length > 0){
+                    updateActiveMusic(userCurrStrata, userPrevStrata);
+                }  
+                userPrevStrata = userCurrStrata;
+            }
+        }, 1000/80);
+
+        //Calculate the visited strata
+        function calcStrata(userHeight){
+            let resultStrata = null;
+
+            if(userHeight > from1 && userHeight <= to1){
+            resultStrata = 0;
+            }
+            else if(userHeight > from2 && userHeight <= to2){
+            resultStrata = 1;
+            }
+            else if(userHeight > from3 && userHeight <= to3){
+            resultStrata = 2;
+            }
+            else if(userHeight > from4 && userHeight <= to4){
+            resultStrata = 3;
+            }
+            else{
+            resultStrata = null;
+            }  
+            return resultStrata;
+        }
+
+        //Activate media in current strata and deactivate those in previous strata
+        function updateActiveMusic(strataCurr, strataPrev){
+            console.log("Current Strata: " + strataCurr);
+            console.log("Previous Strata: " + strataPrev);
+
+            if(strataPrev != null){
+            strataMusicEntities[strataPrev].components.sound.stopSound();
+            }
+            if(strataCurr != null){
+            strataMusicEntities[strataCurr].components.sound.playSound();
+            }
+        }
+    }
+  });

src/components/audio-by-strata-hubs.js

@@ -0,0 +1,163 @@
+/* global AFRAME */
+
+/*
+ * Description
+ * ===========
+ * Allows for specified audio files to be played inside designated height ranges "stratas" within the environment
+ *
+ * Usage
+ * ======= 
+ * Audio sounds are uploaded to an ngrok server, which is referenced by its unique server ID.
+ * 
+ * Example
+ * ========
+ * If ngrok Public URL is "https://ec85dd0b0721.ngrok.io/rooms", then assign variable ngrok_code to "ec85dd0b0721" 
+ */
+
+let ngrok_code = "1cf14edb86db";
+
+//Query user elements
+const cameraEl = document.querySelector("#avatar-rig"); //query the user
+//const sceneEl = document.querySelector('a-scene');
+
+const audio_link_1 = "https://" + ngrok_code + ".ngrok.io/assets/stratum_base.wav";
+const audio_link_2 = "https://" + ngrok_code + ".ngrok.io/assets/stratum_1.mp3";
+const audio_link_3 = "https://" + ngrok_code + ".ngrok.io/assets/stratum_2.mp3";
+const audio_link_4 = "https://" + ngrok_code + ".ngrok.io/assets/stratum_3.m4a";
+const audio_link_5 = "https://" + ngrok_code + ".ngrok.io/assets/stratum_4.mp3";
+const audio_link_6 = "https://" + ngrok_code + ".ngrok.io/assets/stratum_future.mp3";
+
+const from1 = -100;
+const to1 = -1;
+
+const from2 = -1;
+const to2 = 2.25;
+
+const from3 = 2.25;
+const to3 = 5.25;
+
+const from4 = 5.5;
+const to4 = 10.25;
+
+const from5 = 10.5;
+const to5 = 15.5;
+
+const from6 = 20;
+const to6 = 100;
+
+// Create your A-Frame entities
+const cubeQuad1 = document.createElement('a-box');
+const cubeQuad2 = document.createElement('a-box');
+const cubeQuad3 = document.createElement('a-box');
+const cubeQuad4 = document.createElement('a-box');
+const cubeQuad5 = document.createElement('a-box');
+const cubeQuad6 = document.createElement('a-box');
+
+// Cubes in Quads
+cubeQuad1.setAttribute('position', { x: 0, y: -2, z: 0 });
+cubeQuad1.setAttribute('material', { color: 'yellow', shader: 'flat' });
+cubeQuad1.setAttribute('visible', false);
+cubeQuad1.setAttribute('sound', {src: audio_link_1, volume: 1, loop: true, autoplay: false});
+
+cubeQuad2.setAttribute('position', { x: 0, y: 1, z: 0 });
+cubeQuad2.setAttribute('material', { color: 'blue', shader: 'flat' });
+cubeQuad2.setAttribute('visible', false);
+cubeQuad2.setAttribute('sound', {src: audio_link_2, volume: 1, loop: true, autoplay: false});
+
+cubeQuad3.setAttribute('position', { x: 0, y: 4, z: 0 });
+cubeQuad3.setAttribute('material', { color: 'green', shader: 'flat' });
+cubeQuad3.setAttribute('visible', false);
+cubeQuad3.setAttribute('sound', {src: audio_link_3, volume: 1, loop: true, autoplay: false});
+
+cubeQuad4.setAttribute('position', { x: 0, y: 7, z: 0 });
+cubeQuad4.setAttribute('material', { color: 'red', shader: 'flat' });
+cubeQuad4.setAttribute('visible', false);
+cubeQuad4.setAttribute('sound', {src: audio_link_4, volume: 1, loop: true, autoplay: false});
+
+cubeQuad5.setAttribute('position', { x: 0, y: 12, z: 0 });
+cubeQuad5.setAttribute('material', { color: 'purple', shader: 'flat' });
+cubeQuad5.setAttribute('visible', false);
+cubeQuad5.setAttribute('sound', {src: audio_link_5, volume: 1, loop: true, autoplay: false});
+
+cubeQuad6.setAttribute('position', { x: 0, y: 25, z: 0 });
+cubeQuad6.setAttribute('material', { color: 'orange', shader: 'flat' });
+cubeQuad6.setAttribute('visible', false);
+cubeQuad6.setAttribute('sound', {src: audio_link_6, volume: 1, loop: true, autoplay: false});
+
+//Code for testing on Mozilla Hubs
+APP.scene.appendChild(cubeQuad1);
+APP.scene.appendChild(cubeQuad2);
+APP.scene.appendChild(cubeQuad3);
+APP.scene.appendChild(cubeQuad4);
+APP.scene.appendChild(cubeQuad5);
+APP.scene.appendChild(cubeQuad6);
+
+//==================================================================================================
+
+//Music entities
+let strataMusicEntities = document.querySelectorAll("[sound]");
+console.log("strataMusicEntities.length: " + strataMusicEntities.length);
+
+let userCurrStrata = 0;
+let userPrevStrata = 0;
+
+//Start scene
+strataMusicEntities[0].components.sound.playSound();
+
+//Continously update scene info
+setInterval(function() {     
+    //let localPos = cameraEl.object3D.position;
+    let playerPos = cameraEl.object3D.getWorldPosition();  
+
+    //Calculate user current strata
+    userCurrStrata = calcStrata(playerPos.y);
+
+    //Check if user left the strata
+    if(userPrevStrata != userCurrStrata){           
+        if(strataMusicEntities.length > 0){
+            updateActiveMusic(userCurrStrata, userPrevStrata);
+        }  
+        userPrevStrata = userCurrStrata;
+    }
+}, 1000/80);
+
+//Calculate the visited strata
+function calcStrata(userHeight){
+    let resultStrata = null;
+
+    if(userHeight > from1 && userHeight <= to1){
+        resultStrata = 0;
+    }
+    else if(userHeight > from2 && userHeight <= to2){
+        resultStrata = 1;
+    }
+    else if(userHeight > from3 && userHeight <= to3){
+        resultStrata = 2;
+    }
+    else if(userHeight > from4 && userHeight <= to4){
+        resultStrata = 3;
+    }
+    else if(userHeight > from5 && userHeight <= to5){
+        resultStrata = 4
+    }
+    else if(userHeight > from6 && userHeight <= to6){
+        resultStrata = 5;
+    }
+    else{
+    resultStrata = null;
+    }  
+    return resultStrata;
+}
+
+//Activate media in current strata and deactivate those in previous strata
+function updateActiveMusic(strataCurr, strataPrev){
+    console.log("Current Strata: " + strataCurr);
+    console.log("Previous Strata: " + strataPrev);
+
+    if(strataPrev != null){
+    strataMusicEntities[strataPrev].components.sound.stopSound();
+    }
+    if(strataCurr != null){
+    strataMusicEntities[strataCurr].components.sound.playSound();
+    }
+}