Update index.html

index.html

@@ -7,7 +7,7 @@
     body {
       font-family: Arial, sans-serif;
       text-align: center;
-      margin-top: 50px;
+      margin-top: 60px;
     }
     #speakButton {
       padding: 15px 30px;
@@ -33,7 +33,7 @@
   <h2>Japanese Voice Agent</h2>
   <p>Click the button and speak in Japanese. The system will repeat what you said.</p>
   <button id="speakButton">Tap to Speak</button>
-  <div id="status">Initializing...</div>
+  <div id="status">Loading voice...</div>
 
   <script>
     const speakButton = document.getElementById("speakButton");
@@ -52,12 +52,23 @@
       });
     }
 
-    function unlockSafariAudio() {
-      const silentUtterance = new SpeechSynthesisUtterance("");
-      silentUtterance.volume = 0;
-      synth.speak(silentUtterance);
+    // Unlock Japanese TTS on startup
+    async function unlockJapaneseTTS() {
+      await loadVoices();
+      const testUtter = new SpeechSynthesisUtterance("準備ができました");
+      const jpVoice = voices.find(v => v.lang === "ja-JP");
+      if (jpVoice) {
+        testUtter.voice = jpVoice;
+        testUtter.lang = "ja-JP";
+      } else {
+        testUtter.lang = "ja-JP";
+      }
+      testUtter.volume = 0;
+      synth.speak(testUtter); // Silent utterance to unlock audio in Safari
+      statusDiv.textContent = "Ready. Tap the button and speak in Japanese.";
     }
 
+    // Speak Japanese text
     async function speakJapanese(text) {
       await loadVoices();
       const utterance = new SpeechSynthesisUtterance(text);
@@ -72,19 +83,15 @@
       synth.speak(utterance);
     }
 
-    async function askPermissions() {
+    // When user clicks the button: request mic, then listen
+    async function handleSpeak() {
       try {
         await navigator.mediaDevices.getUserMedia({ audio: true });
-        if (navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("Chrome")) {
-          unlockSafariAudio();
-        }
-        statusDiv.textContent = "Ready. Tap the button and speak in Japanese.";
-      } catch (error) {
+      } catch (err) {
         statusDiv.textContent = "Microphone permission denied.";
+        return;
       }
-    }
 
-    function startRecognition() {
       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
       if (!SpeechRecognition) {
         statusDiv.textContent = "Speech recognition not supported.";
@@ -96,7 +103,7 @@
       recognition.interimResults = false;
 
       recognition.onstart = () => {
-        statusDiv.textContent = "Listening in Japanese...";
+        statusDiv.textContent = "Listening...";
       };
 
       recognition.onresult = (event) => {
@@ -111,19 +118,19 @@
 
       recognition.onend = () => {
         if (!synth.speaking) {
-          statusDiv.textContent += " | Tap to speak again.";
+          statusDiv.textContent += " | Tap again to speak.";
         }
       };
 
       recognition.start();
     }
 
-    window.onload = async () => {
-      await loadVoices();
-      await askPermissions();
+    // On load: unlock Japanese TTS only
+    window.onload = () => {
+      unlockJapaneseTTS();
     };
 
-    speakButton.addEventListener("click", startRecognition);
+    speakButton.addEventListener("click", handleSpeak);
   </script>
 </body>
 </html>