From fb4853a9d41ccfbe79a6854d51bc7d556de52c1d Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Thu, 23 Jan 2025 00:52:44 +0100
Subject: [PATCH] Enable WebAudio to play even when the mute toggle switch is
 ON, closes #201 (#221)

---
 .../src/app/reader/components/tts/TTSControl.tsx    | 13 ++++++++++++-
 apps/readest-app/src/services/tts/TTSData.ts        |  2 ++
 apps/readest-app/src/services/tts/index.ts          |  1 +
 3 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 apps/readest-app/src/services/tts/TTSData.ts

diff --git a/apps/readest-app/src/app/reader/components/tts/TTSControl.tsx b/apps/readest-app/src/app/reader/components/tts/TTSControl.tsx
index 386ffdce..27fe2b56 100644
--- a/apps/readest-app/src/app/reader/components/tts/TTSControl.tsx
+++ b/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();
diff --git a/apps/readest-app/src/services/tts/TTSData.ts b/apps/readest-app/src/services/tts/TTSData.ts
new file mode 100644
index 00000000..ad238ca7
--- /dev/null
+++ b/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';
diff --git a/apps/readest-app/src/services/tts/index.ts b/apps/readest-app/src/services/tts/index.ts
index 33c98d3e..9d270a4d 100644
--- a/apps/readest-app/src/services/tts/index.ts
+++ b/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';