Adding line TTS, TTS speed and volume control, Parisian French nasal vowels

Author: hellpanderrr

wiktionary_pron/css/style.css

@@ -12,6 +12,10 @@
     src: url("../fonts/EBGaramond-Regular.woff2") format("woff2");
 }
 
+input[type="range"] {
+    padding: revert;
+}
+
 button:enabled:active {
     background: #e5e5e5;
     -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
@@ -22,7 +26,7 @@ button:enabled:active {
 
 .line {
     position: relative;
-
+    padding-left: 10px;
 }
 
 hr {
@@ -145,6 +149,28 @@ body.dark_mode option {
     background-image: linear-gradient(to bottom, #1F1B24, #1F1B24);
 }
 
+body.dark_mode input[type="range"] {
+
+    accent-color: #CE93D8;
+}
+
+body.dark_mode button.audio-popup {
+    color: white;
+    background-color: #CE93D8;
+}
+
+body.dark_mode button.audio-popup-line {
+    color: white;
+    background-color: initial;
+}
+
+body.dark_mode button.audio-popup-line:hover {
+    color: white;
+    background-color: #CE93D8;
+}
+
+
+
 body.dark_mode button {
     background-color: #CE93D8;
     color: black;
@@ -243,16 +269,54 @@ body i.fa-moon-o {
     transition: opacity 0.5s;
 }
 
+.line {
+    transition: background 0.5s;
+    margin-left: 11px;
+
+}
+
+.left-column {
+    flex: 1;
+    position: relative;
+    padding-left: 15px;
+}
+
+.right-column {
+    flex: 1;
+    padding-left: 15px;
+    position: relative;
+}
+
+.line:has(.audio-popup-line:nth-of-type(1):hover) {
+    background: rgba(211, 225, 241, 0.26);
+}
+
+.left-column:has(.audio-popup-line:nth-of-type(1):hover) {
+    background: rgba(211, 225, 241, 0.26);
+}
+
+
+
 .audio-popup-line {
 
     position: absolute;
-    top: 5%;
-    left: -5%;
+
+    left: -3%;
     transition: opacity 0.5s;
-    font-size: 15px;
+    font-size: 25px;
     background-color: #f0f8ff00;
-    opacity: 0;
-    visibility: hidden;
+
+
+    margin-left: 0;
+    padding-left: 0;
+    text-align: center;
+
+    margin: 0;
+    padding-right: 10px;
+    padding-left: 10px;
+
+    height: 100%;
+
 }
 
 .cell {

wiktionary_pron/index.html

@@ -96,7 +96,14 @@ <h1 style="flex: 1;">Online IPA Converter</h1>
             <option disabled selected value> --</option>
 
 
-        </select></div>
+        </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"
+                               id="tts_volume">
+
+            </div>
+        </div>
 
 
     </form>

wiktionary_pron/scripts/main.js

@@ -59,8 +59,14 @@ async function transcribe(mode) {
       const words = line.split(" ").concat(["\n"]);
 
       const container = document.createElement("tr");
+      container.className = "line";
       resultDiv.appendChild(container);
 
+      const ttsButton = document.createElement("button");
+      ttsButton.className = "fa fa-volume-down audio-popup-line";
+
+      container.prepend(ttsButton);
+
       async function processWord(word) {
         console.log("processing", word);
         let { status, value } = await getIpa(word, lang, langStyle, langForm);
@@ -217,10 +223,10 @@ async function transcribe(mode) {
       container.style.marginRight = "auto";
 
       const leftColumn = document.createElement("div");
-      leftColumn.style.flex = "1";
+      leftColumn.classList.add("left-column");
 
       const rightColumn = document.createElement("div");
-      rightColumn.style.flex = "1";
+      rightColumn.classList.add("right-column");
 
       for (let i = 0; i < words.length; i++) {
         const wordDiv = document.createElement("div");
@@ -260,8 +266,18 @@ async function transcribe(mode) {
         resultDiv.appendChild(resultSpan);
 
         leftColumn.appendChild(wordDiv);
+
         rightColumn.appendChild(resultDiv);
       }
+      const leftTTSButton = document.createElement("button");
+      leftTTSButton.className = "fa fa-volume-down audio-popup-line";
+
+      leftColumn.prepend(leftTTSButton);
+
+      const rightTTSButton = document.createElement("button");
+      rightTTSButton.className = "fa fa-volume-down audio-popup-line";
+
+      rightColumn.prepend(rightTTSButton);
 
       container.appendChild(leftColumn);
       container.appendChild(rightColumn);
@@ -397,7 +413,7 @@ const languages = {
     ttsCode: "es-ES",
   },
   French: {
-    styles: ["Default"],
+    styles: ["Default", "Parisian (experimental)"],
     forms: ["Phonemic"],
     langCode: "fr",
     ttsCode: "fr-FR",
@@ -485,6 +501,12 @@ async function updateOptionsUponLanguageSelection(event) {
   if (!(selectedLanguage in loadedLanguages)) {
     disableAll();
     await loadLanguage(lang.langCode);
+    if (selectedLanguage === "Latin") {
+      updateLoadingText("Macrons list", "");
+      await macronize("");
+      updateLoadingText("", "");
+    }
+
     if (selectedLanguage === "German") {
       updateLoadingText("German lexicon", "");
       globalThis.lexicon = await loadLexicon("German");

wiktionary_pron/scripts/tts.js

@@ -21,13 +21,60 @@ function populateVoiceList() {
 }
 
 populateVoiceList();
+
+function getSelectedVoice() {
+  const voices = EasySpeech.voices();
+  const selectedVoice = document
+    .querySelector("#tts")
+    .selectedOptions[0].getAttribute("data-name");
+
+  return voices.find((v) => v.name === selectedVoice);
+}
 function tts(transcriptionMode) {
   console.log("running tts");
   const text_els =
     transcriptionMode === "line"
       ? document.querySelectorAll(".input_text")
       : document.querySelectorAll("#result span");
 
+  const lineButtons = document.querySelectorAll(".audio-popup-line");
+
+  const getVolume = () => {
+    return parseFloat(document.querySelector("#tts_volume").value) / 100;
+  };
+  const getSpeed = () => {
+    return parseFloat(document.querySelector("#tts_speed").value) / 100;
+  };
+
+  lineButtons.forEach((button) => {
+    button.addEventListener("click", (e) => {
+      button = e.currentTarget;
+      let lineText = Array.from(
+        button.parentElement.querySelectorAll(".input_text"),
+      )
+        .map((x) => x.textContent)
+        .join(" ");
+      console.log(5555, lineText);
+      if (!lineText) {
+        lineText = Array.from(button.parentElement.querySelectorAll(".ipa"))
+          .map((x) => x.getAttribute("data-word"))
+          .join(" ");
+        console.log(5555, lineText);
+      }
+
+      console.log("Speaking:", lineText);
+      EasySpeech.speak({
+        text: lineText,
+        voice: getSelectedVoice(),
+        pitch: 1,
+        rate: getSpeed(),
+        volume: getVolume(),
+        // there are more events, see the API for supported events
+        boundary: () => console.debug("boundary reached"),
+      });
+    });
+  });
+
   Array.from(text_els).map(function (el) {
     let timer;
     const popup = el.previousElementSibling;
@@ -48,22 +95,13 @@ function tts(transcriptionMode) {
       return text;
     }
 
-    function getSelectedVoice() {
-      const voices = EasySpeech.voices();
-      const selectedVoice = document
-        .querySelector("#tts")
-        .selectedOptions[0].getAttribute("data-name");
-
-      return voices.find((v) => v.name === selectedVoice);
-    }
-
     popup.addEventListener("click", () =>
       EasySpeech.speak({
         text: getTextContent(el),
         voice: getSelectedVoice(),
         pitch: 1,
-        rate: 1,
-        volume: 1,
+        rate: getSpeed(),
+        volume: getVolume(),
         // there are more events, see the API for supported events
         boundary: () => console.debug("boundary reached"),
       }),

wiktionary_pron/scripts/utils.js

@@ -77,9 +77,11 @@ async function wait(ms = 1) {
 }
 
 function clearStorage() {
-  const cache = JSON.parse(localStorage.getItem("get_ipa_no_cache") || "{}");
-  cache["get_ipa_no_cache"] = "";
-  localStorage.setItem("get_ipa_no_cache", JSON.stringify(cache));
+  // const cache = JSON.parse(localStorage.getItem("get_ipa_no_cache") || "{}");
+  // cache["get_ipa_no_cache"] = "";
+  // localStorage.setItem("get_ipa_no_cache", JSON.stringify(cache));
+  localStorage.clear();
+  localforage.clear();
 }
 
 function get_ipa_no_cache(text, args) {
@@ -150,6 +152,7 @@ function get_ipa_no_cache(text, args) {
       if (langForm === "Phonemic") {
         command = `(window.fr_ipa.show("${cleanText}")[0])`;
       }
+
       break;
     case "Ukrainian":
       if (langForm === "Phonetic") {
@@ -225,6 +228,14 @@ function get_ipa_no_cache(text, args) {
     return { value: text, status: "error" };
   }
 
+  if (langStyle === "Parisian (experimental)") {
+    ipa = ipa
+      .replace("ɔ̃̃̃̃̃", "õ")
+      .replace("ɑ̃", "ɔ̃")
+      .replace("œ̃", "ɑ̃")
+      .replace("ɛ̃", "ɑ̃");
+  }
+
   console.log("final ipa ", ipa);
   return { value: ipa, status: "success" };
 }
@@ -402,10 +413,10 @@ function disableAll(include_elements = []) {
   // Iterate through each form and disable all its elements
   forms.forEach((form) => {
     Array.from(form.elements)
-        .concat(include_elements)
-        .forEach((element) => {
-          element.disabled = true;
-        });
+      .concat(include_elements)
+      .forEach((element) => {
+        element.disabled = true;
+      });
   });
 }