Disable positional audio for Safari as a temporal workaround for its positional audio bug

src/components/audio-params.js

@@ -210,13 +210,22 @@ AFRAME.registerComponent("audio-params", {
           audio.panner.orientationY.value,
           audio.panner.orientationZ.value
         );
-        this.updateAttenuation();
       } else {
         this.el.object3D.getWorldDirection(this.data.orientation);
         this.el.object3D.getWorldPosition(this.data.position);
         this.data.rolloffFactor = 0;
       }
+
       this.updateDistances();
+
+      if (audio.panner) {
+        this.updateAttenuation();
+      } else {
+        const { audioOutputMode } = window.APP.store.state.preferences;
+        if (audioOutputMode === "audio") {
+          this.updateGain(this.data.gain * Math.min(1, 10 / Math.max(1, this.data.squaredDistance)));
+        }
+      }
     }
 
     if (this.normalizer !== null) {
@@ -360,11 +369,7 @@ AFRAME.registerComponent("audio-params", {
         break;
       }
     }
-    const { audioOutputMode } = window.APP.store.state.preferences;
-    if (audioOutputMode === "audio") {
-      this.data.gain = newGain * Math.min(1, 10 / Math.max(1, this.data.squaredDistance));
-    }
-    gainFilter?.gain.setTargetAtTime(this.data.gain, audio.context.currentTime, GAIN_TIME_CONST);
+    gainFilter?.gain.setTargetAtTime(newGain, audio.context.currentTime, GAIN_TIME_CONST);
   },
 
   updateClipping() {

src/components/avatar-audio-source.js

@@ -50,8 +50,20 @@ AFRAME.registerComponent("avatar-audio-source", {
     const isRemoved = !this.el.parentNode;
     if (!stream || isRemoved) return;
 
+    const ouputMode = window.APP.store.state.preferences.audioOutputMode;
+    if (ouputMode === "audio") {
+      this.el.setAttribute("audio-params", {
+        audioType: AudioType.Stereo
+      });
+    }
+
+    let audio = null;
     const audioListener = this.el.sceneEl.audioListener;
-    const audio = new THREE.PositionalAudio(audioListener);
+    if (this.el.components["audio-params"].data.audioType === AudioType.PannerNode) {
+      audio = new THREE.PositionalAudio(audioListener);
+    } else {
+      audio = new THREE.Audio(audioListener);
+    }
     this.el.components["audio-params"].setAudio(audio);
 
     this.audioSystem.removeAudio(audio);
@@ -271,11 +283,16 @@ AFRAME.registerComponent("audio-target", {
     this.el.removeAttribute("audio-params");
     this.el.removeAttribute("audio-zone-source");
   },
-
   createAudio: function() {
-    const audioListener = this.el.sceneEl.audioListener;
+    const ouputMode = window.APP.store.state.preferences.audioOutputMode;
+    if (ouputMode === "audio") {
+      this.el.setAttribute("audio-params", {
+        audioType: AudioType.Stereo
+      });
+    }
 
     let audio = null;
+    const audioListener = this.el.sceneEl.audioListener;
     if (this.el.components["audio-params"].data.audioType === AudioType.PannerNode) {
       audio = new THREE.PositionalAudio(audioListener);
     } else {

src/components/media-views.js

@@ -547,6 +547,13 @@ AFRAME.registerComponent("media-video", {
       this.el.removeObject3D("sound");
     }
 
+    const ouputMode = window.APP.store.state.preferences.audioOutputMode;
+    if (ouputMode === "audio") {
+      this.el.setAttribute("audio-params", {
+        audioType: AudioType.Stereo
+      });
+    }
+
     const audioListener = this.el.sceneEl.audioListener;
     if (this.el.components["audio-params"].data.audioType === AudioType.PannerNode) {
       this.audio = new THREE.PositionalAudio(audioListener);

src/hub.js

@@ -42,7 +42,7 @@ import "./utils/threejs-positional-audio-updatematrixworld";
 import "./utils/threejs-world-update";
 import "./utils/threejs-raycast-patches";
 import patchThreeAllocations from "./utils/threejs-allocation-patches";
-import { detectOS, detect } from "detect-browser";
+import { isSafari } from "./utils/detect-safari";
 import {
   getReticulumFetchUrl,
   getReticulumMeta,
@@ -670,11 +670,9 @@ document.addEventListener("DOMContentLoaded", async () => {
     return;
   }
 
-  const detectedOS = detectOS(navigator.userAgent);
-  const browser = detect();
   // HACK - it seems if we don't initialize the mic track up-front, voices can drop out on iOS
   // safari when initializing it later.
-  if (["iOS", "Mac OS"].includes(detectedOS) && ["safari", "ios"].includes(browser.name)) {
+  if (isSafari()) {
     try {
       await navigator.mediaDevices.getUserMedia({ audio: true });
     } catch (e) {

src/storage/store.js

@@ -3,6 +3,7 @@ import merge from "deepmerge";
 import Cookies from "js-cookie";
 import jwtDecode from "jwt-decode";
 import { qsGet } from "../utils/qs_truthy.js";
+import { isSafari } from "../utils/detect-safari";
 
 const LOCAL_STORE_KEY = "___hubs_store";
 const STORE_STATE_CACHE_KEY = Symbol();
@@ -243,6 +244,12 @@ export default class Store extends EventTarget {
       preferences: {}
     });
 
+    // Temporary fix for distorted audio in Safari.
+    // See https://github.com/mozilla/hubs/issues/4411
+    if (isSafari()) {
+      this.update({ preferences: { audioOutputMode: "audio" } });
+    }
+
     this._shouldResetAvatarOnInit = false;
 
     const oauthFlowCredentials = Cookies.getJSON(OAUTH_FLOW_CREDENTIALS_KEY);

src/systems/audio-settings-system.js

@@ -1,4 +1,5 @@
 import { AvatarAudioDefaults, MediaAudioDefaults } from "../components/audio-params";
+import { isSafari } from "../utils/detect-safari";
 
 function updateMediaAudioSettings(mediaVideo, settings) {
   mediaVideo.el.setAttribute("audio-params", {
@@ -51,9 +52,12 @@ export class AudioSettingsSystem {
 
     this.sceneEl.addEventListener("reset_scene", this.onSceneReset);
 
+    // Do not force panner audio in Safari as a temporary fix for distorted audio.
+    // See https://github.com/mozilla/hubs/issues/4411
     if (
-      !window.APP.store.state.preferences.audioOutputMode ||
-      window.APP.store.state.preferences.audioOutputMode === "audio"
+      !isSafari() &&
+      (!window.APP.store.state.preferences.audioOutputMode ||
+        window.APP.store.state.preferences.audioOutputMode === "audio")
     ) {
       //hack to always reset to "panner"
       window.APP.store.update({

src/utils/detect-safari.js

@@ -0,0 +1,6 @@
+import { detect } from "detect-browser";
+
+export function isSafari() {
+  const browser = detect();
+  return ["iOS", "Mac OS"].includes(browser.os) && ["safari", "ios"].includes(browser.name);
+}