adding EdgeTTS; removing hit counter

Author: hellpanderrr

wiktionary_pron/css/style.css

@@ -176,6 +176,16 @@ body.dark_mode button.audio-popup-line:hover {
     background-color: #CE93D8;
 }
 
+body.dark_mode .audio-popup-selection {
+    background-color: #CE93D8;
+    color: white;
+    border-color: #9C27B0;
+}
+
+body.dark_mode .audio-popup-selection:hover {
+    background-color: #BA68C8;
+}
+
 
 body.dark_mode button {
     background-color: #CE93D8;
@@ -326,6 +336,30 @@ body i.icon-moon {
     height: 100%;
 }
 
+.audio-popup-selection {
+    position: absolute;
+    z-index: 1000;
+    padding: 6px 8px;
+    background-color: #f0f8ff;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    transition: opacity 0.3s ease, background-color 0.2s ease;
+    opacity: 0;
+    pointer-events: auto;
+}
+
+.audio-popup-selection:hover {
+    background-color: #e6f3ff;
+}
+
+.audio-popup-selection .icon-volume {
+    margin: 0;
+    vertical-align: middle;
+}
+
 .cell {
     position: relative;
     display: inline-block;
@@ -354,6 +388,12 @@ body i.icon-moon {
 
 #tts {
     max-width: 350px;
+    min-width: 200px;
+}
+
+#tts_switch {
+
+    width: 235px;
 }
 
 #loading_text:after {

wiktionary_pron/index.html

@@ -60,6 +60,7 @@ <h1 style="flex: 1;">Online IPA Converter</h1>
 
 
             </select>
+            <!--            <button id="help_button" type="button" title="Help for selected language" style="margin-left: 10px; display: none;">?</button>-->
             <p id="loading_text"></p>
         </div>
         <div>
@@ -79,11 +80,20 @@ <h1 style="flex: 1;">Online IPA Converter</h1>
 
         </select>
         <div>
+            <div>
+                <span>Voice Engine:</span>
+                <select autocomplete="off" class="dropdown" disabled="true" id="tts_switch">
+                    <option value="browser" selected>Browser built-in</option>
+                    <option value="edge">Expanded (ms-edge-tts)</option>
+                </select>
+            </div>
             TTS: <select autocomplete="off" class="dropdown" disabled="true" id="tts">
-            <option disabled selected value> --</option>
+            <option disabled selected value> -- select an option --</option>
 
 
         </select>
+
+
             <div>
                 Speed: <input class="custom-input" type="range" min="0" max="200" step="10" value="100" id="tts_speed">
                 Volume: <input class="custom-input" type="range" min="0" max="100" step="10" value="100"
@@ -203,9 +213,5 @@ <h1 style="flex: 1;">Online IPA Converter</h1>
 
 </div>
 
-<a href="https://hits.seeyoufarm.com" style="display:none;"><img
-        src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fhellpanderrr.github.io%2Fwiktionary_pron%2Findex.html&count_bg=%23414141&title_bg=%236E2424&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false"/></a>
-
-
 </body>
 

wiktionary_pron/scripts/main.js

@@ -14,7 +14,7 @@ import {
   updateLoadingText,
   wait,
 } from "./utils.js";
-import { tts } from "./tts.js";
+import { tts, setLanguageAndFindVoice } from "./tts.js";
 import { toPdf } from "./pdf_export.js";
 import { toCsv } from "./csv_export.js";
 import { loadLexicon } from "./lexicon.js";
@@ -101,7 +101,8 @@ async function transcribe(mode, translate = false, inputText = null) {
           lang === "Ukrainian" ||
           lang === "Czech" ||
           lang === "Russian" ||
-          lang === "Lituanian"
+          lang === "Lituanian" ||
+          lang === "French"
         ) {
           [value, values] = processGermanIpa(value);
         }
@@ -179,7 +180,8 @@ async function transcribe(mode, translate = false, inputText = null) {
           lang === "Czech" ||
           lang === "Lithuanian" ||
           lang === "Russian" ||
-          lang === "Ukrainian"
+          lang === "Ukrainian" ||
+          lang === "French"
         ) {
           [value, values] = processGermanIpa(value);
         } else {
@@ -313,7 +315,8 @@ async function transcribe(mode, translate = false, inputText = null) {
           lang === "Czech" ||
           lang === "Ukrainian" ||
           lang === "Lituanian" ||
-          lang === "Russian"
+          lang === "Russian" ||
+          lang === "French"
         ) {
           [value, values] = processGermanIpa(results[i]?.value || "");
         } else {
@@ -395,7 +398,8 @@ async function transcribe(mode, translate = false, inputText = null) {
       lang === "Czech" ||
       lang === "Lituanian" ||
       lang === "Russian" ||
-      lang === "Ukrainian"
+      lang === "Ukrainian" ||
+      lang === "French"
     ) {
       Array.from(document.querySelectorAll(".ipa")).map((x) => {
         if (
@@ -611,6 +615,23 @@ async function updateOptionsUponLanguageSelection(event) {
     useDictionary = "true";
   }
   console.log("changing language to ", selectedLanguage);
+
+  // Update help button
+  const helpButton = document.getElementById("help_button");
+  if (helpButton) {
+    if (selectedLanguage && selectedLanguage !== "-- select an option --") {
+      helpButton.style.display = "inline-block";
+      helpButton.onclick = () => {
+        const helpUrl = `help/${selectedLanguage
+          .toLowerCase()
+          .replace(/\s+/g, "_")}.html`;
+        window.open(helpUrl, "_blank");
+      };
+    } else {
+      helpButton.style.display = "none";
+    }
+  }
+
   try {
     if (urlParams.get("lang") !== selectedLanguage) {
       window.history.pushState({}, "", `?lang=${selectedLanguage}`);
@@ -652,7 +673,7 @@ async function updateOptionsUponLanguageSelection(event) {
     loadedLanguages[selectedLanguage] = true;
   }
 
-  selectTTS(lang.ttsCode);
+  setLanguageAndFindVoice(lang.ttsCode);
 
   function updateSelectOptions(selectedValue, selectElement, options) {
     selectElement.innerHTML = "";
@@ -676,17 +697,8 @@ async function updateOptionsUponLanguageSelection(event) {
   console.log("Finished changing language to ", selectedLanguage);
   await processTextParam();
   rememberText();
-}
-
-function selectTTS(language) {
-  const voices = Array.from(document.querySelector("#tts").options);
-  const relevantVoices = voices.filter((option) =>
-    (option.getAttribute("data-lang") || "").includes(language),
-  );
-
-  if (relevantVoices.length > 0) {
-    document.querySelector("#tts").value = relevantVoices[0].value;
-  }
+  globalThis.transcriptionLang = selectedLanguage;
+  globalThis.transcriptionLangCode = lang.ttsCode;
 }
 
 const isDarkMode = () => document.body.classList.contains("dark_mode");