Spaces:

AiDeveloper1
/

linkedinvoice

Running

App Files Files Community

AiDeveloper1 commited on Jun 26

Commit

06a3b3f

verified ·

1 Parent(s): a584900

Update index.html

Browse files

Files changed (1) hide show

index.html +83 -48

index.html CHANGED Viewed

@@ -1,104 +1,139 @@
 <!DOCTYPE html>
-<html lang="ja">
 <head>
   <meta charset="UTF-8">
-  <title>Japanese Voice Agent</title>
   <style>
-    #action, #status {
-      text-align: center;
       font-family: Arial, sans-serif;
       margin: 10px;
     }
-    #speech {
-      display: block;
-      margin: 20px auto;
-      padding: 10px 20px;
-      font-size: 18px;
       font-weight: bold;
-      background: #007bff;
-      color: white;
-      border: none;
-      border-radius: 5px;
-      cursor: pointer;
-    }
-    #speech:hover {
-      background: #0056b3;
     }
   </style>
 </head>
 <body>
-  <p id="action">タップして話す</p>
-  <button id="speech">Tap to Speak</button>
-  <p id="status"></p>
   <script>
-    const action = document.getElementById('action');
-    const status = document.getElementById('status');
-    const speechButton = document.getElementById('speech');
-    // Load Japanese voice
-    let voices = [];
     const synth = window.speechSynthesis;
     function loadVoices() {
-      return new Promise(resolve => {
         voices = synth.getVoices();
-        if (voices.length > 0) resolve();
-        else synth.addEventListener('voiceschanged', () => {
           voices = synth.getVoices();
-          resolve();
-        });
       });
     }
-    async function speakText(text) {
       await loadVoices();
       const utter = new SpeechSynthesisUtterance(text);
-      const japaneseVoice = voices.find(v => v.lang === 'ja-JP');
-      if (japaneseVoice) {
-        utter.voice = japaneseVoice;
-        utter.lang = 'ja-JP';
       }
-      synth.cancel(); // Cancel any ongoing speech
       synth.speak(utter);
     }
-    function runSpeechRecognition() {
       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
       if (!SpeechRecognition) {
-        status.textContent = 'このブラウザは音声認識をサポートしていません。';
         return;
       }
       const recognition = new SpeechRecognition();
-      recognition.lang = 'ja-JP';
       recognition.interimResults = false;
       recognition.onstart = () => {
-        action.textContent = '聞いています...';
-        status.textContent = '';
       };
       recognition.onresult = (event) => {
         const transcript = event.results[0][0].transcript;
-        action.textContent = '認識完了';
-        status.textContent = `聞き取った内容: ${transcript}`;
-        speakText(transcript); // Speak back the text
       };
       recognition.onerror = (event) => {
-        action.textContent = 'エラー';
-        status.textContent = `認識エラー: ${event.error}`;
       };
       recognition.onend = () => {
-        action.textContent = 'タップして話す';
       };
       recognition.start();
     }
-    speechButton.addEventListener('click', runSpeechRecognition);
   </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
   <meta charset="UTF-8">
+  <title>Multi-language Voice Agent</title>
   <style>
+    body {
       font-family: Arial, sans-serif;
+      text-align: center;
+      margin: 30px;
+    }
+    select, button {
       margin: 10px;
+      padding: 10px;
+      font-size: 16px;
     }
+    #status {
+      margin-top: 20px;
       font-weight: bold;
+      color: #444;
     }
   </style>
 </head>
 <body>
+  <h2>Voice Agent</h2>
+  <p>Select Language:</p>
+  <select id="languageSelector">
+    <option value="ja-JP">Japanese</option>
+    <option value="en-US" selected>English (US)</option>
+    <option value="hi-IN">Hindi</option>
+    <option value="es-ES">Spanish</option>
+    <option value="fr-FR">French</option>
+  </select>
+  <br>
+  <button id="speakButton">Tap to Speak</button>
+  <div id="status">Initializing...</div>
   <script>
+    const speakButton = document.getElementById("speakButton");
+    const languageSelector = document.getElementById("languageSelector");
+    const statusDiv = document.getElementById("status");
     const synth = window.speechSynthesis;
+    let voices = [];
+    // Load voices (Safari requires special handling)
     function loadVoices() {
+      return new Promise((resolve) => {
         voices = synth.getVoices();
+        if (voices.length) return resolve(voices);
+        synth.onvoiceschanged = () => {
           voices = synth.getVoices();
+          resolve(voices);
+        };
       });
     }
+    // Unlock TTS for Safari by speaking an empty utterance
+    function unlockSafariAudio() {
+      const utterance = new SpeechSynthesisUtterance("");
+      utterance.volume = 0;
+      synth.speak(utterance);
+    }
+    async function askPermissions() {
+      try {
+        // Request microphone access
+        await navigator.mediaDevices.getUserMedia({ audio: true });
+        // Safari requires audio to be unlocked with user gesture
+        if (navigator.userAgent.includes("Safari") && !navigator.userAgent.includes("Chrome")) {
+          unlockSafariAudio();
+        }
+        statusDiv.textContent = "Ready. Tap the button and speak.";
+      } catch (error) {
+        statusDiv.textContent = "Microphone permission denied.";
+      }
+    }
+    async function speakText(text, langCode) {
       await loadVoices();
       const utter = new SpeechSynthesisUtterance(text);
+      const matchingVoice = voices.find(v => v.lang === langCode);
+      if (matchingVoice) {
+        utter.voice = matchingVoice;
+        utter.lang = matchingVoice.lang;
+      } else {
+        utter.lang = langCode;
       }
       synth.speak(utter);
     }
+    function startRecognition() {
       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
       if (!SpeechRecognition) {
+        statusDiv.textContent = "Speech recognition not supported in this browser.";
         return;
       }
       const recognition = new SpeechRecognition();
+      const lang = languageSelector.value;
+      recognition.lang = lang;
       recognition.interimResults = false;
       recognition.onstart = () => {
+        statusDiv.textContent = "Listening...";
       };
       recognition.onresult = (event) => {
         const transcript = event.results[0][0].transcript;
+        statusDiv.textContent = `You said: "${transcript}"`;
+        speakText(transcript, lang);
       };
       recognition.onerror = (event) => {
+        statusDiv.textContent = `Error: ${event.error}`;
       };
       recognition.onend = () => {
+        if (!synth.speaking) {
+          statusDiv.textContent += " | Tap to speak again.";
+        }
       };
       recognition.start();
     }
+    // On page load
+    window.onload = async () => {
+      await loadVoices();
+      await askPermissions();
+    };
+    speakButton.addEventListener("click", startRecognition);
   </script>
 </body>
 </html>