In World Microphone and Speakers

src/components/avatar-audio-source.js

@@ -45,6 +45,7 @@ function setPositionalAudioProperties(audio, settings) {
   audio.setMaxDistance(settings.maxDistance);
   audio.setRefDistance(settings.refDistance);
   audio.setRolloffFactor(settings.rolloffFactor);
+  audio.setDirectionalCone(settings.innerAngle, settings.outerAngle, settings.outerGain);
 }
 
 AFRAME.registerComponent("avatar-audio-source", {
@@ -56,7 +57,11 @@ AFRAME.registerComponent("avatar-audio-source", {
     },
     maxDistance: { default: 10000 },
     refDistance: { default: 1 },
-    rolloffFactor: { default: 1 }
+    rolloffFactor: { default: 1 },
+
+    innerAngle: { default: 360 },
+    outerAngle: { default: 0 },
+    outerGain: { default: 0 }
   },
 
   createAudio: async function() {
@@ -144,3 +149,192 @@ AFRAME.registerComponent("avatar-audio-source", {
     this.destroyAudio();
   }
 });
+
+function createWhiteNoise(audioContext, gain) {
+  var bufferSize = 2 * audioContext.sampleRate,
+    noiseBuffer = audioContext.createBuffer(1, bufferSize, audioContext.sampleRate),
+    output = noiseBuffer.getChannelData(0);
+  for (var i = 0; i < bufferSize; i++) {
+    output[i] = (Math.random() * 2 - 1) * gain;
+  }
+
+  var whiteNoise = audioContext.createBufferSource();
+  whiteNoise.buffer = noiseBuffer;
+  whiteNoise.loop = true;
+  whiteNoise.start(0);
+  return whiteNoise;
+}
+
+/**
+ * @component zone-audio-source
+ * This component looks for audio sources that get near it, keeping track
+ * of them and making them available to other components. It currently only
+ * supports avatars via the avatar-audio-source component, and only a single
+ * source at a time, but this can easily be expanded in the future.
+ */
+AFRAME.registerComponent("zone-audio-source", {
+  schema: {
+    onlyMods: { default: true },
+    muteSelf: { default: true },
+
+    debug: { default: false }
+  },
+
+  init() {
+    const audioListener = this.el.sceneEl.audioListener;
+    const ctx = audioListener.context;
+    this.output = ctx.createGain();
+    if (this.data.debug) {
+      this.whiteNoise = createWhiteNoise(ctx, 0.01);
+      this.setInput(this.whiteNoise);
+    }
+
+    // TODO this should probably be using bounds similar to media-frames and trigger-volume.
+    // Doing the simple thing for now since we only support avatar audio sources currently
+    this.el.object3D.updateMatrixWorld();
+    const radius = this.el.object3D.matrixWorld.getMaxScaleOnAxis();
+    this.boundingRadiusSquared = radius * radius;
+
+    if (this.data.debug) {
+      this.el.setObject3D(
+        "debug",
+        new THREE.LineSegments(new THREE.WireframeGeometry(new THREE.SphereBufferGeometry(1, 10, 10)))
+      );
+    }
+  },
+
+  setInput(newInput) {
+    if (this.input) {
+      this.input.disconnect(this.output);
+      this.input = null;
+    }
+
+    if (newInput) {
+      newInput.connect(this.output);
+      this.input = newInput;
+    }
+  },
+
+  getAudioOutput() {
+    return this.output;
+  },
+
+  tick() {
+    if (this.trackingEl) {
+      const distanceSquared = this.trackingEl.object3D.position.distanceToSquared(this.el.object3D.position);
+      if (distanceSquared > this.boundingRadiusSquared) {
+        this.trackingEl = null;
+        this.setInput(this.whiteNoise);
+      }
+    } else {
+      const playerInfos = window.APP.componentRegistry["player-info"];
+      for (let i = 0; i < playerInfos.length; i++) {
+        const playerInfo = playerInfos[i];
+        const avatar = playerInfo.el;
+
+        if (this.data.onlyMods && !playerInfo.isOwner) continue;
+
+        const distanceSquared = avatar.object3D.position.distanceToSquared(this.el.object3D.position);
+        if (distanceSquared < this.boundingRadiusSquared) {
+          this.trackingEl = avatar;
+          if (this.data.muteSelf && this.trackingEl.id === "avatar-rig") {
+            // Don't emit your own audio
+            this.setInput(null);
+          } else {
+            getMediaStream(this.trackingEl).then(stream => {
+              const audioListener = this.el.sceneEl.audioListener;
+              const ctx = audioListener.context;
+              const node = ctx.createMediaStreamSource(stream);
+              this.setInput(node);
+            });
+          }
+        }
+      }
+    }
+  }
+});
+
+/**
+ * @component audio-target
+ * This component pulls audio from a "source" component and re-emits it.
+ * Currently the audio can come from a zone-audio-source. A gain as well
+ * as a random delay can be applied in addition to the standard positional
+ * audio properties, to better simulate a real world speaker setup.
+ */
+AFRAME.registerComponent("audio-target", {
+  schema: {
+    positional: { default: true },
+
+    distanceModel: {
+      default: "inverse",
+      oneOf: ["linear", "inverse", "exponential"]
+    },
+    maxDistance: { default: 10000 },
+    refDistance: { default: 8 },
+    rolloffFactor: { default: 5 },
+
+    innerAngle: { default: 170 },
+    outerAngle: { default: 300 },
+    outerGain: { default: 0.3 },
+
+    minDelay: { default: 0.01 },
+    maxDelay: { default: 0.13 },
+    gain: { default: 1.0 },
+
+    srcEl: { type: "selector" },
+
+    debug: { default: false }
+  },
+
+  init() {
+    this.createAudio();
+    this.connectAudio();
+  },
+
+  remove: function() {
+    this.destroyAudio();
+  },
+
+  createAudio: function() {
+    const audioListener = this.el.sceneEl.audioListener;
+    const audio = this.data.positional ? new THREE.PositionalAudio(audioListener) : new THREE.Audio(audioListener);
+
+    if (this.data.debug && this.data.positional) {
+      setPositionalAudioProperties(audio, this.data);
+      const helper = new THREE.PositionalAudioHelper(audio, this.data.refDistance, 16, 16);
+      audio.add(helper);
+    }
+
+    audio.setVolume(this.data.gain);
+
+    if (this.data.maxDelay > 0) {
+      const delayNode = audio.context.createDelay(this.data.maxDelay);
+      delayNode.delayTime.value = THREE.Math.randFloat(this.data.minDelay, this.data.maxDelay);
+      audio.setFilters([delayNode]);
+    }
+
+    this.el.setObject3D(this.attrName, audio);
+    audio.matrixNeedsUpdate = true;
+    audio.updateMatrixWorld();
+    this.audio = audio;
+  },
+
+  connectAudio() {
+    const srcEl = this.data.srcEl;
+    const srcZone = srcEl.components["zone-audio-source"];
+    const node = srcZone && srcZone.getAudioOutput();
+    if (node) {
+      this.audio.setNodeSource(node);
+    } else {
+      console.warn(`Failed to get audio from source for ${this.el.className}`, srcEl);
+    }
+  },
+
+  destroyAudio() {
+    const audio = this.el.getObject3D(this.attrName);
+    if (!audio) return;
+
+    audio.disconnect();
+    this.el.removeObject3D(this.attrName);
+  }
+});

src/gltf-component-mappings.js

@@ -451,3 +451,23 @@ AFRAME.GLTFModelPlus.registerComponent(
 AFRAME.GLTFModelPlus.registerComponent("video-texture-source", "video-texture-source");
 
 AFRAME.GLTFModelPlus.registerComponent("text", "text");
+AFRAME.GLTFModelPlus.registerComponent(
+  "audio-target",
+  "audio-target",
+  (el, componentName, componentData, _components, indexToEntityMap) => {
+    const { srcNode } = componentData;
+
+    let srcEl;
+    if (srcNode !== undefined) {
+      srcEl = indexToEntityMap[srcNode];
+      if (!srcEl) {
+        console.warn(
+          `Error inflating gltf component ${componentName}: Couldn't find srcEl entity with index ${srcNode}`
+        );
+      }
+    }
+
+    el.setAttribute(componentName, { srcEl });
+  }
+);
+AFRAME.GLTFModelPlus.registerComponent("zone-audio-source", "zone-audio-source");