diff --git a/src/components/audio-params.js b/src/components/audio-params.js
new file mode 100644
index 0000000000..204b56676e
--- /dev/null
+++ b/src/components/audio-params.js
@@ -0,0 +1,238 @@
+import { Vector3 } from "three";
+import { AudioNormalizer } from "../utils/audio-normalizer";
+
+export const SourceType = Object.freeze({ MEDIA_VIDEO: 0, AVATAR_AUDIO_SOURCE: 1, AVATAR_RIG: 2 });
+
+const MUTE_DELAY_SECS = 1;
+
+AFRAME.registerComponent("audio-params", {
+  dependencies: ["media-views", "avatar-audio-source"],
+  schema: {
+    enabled: { default: true },
+    isLocal: { default: false },
+    position: { type: "vec3", default: { x: 0, y: 0, z: 0 } },
+    orientation: { type: "vec3", default: { x: 0, y: 0, z: 0 } },
+    distanceModel: { default: "inverse", oneOf: ["linear", "inverse", "exponential"] },
+    rolloffFactor: { default: 3 },
+    refDistance: { default: 1 },
+    maxDistance: { default: 20 },
+    clippingThreshold: { default: 0.015 },
+    prevGain: { default: 1.0 },
+    isClipped: { default: false },
+    gain: { default: 1.0 },
+    sourceType: { default: -1 },
+    attenuation: { default: 1.0 },
+    distance: { default: 0.0 },
+    squaredDistance: { default: 0.0 }
+  },
+
+  init() {
+    this.data.position = new Vector3(0.0, 0.0, 0.0);
+    this.data.orientation = new Vector3(0.0, 0.0, 0.0);
+    this.normalizer = null;
+    this.el.sceneEl?.systems["audio-debug"].registerSource(this);
+    if (!this.data.isLocal) {
+      this.el.sceneEl?.systems["audio-gain"].registerSource(this);
+    }
+
+    if (this.data.isLocal) {
+      this.data.sourceType = SourceType.AVATAR_RIG;
+    } else if (this.el.components["media-video"]) {
+      this.data.sourceType = SourceType.MEDIA_VIDEO;
+      this.data.gain = this.el.components["media-video"].data.volume;
+      this.el.addEventListener("media-volume-changed", this.sourceVolumeChanged.bind(this));
+    } else if (this.el.components["avatar-audio-source"]) {
+      this.data.sourceType = SourceType.AVATAR_AUDIO_SOURCE;
+      this.data.gain =
+        this.el.parentEl.parentEl.querySelector("[avatar-volume-controls]").components["avatar-volume-controls"]?.data
+          .volume || 1.0;
+      this.el.parentEl.parentEl.addEventListener("avatar-volume-changed", this.sourceVolumeChanged.bind(this));
+    }
+  },
+
+  remove() {
+    this.normalizer = null;
+    this.el.sceneEl?.systems["audio-debug"].unregisterSource(this);
+    if (!this.data.isLocal) {
+      this.el.sceneEl?.systems["audio-gain"].unregisterSource(this);
+    }
+
+    if (this.el.components["media-video"]) {
+      this.el.removeEventListener("media-volume-changed", this.sourceVolumeChanged);
+    } else if (this.el.components["avatar-audio-source"]) {
+      this.el.parentEl.parentEl.removeEventListener("avatar-volume-changed", this.sourceVolumeChanged);
+    }
+  },
+
+  tick() {
+    const audio = this.audio();
+    if (audio) {
+      if (audio.updateMatrixWorld) {
+        audio.updateMatrixWorld(true);
+      }
+      this.data.position = new THREE.Vector3(
+        audio.panner.positionX.value,
+        audio.panner.positionY.value,
+        audio.panner.positionZ.value
+      );
+      this.data.orientation = new THREE.Vector3(
+        audio.panner.orientationX.value,
+        audio.panner.orientationY.value,
+        audio.panner.orientationZ.value
+      );
+      this.data.distanceModel = audio.panner.distanceModel;
+      this.data.rolloffFactor = audio.panner.rolloffFactor;
+      this.data.refDistance = audio.panner.refDistance;
+      this.data.coneInnerAngle = audio.panner.coneInnerAngle;
+      this.data.coneOuterAngle = audio.panner.coneOuterAngle;
+      this.updateDistances();
+      this.updateAttenuation();
+    }
+
+    if (this.normalizer !== null) {
+      this.normalizer.apply();
+    } else {
+      // We one only enable the Normalizer for avatar-audio-source components
+      if (this.data.sourceType === SourceType.AVATAR_AUDIO_SOURCE) {
+        this.enableNormalizer();
+      }
+    }
+  },
+
+  audio() {
+    if (this.data.sourceType === SourceType.AVATAR_RIG) {
+      // Create fake parametes for the avatar rig as it doens't have an audio source.
+      const audioParams = this.el.sceneEl.systems["hubs-systems"].audioSettingsSystem.audioSettings;
+      const avatarRigObj = document.getElementById("avatar-rig").querySelector(".camera").object3D;
+      avatarRigObj.updateMatrixWorld(true);
+      const position = new THREE.Vector3();
+      avatarRigObj.getWorldPosition(position);
+      const direction = new THREE.Vector3(0, 0, -1);
+      const worldQuat = new THREE.Quaternion();
+      avatarRigObj.getWorldQuaternion(worldQuat);
+      direction.applyQuaternion(worldQuat);
+      return {
+        panner: {
+          orientationX: {
+            value: direction.x
+          },
+          orientationY: {
+            value: direction.y
+          },
+          orientationZ: {
+            value: direction.z
+          },
+          positionX: {
+            value: position.x
+          },
+          positionY: {
+            value: position.y
+          },
+          positionZ: {
+            value: position.z
+          },
+          distanceModel: audioParams.avatarDistanceModel,
+          maxDistance: audioParams.avatarMaxDistance,
+          refDistance: audioParams.avatarRefDistance,
+          rolloffFactor: audioParams.avatarRolloffFactor,
+          coneInnerAngle: audioParams.avatarConeInnerAngle,
+          coneOuterAngle: audioParams.avatarConeOuterAngle
+        }
+      };
+    } else if (this.data.sourceType === SourceType.MEDIA_VIDEO) {
+      const audio = this.el.getObject3D("sound");
+      return audio instanceof THREE.PositionalAudio ? audio : null;
+    } else if (this.data.sourceType === SourceType.AVATAR_AUDIO_SOURCE) {
+      const audio = this.el.getObject3D("avatar-audio-source");
+      return audio instanceof THREE.PositionalAudio ? audio : null;
+    }
+  },
+
+  enableNormalizer() {
+    const audio = this.audio();
+    if (audio) {
+      const avatarAudioSource = this.el.components["avatar-audio-source"];
+      if (avatarAudioSource) {
+        this.normalizer = new AudioNormalizer(audio);
+        avatarAudioSource.el.addEventListener("sound-source-set", () => {
+          const audio = avatarAudioSource && avatarAudioSource.el.getObject3D(avatarAudioSource.attrName);
+          if (audio) {
+            this.normalizer = new AudioNormalizer(audio);
+            this.normalizer.apply();
+          }
+        });
+      }
+    }
+  },
+
+  updateDistances() {
+    const listenerPos = new THREE.Vector3();
+    this.el.sceneEl.audioListener.getWorldPosition(listenerPos);
+    this.data.distance = this.data.position.distanceTo(listenerPos);
+    this.data.squaredDistance = this.data.position.distanceToSquared(listenerPos);
+  },
+
+  updateAttenuation() {
+    if (this.data.distanceModel === "linear") {
+      this.data.attenuation =
+        1.0 -
+        this.data.rolloffFactor *
+          ((this.data.distance - this.data.refDistance) / (this.data.maxDistance - this.data.refDistance));
+    } else if (this.data.distanceModel === "inverse") {
+      this.data.attenuation =
+        this.data.refDistance /
+        (this.data.refDistance +
+          this.data.rolloffFactor * (Math.max(this.data.distance, this.data.refDistance) - this.data.refDistance));
+    } else if (this.data.distanceModel === "exponential") {
+      this.data.attenuation = Math.pow(
+        Math.max(this.data.distance, this.data.refDistance) / this.data.refDistance,
+        -this.data.rolloffFactor
+      );
+    }
+  },
+
+  clipGain(gain) {
+    const audio = this.audio();
+    this.data.isClipped = true;
+    this.data.prevGain = this.data.gain;
+    this.data.gain = gain;
+    this.data.gain = this.data.gain === 0 ? 0.001 : this.data.gain;
+    audio.gain.gain.exponentialRampToValueAtTime(this.data.gain, audio.context.currentTime + MUTE_DELAY_SECS);
+  },
+
+  unclipGain() {
+    const audio = this.audio();
+    this.data.isClipped = false;
+    this.data.gain = this.data.prevGain;
+    this.data.gain = this.data.gain === 0 ? 0.001 : this.data.gain;
+    audio?.gain?.gain.exponentialRampToValueAtTime(this.data.gain, audio.context.currentTime + MUTE_DELAY_SECS);
+  },
+
+  updateGain(newGain) {
+    const audio = this.audio();
+    if (this.data.isClipped) {
+      this.data.prevGain = newGain;
+    } else {
+      this.data.prevGain = this.data.gain;
+      this.data.gain = newGain;
+    }
+    this.data.gain = this.data.gain === 0 ? 0.001 : this.data.gain;
+    audio?.gain?.gain.exponentialRampToValueAtTime(this.data.gain, audio.context.currentTime + MUTE_DELAY_SECS);
+  },
+
+  sourceVolumeChanged({ detail: volume }) {
+    let globalVolume = 100;
+    const { audioOutputMode, globalVoiceVolume, globalMediaVolume } = window.APP.store.state.preferences;
+    if (this.data.sourceType === SourceType.MEDIA_VIDEO) {
+      globalVolume = globalMediaVolume;
+    } else if (this.data.sourceType === SourceType.AVATAR_AUDIO_SOURCE) {
+      globalVolume = globalVoiceVolume;
+    }
+    const volumeModifier = (globalVolume !== undefined ? globalVolume : 100) / 100;
+    let newGain = volumeModifier * volume;
+    if (audioOutputMode === "audio") {
+      newGain = this.data.gain * Math.min(1, 10 / Math.max(1, this.data.squaredDistance));
+    }
+    this.updateGain(newGain);
+  }
+});
diff --git a/src/components/avatar-audio-source.js b/src/components/avatar-audio-source.js
index 86cc294b02..0b35792bb8 100644
--- a/src/components/avatar-audio-source.js
+++ b/src/components/avatar-audio-source.js
@@ -40,14 +40,6 @@ async function getMediaStream(el) {
   return stream;
 }
 
-function setPositionalAudioProperties(audio, settings) {
-  audio.setDistanceModel(settings.distanceModel);
-  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", {
   schema: {
     positional: { default: true },
@@ -74,7 +66,7 @@ AFRAME.registerComponent("avatar-audio-source", {
     const audioListener = this.el.sceneEl.audioListener;
     const audio = this.data.positional ? new THREE.PositionalAudio(audioListener) : new THREE.Audio(audioListener);
     if (this.data.positional) {
-      setPositionalAudioProperties(audio, this.data);
+      this.setPositionalAudioProperties(audio, this.data);
     }
 
     if (SHOULD_CREATE_SILENT_AUDIO_ELS) {
@@ -102,7 +94,7 @@ AFRAME.registerComponent("avatar-audio-source", {
     this.el.sceneEl.systems["hubs-systems"].audioSettingsSystem.registerAvatarAudioSource(this);
     // We subscribe to audio stream notifications for this peer to update the audio source
     // This could happen in case there is an ICE failure that requires a transport recreation.
-    NAF.connection.adapter.on("stream_updated", this._onStreamUpdated, this);
+    NAF.connection.adapter?.on("stream_updated", this._onStreamUpdated, this);
     this.createAudio();
   },
 
@@ -139,7 +131,7 @@ AFRAME.registerComponent("avatar-audio-source", {
       this.destroyAudio();
       this.createAudio();
     } else if (this.data.positional) {
-      setPositionalAudioProperties(audio, this.data);
+      this.setPositionalAudioProperties(audio, this.data);
     }
   },
 
@@ -147,6 +139,16 @@ AFRAME.registerComponent("avatar-audio-source", {
     this.el.sceneEl.systems["hubs-systems"].audioSettingsSystem.unregisterAvatarAudioSource(this);
     NAF.connection.adapter.off("stream_updated", this._onStreamUpdated);
     this.destroyAudio();
+  },
+
+  setPositionalAudioProperties(audio, settings) {
+    audio.setDistanceModel(settings.distanceModel);
+    audio.setMaxDistance(settings.maxDistance);
+    audio.setRefDistance(settings.refDistance);
+    audio.setRolloffFactor(settings.rolloffFactor);
+    audio.panner.coneInnerAngle = settings.coneInnerAngle;
+    audio.panner.coneOuterAngle = settings.coneOuterAngle;
+    audio.panner.coneOuterGain = settings.coneOuterGain;
   }
 });
 
diff --git a/src/components/avatar-volume-controls.js b/src/components/avatar-volume-controls.js
index 7170874506..97810556a9 100644
--- a/src/components/avatar-volume-controls.js
+++ b/src/components/avatar-volume-controls.js
@@ -3,96 +3,6 @@ const MAX_VOLUME = 8;
 const SMALL_STEP = 1 / (VOLUME_LABELS.length / 2);
 const BIG_STEP = (MAX_VOLUME - 1) / (VOLUME_LABELS.length / 2);
 
-// Inserts analyser and gain nodes after audio source.
-// Analyses audio source volume and adjusts gain value
-// to make it in a certain range.
-class AudioNormalizer {
-  constructor(audio) {
-    this.audio = audio;
-    this.analyser = audio.context.createAnalyser();
-    this.connected = false;
-
-    // To analyse volume, 32 fftsize may be good enough
-    this.analyser.fftSize = 32;
-    this.gain = audio.context.createGain();
-    this.timeData = new Uint8Array(this.analyser.frequencyBinCount);
-    this.volumes = [];
-    this.volumeSum = 0;
-  }
-
-  apply() {
-    if (window.APP.store.state.preferences.audioNormalization) {
-      if (!this.connected) {
-        this.connect();
-      }
-    } else {
-      if (this.connected) {
-        this.disconnect();
-      }
-      return;
-    }
-
-    // Adjusts volume in "a rule of the thumb" way
-    // Any better algorithm?
-
-    // Regards the RMS of time-domain data as volume.
-    // Is this a right approach?
-    // Using the RMS of frequency-domain data would be another option.
-    this.analyser.getByteTimeDomainData(this.timeData);
-    const squareSum = this.timeData.reduce((sum, num) => sum + Math.pow(num - 128, 2), 0);
-    const volume = Math.sqrt(squareSum / this.analyser.frequencyBinCount);
-    const baseVolume = window.APP.store.state.preferences.audioNormalization;
-
-    // Regards volume under certain threshold as "not speaking" and skips.
-    // I'm not sure if 0.4 is an appropriate threshold.
-    if (volume >= Math.min(0.4, baseVolume)) {
-      this.volumeSum += volume;
-      this.volumes.push(volume);
-      // Sees only recent volume history because there is a chance
-      // that a speaker changes their master input volume.
-      // I'm not sure if 600 is an appropriate number.
-      while (this.volumes.length > 600) {
-        this.volumeSum -= this.volumes.shift();
-      }
-      // Adjusts volume after getting many enough volume history.
-      // I'm not sure if 60 is an appropriate number.
-      if (this.volumes.length >= 60) {
-        const averageVolume = this.volumeSum / this.volumes.length;
-        this.gain.gain.setTargetAtTime(baseVolume / averageVolume, this.audio.context.currentTime, 0.01);
-      }
-    }
-  }
-
-  connect() {
-    // Hacks. THREE.Audio connects audio nodes when source is set.
-    // If audio is not played yet, THREE.Audio.setFilters() doesn't
-    // reset connections. Then manually caling .connect()/disconnect() here.
-    // This might be a bug of Three.js and should be fixed in Three.js side?
-    if (this.audio.source && !this.audio.isPlaying) {
-      this.audio.disconnect();
-    }
-    const filters = this.audio.getFilters();
-    filters.unshift(this.analyser, this.gain);
-    this.audio.setFilters(filters);
-    if (this.audio.source && !this.audio.isPlaying) {
-      this.audio.connect();
-    }
-    this.connected = true;
-  }
-
-  disconnect() {
-    if (this.audio.source && !this.audio.isPlaying) {
-      this.audio.disconnect();
-    }
-    const filters = [this.analyser, this.gain];
-    this.audio.setFilters(this.audio.getFilters().filter(filter => !filters.includes(filter)));
-    if (this.audio.source && !this.audio.isPlaying) {
-      this.audio.connect();
-    }
-    this.connected = false;
-  }
-}
-
 AFRAME.registerComponent("avatar-volume-controls", {
   schema: {
     volume: { type: "number", default: 1.0 }
@@ -118,7 +28,9 @@ AFRAME.registerComponent("avatar-volume-controls", {
   },
 
   changeVolumeBy(v) {
-    this.el.setAttribute("avatar-volume-controls", "volume", THREE.Math.clamp(this.data.volume + v, 0, MAX_VOLUME));
+    const vol = THREE.Math.clamp(this.data.volume + v, 0, MAX_VOLUME);
+    this.el.setAttribute("avatar-volume-controls", "volume", vol);
+    this.el.emit("avatar-volume-changed", vol);
     this.updateVolumeLabel();
   },
 
@@ -132,43 +44,6 @@ AFRAME.registerComponent("avatar-volume-controls", {
     this.changeVolumeBy(-1 * step);
   },
 
-  update: (function() {
-    const positionA = new THREE.Vector3();
-    const positionB = new THREE.Vector3();
-    return function update() {
-      const audio = this.avatarAudioSource && this.avatarAudioSource.el.getObject3D(this.avatarAudioSource.attrName);
-      if (!audio) {
-        return;
-      }
-
-      if (!this.normalizer) {
-        this.normalizer = new AudioNormalizer(audio);
-        this.avatarAudioSource.el.addEventListener("sound-source-set", () => {
-          const audio =
-            this.avatarAudioSource && this.avatarAudioSource.el.getObject3D(this.avatarAudioSource.attrName);
-          if (audio) {
-            this.normalizer = new AudioNormalizer(audio);
-            this.normalizer.apply();
-          }
-        });
-      }
-
-      this.normalizer.apply();
-
-      const { audioOutputMode, globalVoiceVolume } = window.APP.store.state.preferences;
-      const volumeModifier = (globalVoiceVolume !== undefined ? globalVoiceVolume : 100) / 100;
-      let gain = volumeModifier * this.data.volume;
-      if (audioOutputMode === "audio") {
-        this.avatarAudioSource.el.object3D.getWorldPosition(positionA);
-        this.el.sceneEl.audioListener.getWorldPosition(positionB);
-        const squaredDistance = positionA.distanceToSquared(positionB);
-        gain = gain * Math.min(1, 10 / Math.max(1, squaredDistance));
-      }
-
-      audio.gain.gain.value = gain;
-    };
-  })(),
-
   updateVolumeLabel() {
     const numBars = Math.min(
       VOLUME_LABELS.length - 1,
@@ -177,19 +52,5 @@ AFRAME.registerComponent("avatar-volume-controls", {
         : Math.floor(VOLUME_LABELS.length / 2 + (this.data.volume - 1) / BIG_STEP)
     );
     this.volumeLabel.setAttribute("text", "value", this.data.volume === 0 ? "Muted" : VOLUME_LABELS[numBars]);
-  },
-
-  tick() {
-    if (!this.avatarAudioSource && !this.searchFailed) {
-      // Walk up to Spine and then search down.
-      const sourceEl = this.el.parentNode.parentNode.querySelector("[avatar-audio-source]");
-      if (!sourceEl || !sourceEl.components["avatar-audio-source"]) {
-        this.searchFailed = true;
-        return;
-      }
-      this.avatarAudioSource = sourceEl.components["avatar-audio-source"];
-    }
-
-    this.update();
   }
 });
diff --git a/src/components/media-loader.js b/src/components/media-loader.js
index 04b187841d..185e92578a 100644
--- a/src/components/media-loader.js
+++ b/src/components/media-loader.js
@@ -171,6 +171,7 @@ AFRAME.registerComponent("media-loader", {
     this.el.removeAttribute("gltf-model-plus");
     this.el.removeAttribute("media-pager");
     this.el.removeAttribute("media-video");
+    this.el.removeAttribute("audio-params");
     this.el.removeAttribute("media-pdf");
     this.el.setAttribute("media-image", { src: "error" });
     this.clearLoadingTimeout();
@@ -348,6 +349,7 @@ AFRAME.registerComponent("media-loader", {
       this.el.removeAttribute("gltf-model-plus");
       this.el.removeAttribute("media-pager");
       this.el.removeAttribute("media-video");
+      this.el.removeAttribute("audio-params");
       this.el.removeAttribute("media-pdf");
       this.el.removeAttribute("media-image");
     }
@@ -460,6 +462,7 @@ AFRAME.registerComponent("media-loader", {
             linkedMediaElementAudioSource
           })
         );
+        this.el.setAttribute("audio-params", {});
         if (this.el.components["position-at-border__freeze"]) {
           this.el.setAttribute("position-at-border__freeze", { isFlat: true });
         }
@@ -469,6 +472,7 @@ AFRAME.registerComponent("media-loader", {
       } else if (contentType.startsWith("image/")) {
         this.el.removeAttribute("gltf-model-plus");
         this.el.removeAttribute("media-video");
+        this.el.removeAttribute("audio-params");
         this.el.removeAttribute("media-pdf");
         this.el.removeAttribute("media-pager");
         this.el.addEventListener(
@@ -511,6 +515,7 @@ AFRAME.registerComponent("media-loader", {
       } else if (contentType.startsWith("application/pdf")) {
         this.el.removeAttribute("gltf-model-plus");
         this.el.removeAttribute("media-video");
+        this.el.removeAttribute("audio-params");
         this.el.removeAttribute("media-image");
         this.el.setAttribute(
           "media-pdf",
@@ -544,6 +549,7 @@ AFRAME.registerComponent("media-loader", {
       ) {
         this.el.removeAttribute("media-image");
         this.el.removeAttribute("media-video");
+        this.el.removeAttribute("audio-params");
         this.el.removeAttribute("media-pdf");
         this.el.removeAttribute("media-pager");
         this.el.addEventListener(
@@ -577,6 +583,7 @@ AFRAME.registerComponent("media-loader", {
       } else if (contentType.startsWith("text/html")) {
         this.el.removeAttribute("gltf-model-plus");
         this.el.removeAttribute("media-video");
+        this.el.removeAttribute("audio-params");
         this.el.removeAttribute("media-pdf");
         this.el.removeAttribute("media-pager");
         this.el.addEventListener(
diff --git a/src/components/media-views.js b/src/components/media-views.js
index f43d7a8831..4e6d54ecd0 100644
--- a/src/components/media-views.js
+++ b/src/components/media-views.js
@@ -289,8 +289,6 @@ AFRAME.registerComponent("media-video", {
     this.changeVolumeBy = this.changeVolumeBy.bind(this);
     this.togglePlaying = this.togglePlaying.bind(this);
 
-    this.distanceBasedAttenuation = 1;
-
     this.lastUpdate = 0;
     this.videoMutedAt = 0;
     this.localSnapCount = 0;
@@ -404,7 +402,9 @@ AFRAME.registerComponent("media-video", {
   },
 
   changeVolumeBy(v) {
-    this.el.setAttribute("media-video", "volume", THREE.Math.clamp(this.data.volume + v, 0, 1));
+    const vol = THREE.Math.clamp(this.data.volume + v, 0, 1);
+    this.el.setAttribute("media-video", "volume", vol);
+    this.el.emit("media-volume-changed", vol);
     this.updateVolumeLabel();
   },
 
@@ -465,6 +465,7 @@ AFRAME.registerComponent("media-video", {
     if (this._ignorePauseStateChanges) return;
 
     this.el.setAttribute("media-video", "videoPaused", this.video.paused);
+    this.el.setAttribute("audio-params", { enabled: !this.video.paused });
 
     if (this.networkedEl && NAF.utils.isMine(this.networkedEl)) {
       this.el.emit("owned-video-state-changed");
@@ -482,15 +483,6 @@ AFRAME.registerComponent("media-video", {
         this.tryUpdateVideoPlaybackState(this.data.videoPaused);
       }
     }
-
-    // Volume is local, always update it
-    if (this.audio && window.APP.store.state.preferences.audioOutputMode !== "audio") {
-      const globalMediaVolume =
-        window.APP.store.state.preferences.globalMediaVolume !== undefined
-          ? window.APP.store.state.preferences.globalMediaVolume
-          : 100;
-      this.audio.gain.gain.value = (globalMediaVolume / 100) * this.data.volume;
-    }
   },
 
   tryUpdateVideoPlaybackState(pause, currentTime) {
@@ -554,7 +546,6 @@ AFRAME.registerComponent("media-video", {
     if (!disablePositionalAudio && this.data.audioType === "pannernode") {
       this.audio = new THREE.PositionalAudio(this.el.sceneEl.audioListener);
       this.setPositionalAudioProperties();
-      this.distanceBasedAttenuation = 1;
     } else {
       this.audio = new THREE.Audio(this.el.sceneEl.audioListener);
     }
@@ -862,6 +853,8 @@ AFRAME.registerComponent("media-video", {
         videoEl.onerror = failLoad;
 
         if (this.data.audioSrc) {
+          videoEl.muted = true;
+
           // If there's an audio src, create an audio element to play it that we keep in sync
           // with the video while this component is active.
           audioEl = createVideoOrAudioEl("audio");
@@ -932,8 +925,6 @@ AFRAME.registerComponent("media-video", {
   },
 
   tick: (() => {
-    const positionA = new THREE.Vector3();
-    const positionB = new THREE.Vector3();
     return function() {
       if (!this.video) return;
 
@@ -977,20 +968,6 @@ AFRAME.registerComponent("media-video", {
           this.lastUpdate = now;
         }
       }
-
-      if (this.audio) {
-        if (window.APP.store.state.preferences.audioOutputMode === "audio") {
-          this.el.object3D.getWorldPosition(positionA);
-          this.el.sceneEl.audioListener.getWorldPosition(positionB);
-          const distance = positionA.distanceTo(positionB);
-          this.distanceBasedAttenuation = Math.min(1, 10 / Math.max(1, distance * distance));
-          const globalMediaVolume =
-            window.APP.store.state.preferences.globalMediaVolume !== undefined
-              ? window.APP.store.state.preferences.globalMediaVolume
-              : 100;
-          this.audio.gain.gain.value = (globalMediaVolume / 100) * this.data.volume * this.distanceBasedAttenuation;
-        }
-      }
     };
   })(),
 
diff --git a/src/components/player-info.js b/src/components/player-info.js
index 374c046e5a..79c1afce7d 100644
--- a/src/components/player-info.js
+++ b/src/components/player-info.js
@@ -183,6 +183,8 @@ AFRAME.registerComponent("player-info", {
         el.setAttribute("emit-scene-event-on-remove", "event:action_end_video_sharing");
       }
     }
+
+    this.el.querySelector("[audio-params]")?.setAttribute("audio-params", { enabled: !this.data.muted });
   },
   handleModelError() {
     window.APP.store.resetToRandomDefaultAvatar();
diff --git a/src/hub.html b/src/hub.html
index ce292d573b..0734b85a95 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -220,7 +220,8 @@
 
                         <template data-name="Head">
                             <a-entity
-                                avatar-audio-source="rolloffFactor: 2.0;"
+                                avatar-audio-source="rolloffFactor: 3.0;"
+                                audio-params
                                 personal-space-invader="radius: 0.15; useMaterial: true;"
                                 bone-visibility
                                 body-helper="type: kinematic; collisionFilterGroup: 4; collisionFilterMask: 1;"
@@ -1196,6 +1197,7 @@
                 id="avatar-pov-node"
                 class="camera"
                 personal-space-bubble="radius: 0.4;"
+                audio-params="isLocal: true"
                 rotation
                 pitch-yaw-rotator
                 set-yxz-order
diff --git a/src/hub.js b/src/hub.js
index 378a05544b..afa3aa0743 100644
--- a/src/hub.js
+++ b/src/hub.js
@@ -118,6 +118,7 @@ import "./components/optional-alternative-to-not-hide";
 import "./components/avatar-audio-source";
 import "./components/avatar-inspect-collider";
 import "./components/video-texture-target";
+import "./components/audio-params";
 
 import ReactDOM from "react-dom";
 import React from "react";
@@ -160,6 +161,8 @@ import "./systems/capture-system";
 import "./systems/listed-media";
 import "./systems/linked-media";
 import { SOUND_CHAT_MESSAGE } from "./systems/sound-effects-system";
+import "./systems/audio-debug-system";
+import "./systems/audio-gain-system";
 
 import "./gltf-component-mappings";
 
@@ -619,7 +622,7 @@ function handleHubChannelJoined(entryManager, hubChannel, messageDispatch, data)
         .catch(connectError => {
           clearTimeout(connectionErrorTimeout);
           connectionErrorTimeout = null;
-          adapter.disconnect();
+          NAF.connection.adapter?.disconnect();
           onConnectionError(entryManager, connectError);
         });
     };
diff --git a/src/react-components/preferences-screen.js b/src/react-components/preferences-screen.js
index 98ff35b142..6e37c9a268 100644
--- a/src/react-components/preferences-screen.js
+++ b/src/react-components/preferences-screen.js
@@ -484,6 +484,10 @@ const preferenceLabels = defineMessages({
     id: "preferences-screen.preference.show-rtc-debug-panel",
     defaultMessage: "Show RTC Panel"
   },
+  showAudioDebugView: {
+    id: "preferences-screen.preference.show-audio-debug-view",
+    defaultMessage: "Show Audio Debug View"
+  },
   theme: {
     id: "preferences-screen.preference.theme",
     defaultMessage: "Theme"
@@ -1060,7 +1064,8 @@ class PreferencesScreen extends Component {
           { key: "preferMobileObjectInfoPanel", prefType: PREFERENCE_LIST_ITEM_TYPE.CHECK_BOX, defaultBool: false },
           { key: "animateWaypointTransitions", prefType: PREFERENCE_LIST_ITEM_TYPE.CHECK_BOX, defaultBool: true },
           { key: "showFPSCounter", prefType: PREFERENCE_LIST_ITEM_TYPE.CHECK_BOX, defaultBool: false },
-          { key: "showRtcDebugPanel", prefType: PREFERENCE_LIST_ITEM_TYPE.CHECK_BOX, defaultBool: false }
+          { key: "showRtcDebugPanel", prefType: PREFERENCE_LIST_ITEM_TYPE.CHECK_BOX, defaultBool: false },
+          { key: "showAudioDebugView", prefType: PREFERENCE_LIST_ITEM_TYPE.CHECK_BOX, defaultBool: false }
         ]
       ]
     ]);
diff --git a/src/storage/store.js b/src/storage/store.js
index 47877568df..f5ed815a8d 100644
--- a/src/storage/store.js
+++ b/src/storage/store.js
@@ -127,6 +127,7 @@ export const SCHEMA = {
         enableAECHack: { type: "bool" },
         locale: { type: "string" },
         showRtcDebugPanel: { type: "bool" },
+        showAudioDebugView: { type: "bool" },
         theme: { type: "string" }
       }
     },
diff --git a/src/systems/audio-debug-system.js b/src/systems/audio-debug-system.js
new file mode 100644
index 0000000000..790158241d
--- /dev/null
+++ b/src/systems/audio-debug-system.js
@@ -0,0 +1,317 @@
+import { THREE } from "aframe";
+
+const MAX_DEBUG_SOURCES = 64;
+
+const CONE_VERTEX = `
+  varying vec2 vUv;
+  varying vec3 vNormal;
+  void main()
+  {
+    vNormal = normalize(normal);
+    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+    vUv = position.xz;
+  }
+`;
+const CONE_FRAG = `
+  // Based on: https://www.shadertoy.com/view/Mll3D4#
+  varying vec2 vUv;
+  varying vec3 vNormal;
+  uniform float time;
+
+  const int LINEAR = 0;
+  const int INVERSE = 1;
+  const int EXPONENTIAL = 2;
+          
+  uniform vec3 colorInner;
+  uniform vec3 colorOuter;
+  uniform vec3 colorGain;
+  uniform int positionsNum;
+  uniform vec3 positions[${MAX_DEBUG_SOURCES}];
+  uniform vec3 orientations[${MAX_DEBUG_SOURCES}];
+  uniform float maxDistance[${MAX_DEBUG_SOURCES}];
+  uniform float refDistance[${MAX_DEBUG_SOURCES}];
+  uniform float rolloffFactor[${MAX_DEBUG_SOURCES}];
+  uniform int distanceModel[${MAX_DEBUG_SOURCES}];
+  uniform float coneInnerAngle[${MAX_DEBUG_SOURCES}];
+  uniform float coneOuterAngle[${MAX_DEBUG_SOURCES}];
+  uniform float gain[${MAX_DEBUG_SOURCES}];
+  uniform bool clipped[${MAX_DEBUG_SOURCES}];
+
+  const float kPi = 3.141592;
+  const float kDegToRad = kPi / 180.0;
+  const float kInvPi = 1.0 / 3.141592;
+  const float kRefDistWidth = 0.05;
+
+  float att_linear(float x, float rolloff, float dref, float dmax) {
+    return 1.0-(rolloff*((x-dref)/(dmax-dref)));
+  }
+
+  float att_inverse(float x, float rolloff, float dref) {
+    return dref/(dref+(rolloff*(max(x, dref)-dref)));
+  }
+
+  float att_exponential(float x, float rolloff, float dref) {
+    return pow((max(x, dref)/dref),-rolloff);
+  }
+
+  vec4 circle(vec2 center, float d, float len, float radius, float holeRadius, vec3 color, float offset) {  
+    // Define how blurry the circle should be. 
+    // A value of 1.0 means 'sharp', larger values
+    // will increase the bluriness.
+    float bluriness = 1.0;
+    
+    // Calculate angle, so we can draw segments, too.
+    float angle = atan( center.x, center.y ) * kInvPi * 0.5;
+    angle = fract( angle + offset);
+    
+    // Create an anti-aliased circle.
+    float wd = bluriness * fwidth( d );
+    float circle = smoothstep( radius + wd, radius - wd, d );
+    
+    // Optionally, you could create a hole in it:
+    float inner = holeRadius;
+    circle -= smoothstep( inner + wd, inner - wd, d );
+    
+    // Or only draw a portion (segment) of the circle.
+    float wa = bluriness * fwidth( angle );
+    float segment = smoothstep( len + wa, len - wa, angle );
+	  segment *= smoothstep( 0.0, 2.0 * wa, angle );
+    circle *= mix( segment, 1.0, step( 1.0, len ) );
+        
+    // Let's define the circle's color now.
+    vec3 rgb = color * circle;
+    
+    // Output final color.
+    return vec4( rgb, circle);
+  }
+
+  vec4 att(float d, vec4 circle, float maxDistance, float refDistance, float rolloffFactor, int distanceModel) {
+    // Calculate attenuation
+    float attenuation = 1.0;
+    if (distanceModel == LINEAR) {
+      attenuation = att_linear(d, rolloffFactor, refDistance, maxDistance);
+    } else if (distanceModel == INVERSE) {
+      attenuation = att_inverse(d, rolloffFactor, refDistance);
+    } else if (distanceModel == EXPONENTIAL) {
+      attenuation = att_exponential(d, rolloffFactor, refDistance);
+    }
+    attenuation = clamp(attenuation, 0.0, 1.0);
+
+    // Waves
+    float v = sin((d * 2.0 * kPi) - (time * 0.005)) + 1.0;
+    float waves = circle.a * attenuation * v * vNormal.y;
+    
+    // Output final color.
+    return vec4( circle.rgb, waves );
+  }
+
+  void main() {
+    // Draw background
+    vec4 background = vec4(1.0, 1.0, 1.0, 0.0);
+
+    for (int i=0; i<positionsNum; i++) {
+      vec2 center = positions[i].xz - vUv;
+
+      // Calculate distance to (0,0).
+      float d = length( center );
+
+      // Optional start Offset.
+      vec2 orientation = normalize(orientations[i].xz);
+      float ang = atan(-orientation.x, orientation.y) * kInvPi * 0.5;
+      // Rotate to sart drawing facing front
+      ang -= 0.5;
+      float startOffset = mod(ang, 1.0);
+
+      // Draw inner circle
+      float innerAngle = coneInnerAngle[i] * kDegToRad * kInvPi * 0.5;
+      float innerStartAngle = startOffset + innerAngle * 0.5;
+      vec4 innerLayer = circle(center, d, innerAngle, 10000.0, 1.0, colorInner, innerStartAngle);
+      innerLayer = att(d, innerLayer, maxDistance[i], refDistance[i], rolloffFactor[i], distanceModel[i]);
+      background = mix(background, innerLayer, innerLayer.a);
+
+      // Draw outer circle
+      float outerAngle = coneOuterAngle[i] * kDegToRad * kInvPi * 0.5;
+      float outerAngleDiffHalf = (outerAngle - innerAngle) * 0.5;
+      vec4 outerLayer1 = circle(center, d, outerAngleDiffHalf, 10000.0, 1.0, colorOuter, innerStartAngle + outerAngleDiffHalf);
+      outerLayer1 = att(d, outerLayer1, maxDistance[i], refDistance[i], rolloffFactor[i], distanceModel[i]);
+      background = mix(background, outerLayer1, outerLayer1.a);
+      vec4 outerLayer2 = circle(center, d, outerAngleDiffHalf, 10000.0, 1.0, colorOuter, innerStartAngle - innerAngle);
+      outerLayer2 = att(d, outerLayer2, maxDistance[i], refDistance[i], rolloffFactor[i], distanceModel[i]);
+      background = mix(background, outerLayer2, outerLayer2.a);
+
+      // Draw base
+      vec4 baseLayer = circle(center, d, 1.0, refDistance[i], 0.1, vec3(0.5, 0.5, 0.5), 0.0);
+      background = mix(background, baseLayer, baseLayer.a);
+
+      // Draw gain
+      float g = clamp(gain[i], 0.0, 1.0);
+      vec4 gainLayer = circle(center, d, g, refDistance[i], 0.5, colorGain, startOffset);
+      background = mix(background, gainLayer, gainLayer.a);
+      if (gain[i] > 1.0) {
+        vec4 overGainLayer = circle(center, d, gain[i] - g, refDistance[i], 0.5, vec3(1.0, 0.0, 0.0), startOffset);
+        background = mix(background, overGainLayer, overGainLayer.a);
+      }
+    }
+    
+    // Blend
+    gl_FragColor = vec4(background.rgb, background.a * vNormal.y);
+  }
+`;
+
+AFRAME.registerSystem("audio-debug", {
+  schema: {
+    enabled: { default: false }
+  },
+
+  init() {
+    window.APP.store.addEventListener("statechanged", this.updateState.bind(this));
+
+    this.sources = [];
+
+    this.material = new THREE.ShaderMaterial({
+      uniforms: {
+        time: { value: 0.0 },
+        colorInner: { value: new THREE.Color("#7AFF59") },
+        colorOuter: { value: new THREE.Color("#FF6340") },
+        colorGain: { value: new THREE.Color("#70DBFF") },
+        positionsNum: { value: 0 },
+        maxDistance: { value: [] },
+        refDistance: { value: [] },
+        rolloffFactor: { value: [] },
+        distanceModel: { value: [] },
+        positions: { value: [] },
+        orientations: { value: [] },
+        coneInnerAngle: { value: [] },
+        coneOuterAngle: { value: [] },
+        gain: { value: [] },
+        clipped: { value: [] }
+      },
+      vertexShader: CONE_VERTEX,
+      fragmentShader: CONE_FRAG
+    });
+    this.material.side = THREE.FrontSide;
+    this.material.transparent = true;
+    this.material.uniforms.positionsNum.value = 0;
+
+    this.sourcesPos = new Array(MAX_DEBUG_SOURCES);
+    this.orientations = new Array(MAX_DEBUG_SOURCES);
+    this.distanceModels = new Array(MAX_DEBUG_SOURCES);
+    this.maxDistances = new Array(MAX_DEBUG_SOURCES);
+    this.refDistances = new Array(MAX_DEBUG_SOURCES);
+    this.rolloffFactors = new Array(MAX_DEBUG_SOURCES);
+    this.coneInnerAngles = new Array(MAX_DEBUG_SOURCES);
+    this.coneOuterAngles = new Array(MAX_DEBUG_SOURCES);
+    this.gains = new Array(MAX_DEBUG_SOURCES);
+    this.clipped = new Array(MAX_DEBUG_SOURCES);
+  },
+
+  remove() {
+    window.APP.store.removeEventListener("statechanged", this.updateState);
+  },
+
+  registerSource(source) {
+    this.sources.push(source);
+  },
+
+  unregisterSource(source) {
+    const index = this.sources.indexOf(source);
+
+    if (index !== -1) {
+      this.sources.splice(index, 1);
+    }
+  },
+
+  tick(time) {
+    if (!this.data.enabled) {
+      return;
+    }
+
+    this.sourcesPos.fill(new THREE.Vector3());
+    this.orientations.fill(new THREE.Vector3());
+    this.distanceModels.fill(0);
+    this.maxDistances.fill(0.0);
+    this.refDistances.fill(0.0);
+    this.rolloffFactors.fill(0.0);
+    this.coneInnerAngles.fill(0.0);
+    this.coneOuterAngles.fill(0.0);
+    this.gains.fill(0.0);
+    this.clipped.fill(0.0);
+
+    let sourceNum = 0;
+    this.sources.forEach(source => {
+      if (source.data.enabled) {
+        if (sourceNum < MAX_DEBUG_SOURCES) {
+          this.sourcesPos[sourceNum] = source.data.position;
+          this.orientations[sourceNum] = source.data.orientation;
+          this.distanceModels[sourceNum] = 0;
+          if (source.data.distanceModel === "linear") {
+            this.distanceModels[sourceNum] = 0;
+          } else if (source.data.distanceModel === "inverse") {
+            this.distanceModels[sourceNum] = 1;
+          } else if (source.data.distanceModel === "exponential") {
+            this.distanceModels[sourceNum] = 2;
+          }
+          this.maxDistances[sourceNum] = source.data.maxDistance;
+          this.refDistances[sourceNum] = source.data.refDistance;
+          this.rolloffFactors[sourceNum] = source.data.rolloffFactor;
+          this.coneInnerAngles[sourceNum] = source.data.coneInnerAngle;
+          this.coneOuterAngles[sourceNum] = source.data.coneOuterAngle;
+          this.gains[sourceNum] = source.data.gain;
+          this.clipped[sourceNum] = source.data.isClipped;
+          sourceNum++;
+        }
+      }
+    });
+
+    // Update material uniforms
+    this.material.uniforms.time.value = time;
+    this.material.uniforms.distanceModel.value = this.distanceModels;
+    this.material.uniforms.maxDistance.value = this.maxDistances;
+    this.material.uniforms.refDistance.value = this.refDistances;
+    this.material.uniforms.rolloffFactor.value = this.rolloffFactors;
+    this.material.uniforms.positions.value = this.sourcesPos;
+    this.material.uniforms.orientations.value = this.orientations;
+    this.material.uniforms.positionsNum.value = sourceNum;
+    this.material.uniforms.coneInnerAngle.value = this.coneInnerAngles;
+    this.material.uniforms.coneOuterAngle.value = this.coneOuterAngles;
+    this.material.uniforms.gain.value = this.gains;
+    this.material.uniforms.clipped.value = this.clipped;
+  },
+
+  enableDebugMode(enabled) {
+    if (enabled === undefined || enabled === this.data.enabled) return;
+    const envRoot = document.getElementById("environment-root");
+    const meshEl = envRoot.querySelector(".trimesh") || envRoot.querySelector(".navMesh");
+    if (meshEl) {
+      this.data.enabled = enabled;
+      const navMesh = meshEl.object3D;
+      navMesh.visible = enabled;
+      navMesh.traverse(obj => {
+        if (obj.material && obj instanceof THREE.Mesh) {
+          obj.visible = enabled;
+          if (obj.material) {
+            if (enabled) {
+              obj._hubs_audio_debug_material = obj.material;
+              obj.material = this.material;
+            } else {
+              obj.material = obj._hubs_audio_debug_material;
+              obj._hubs_audio_debug_material = null;
+            }
+            obj.material.needsUpdate = true;
+            obj.geometry.computeFaceNormals();
+            obj.geometry.computeVertexNormals();
+          }
+        }
+      });
+    } else {
+      this.data.enabled = false;
+    }
+  },
+
+  updateState() {
+    const isEnabled = window.APP.store.state.preferences.showAudioDebugView;
+    if (isEnabled !== undefined && isEnabled !== this.data.enabled) {
+      this.enableDebugMode(isEnabled);
+    }
+  }
+});
diff --git a/src/systems/audio-gain-system.js b/src/systems/audio-gain-system.js
new file mode 100644
index 0000000000..0b160cf5b3
--- /dev/null
+++ b/src/systems/audio-gain-system.js
@@ -0,0 +1,79 @@
+import { SourceType } from "../components/audio-params";
+
+const CLIPPING_GAIN = 0.0001;
+
+AFRAME.registerSystem("audio-gain", {
+  schema: {
+    enabled: { default: true }
+  },
+
+  init() {
+    this.sources = [];
+    this.avatarRig = document.getElementById("avatar-rig");
+    window.APP.store.addEventListener("statechanged", this.updatePrefs.bind(this));
+  },
+
+  remove() {
+    this.sources = [];
+    this.avatarRig = null;
+    window.APP.store.removeEventListener("statechanged", this.updatePrefs);
+  },
+
+  registerSource(source) {
+    this.sources.push(source);
+  },
+
+  unregisterSource(source) {
+    const index = this.sources.indexOf(source);
+
+    if (index !== -1) {
+      this.sources.splice(index, 1);
+    }
+  },
+
+  tick() {
+    if (!this.data.enabled) {
+      return;
+    }
+
+    this.sources.forEach(source => {
+      const audio = source.audio();
+      if (source.data.attenuation < source.data.clippingThreshold) {
+        if (audio.gain.gain.value > 0 && !source.data.isClipped) {
+          source.clipGain(CLIPPING_GAIN);
+          console.log(
+            `[audio-gain-system] Updating audio gain for ${source.el.id}. gain [${source.data.gain}]
+            }]`
+          );
+        }
+      } else if (source.data.isClipped) {
+        source.unclipGain();
+        console.log(`[audio-gain-system] Restoring audio gain for ${source.el.id}. gain [${source.data.gain}]
+          }]`);
+      } else {
+        // Update the non positional audio attenuation
+        if (this.audioOutputMode === "audio") {
+          this.updateSourceGain(source);
+        }
+      }
+    });
+  },
+
+  updatePrefs() {
+    this.sources.forEach(source => {
+      this.updateSourceGain(source);
+    });
+  },
+
+  updateSourceGain(source) {
+    let volume = 1.0;
+    if (source.data.sourceType === SourceType.MEDIA_VIDEO) {
+      volume = source.el.components["media-video"]?.data.volume;
+    } else if (source.data.sourceType === SourceType.AVATAR_AUDIO_SOURCE) {
+      volume = source.el.parentEl.parentEl.querySelector("[avatar-volume-controls]").components[
+        "avatar-volume-controls"
+      ]?.data.volume;
+    }
+    source.sourceVolumeChanged({ detail: volume });
+  }
+});
diff --git a/src/systems/audio-settings-system.js b/src/systems/audio-settings-system.js
index d6597dcc0c..dc5fe6129f 100644
--- a/src/systems/audio-settings-system.js
+++ b/src/systems/audio-settings-system.js
@@ -16,7 +16,10 @@ function updateAvatarAudioSettings(avatarAudioSource, settings, positional) {
     distanceModel: settings.avatarDistanceModel,
     maxDistance: settings.avatarMaxDistance,
     refDistance: settings.avatarRefDistance,
-    rolloffFactor: settings.avatarRolloffFactor
+    rolloffFactor: settings.avatarRolloffFactor,
+    coneInnerAngle: settings.avatarConeInnerAngle,
+    coneOuterAngle: settings.avatarConeOuterAngle,
+    coneOuterGain: settings.avatarConeOuterGain
   });
 }
 
@@ -28,6 +31,9 @@ export class AudioSettingsSystem {
       avatarRolloffFactor: 2,
       avatarRefDistance: 1,
       avatarMaxDistance: 10000,
+      avatarConeInnerAngle: 180,
+      avatarConeOuterAngle: 360,
+      avatarConeOuterGain: 0,
       mediaVolume: 0.5,
       mediaDistanceModel: "inverse",
       mediaRolloffFactor: 1,
@@ -43,7 +49,10 @@ export class AudioSettingsSystem {
 
     this.sceneEl.addEventListener("reset_scene", this.onSceneReset);
 
-    if (window.APP.store.state.preferences.audioOutputMode === "audio") {
+    if (
+      !window.APP.store.state.preferences.audioOutputMode ||
+      window.APP.store.state.preferences.audioOutputMode === "audio"
+    ) {
       //hack to always reset to "panner"
       window.APP.store.update({
         preferences: { audioOutputMode: "panner" }
diff --git a/src/utils/audio-normalizer.js b/src/utils/audio-normalizer.js
new file mode 100644
index 0000000000..73497938fe
--- /dev/null
+++ b/src/utils/audio-normalizer.js
@@ -0,0 +1,89 @@
+// Inserts analyser and gain nodes after audio source.
+// Analyses audio source volume and adjusts gain value
+// to make it in a certain range.
+export class AudioNormalizer {
+  constructor(audio) {
+    this.audio = audio;
+    this.analyser = audio.context.createAnalyser();
+    this.connected = false;
+
+    // To analyse volume, 32 fftsize may be good enough
+    this.analyser.fftSize = 32;
+    this.gain = audio.context.createGain();
+    this.timeData = new Uint8Array(this.analyser.frequencyBinCount);
+    this.volumes = [];
+    this.volumeSum = 0;
+  }
+
+  apply() {
+    if (window.APP.store.state.preferences.audioNormalization) {
+      if (!this.connected) {
+        this.connect();
+      }
+    } else {
+      if (this.connected) {
+        this.disconnect();
+      }
+      return;
+    }
+
+    // Adjusts volume in "a rule of the thumb" way
+    // Any better algorithm?
+
+    // Regards the RMS of time-domain data as volume.
+    // Is this a right approach?
+    // Using the RMS of frequency-domain data would be another option.
+    this.analyser.getByteTimeDomainData(this.timeData);
+    const squareSum = this.timeData.reduce((sum, num) => sum + Math.pow(num - 128, 2), 0);
+    const volume = Math.sqrt(squareSum / this.analyser.frequencyBinCount);
+    const baseVolume = window.APP.store.state.preferences.audioNormalization;
+
+    // Regards volume under certain threshold as "not speaking" and skips.
+    // I'm not sure if 0.4 is an appropriate threshold.
+    if (volume >= Math.min(0.4, baseVolume)) {
+      this.volumeSum += volume;
+      this.volumes.push(volume);
+      // Sees only recent volume history because there is a chance
+      // that a speaker changes their master input volume.
+      // I'm not sure if 600 is an appropriate number.
+      while (this.volumes.length > 600) {
+        this.volumeSum -= this.volumes.shift();
+      }
+      // Adjusts volume after getting many enough volume history.
+      // I'm not sure if 60 is an appropriate number.
+      if (this.volumes.length >= 60) {
+        const averageVolume = this.volumeSum / this.volumes.length;
+        this.gain.gain.setTargetAtTime(baseVolume / averageVolume, this.audio.context.currentTime, 0.01);
+      }
+    }
+  }
+
+  connect() {
+    // Hacks. THREE.Audio connects audio nodes when source is set.
+    // If audio is not played yet, THREE.Audio.setFilters() doesn't
+    // reset connections. Then manually caling .connect()/disconnect() here.
+    // This might be a bug of Three.js and should be fixed in Three.js side?
+    if (this.audio.source && !this.audio.isPlaying) {
+      this.audio.disconnect();
+    }
+    const filters = this.audio.getFilters();
+    filters.unshift(this.analyser, this.gain);
+    this.audio.setFilters(filters);
+    if (this.audio.source && !this.audio.isPlaying) {
+      this.audio.connect();
+    }
+    this.connected = true;
+  }
+
+  disconnect() {
+    if (this.audio.source && !this.audio.isPlaying) {
+      this.audio.disconnect();
+    }
+    const filters = [this.analyser, this.gain];
+    this.audio.setFilters(this.audio.getFilters().filter(filter => !filters.includes(filter)));
+    if (this.audio.source && !this.audio.isPlaying) {
+      this.audio.connect();
+    }
+    this.connected = false;
+  }
+}