Enable WebAudio to play even when the mute toggle switch is ON, closes #201 (#221)

apps/readest-app/src/app/reader/components/tts/TTSControl.tsx

@@ -4,7 +4,7 @@ import { useBookDataStore } from '@/store/bookDataStore';
 import { useReaderStore } from '@/store/readerStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
-import { TTSController } from '@/services/tts/TTSController';
+import { TTSController, SILENCE_DATA } from '@/services/tts';
 import { getPopupPosition, Position } from '@/utils/sel';
 import { eventDispatcher } from '@/utils/event';
 import { parseSSMLLang } from '@/utils/ssml';
@@ -38,6 +38,16 @@ const TTSControl = () => {
   const iconRef = useRef<HTMLDivElement>(null);
   const ttsControllerRef = useRef<TTSController | null>(null);
 
+  // this enables WebAudio to play even when the mute toggle switch is ON
+  const unblockAudio = () => {
+    const audio = document.createElement('audio');
+    audio.setAttribute('x-webkit-airplay', 'deny');
+    audio.preload = 'auto';
+    audio.loop = false;
+    audio.src = SILENCE_DATA;
+    audio.play();
+  };
+
   useEffect(() => {
     return () => {
       if (ttsControllerRef.current) {
@@ -82,6 +92,7 @@ const TTSControl = () => {
     setShowIndicator(true);
 
     try {
+      unblockAudio();
       const ttsController = new TTSController(view);
       await ttsController.init();
       await ttsController.initViewTTS();

apps/readest-app/src/services/tts/TTSData.ts

@@ -0,0 +1,2 @@
+export const SILENCE_DATA =
+  'data:audio/mp3;base64,//MkxAAHiAICWABElBeKPL/RANb2w+yiT1g/gTok//lP/W/l3h8QO/OCdCqCW2Cw//MkxAQHkAIWUAhEmAQXWUOFW2dxPu//9mr60ElY5sseQ+xxesmHKtZr7bsqqX2L//MkxAgFwAYiQAhEAC2hq22d3///9FTV6tA36JdgBJoOGgc+7qvqej5Zu7/7uI9l//MkxBQHAAYi8AhEAO193vt9KGOq+6qcT7hhfN5FTInmwk8RkqKImTM55pRQHQSq//MkxBsGkgoIAABHhTACIJLf99nVI///yuW1uBqWfEu7CgNPWGpUadBmZ////4sL//MkxCMHMAH9iABEmAsKioqKigsLCwtVTEFNRTMuOTkuNVVVVVVVVVVVVVVVVVVV//MkxCkECAUYCAAAAFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV';

apps/readest-app/src/services/tts/index.ts

@@ -2,3 +2,4 @@ export * from './TTSClient';
 export * from './WebSpeechClient';
 export * from './EdgeTTSClient';
 export * from './TTSController';
+export * from './TTSData';