🔊 fix(tts): NotAllowedError (mobile/safari), Unsupported MediaSource type (firefox), Hide Audio Element (#2854)

* fix: hide audio element on mobile

* chore: add tts docs link

* fix: select voice option on first render

* fix: NotAllowedError, prevent async playback for mobile triggers, consolidate MessageAudio code, user user-triggered unmutes

* fix: Firefox/unsupported type for MediaSource hack

* refactor(STT): make icon red when recording. consolidate logic to AudioRecorder component

* fix: revert Redis changes to use separate client for sessions

client/src/hooks/Audio/useAudioRef.ts

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from 'react';
+
+export default function useCustomAudioRef({
+  setIsPlaying,
+}: {
+  setIsPlaying: (isPlaying: boolean) => void;
+}) {
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  useEffect(() => {
+    const handleEnded = () => {
+      setIsPlaying(false);
+      console.log('message audio ended');
+      if (audioRef.current) {
+        URL.revokeObjectURL(audioRef.current.src);
+      }
+    };
+
+    const handleStart = () => {
+      setIsPlaying(true);
+      console.log('message audio started');
+    };
+
+    const handlePause = () => {
+      setIsPlaying(false);
+      console.log('message audio paused');
+    };
+
+    const audioElement = audioRef.current;
+
+    if (audioRef.current) {
+      audioRef.current.muted = true;
+      audioRef.current.addEventListener('ended', handleEnded);
+      audioRef.current.addEventListener('play', handleStart);
+      audioRef.current.addEventListener('pause', handlePause);
+    }
+
+    return () => {
+      if (audioElement) {
+        audioElement.removeEventListener('ended', handleEnded);
+        audioElement.removeEventListener('play', handleStart);
+        audioElement.removeEventListener('pause', handlePause);
+        URL.revokeObjectURL(audioElement.src);
+      }
+    };
+  }, [setIsPlaying]);
+
+  return { audioRef };
+}