correction couleurs panneau alem-br + màj synthesevocale js

public/index.html

@@ -8,7 +8,7 @@
         <!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> -->
         <link rel="stylesheet" href="styles/jquery-ui.min.css">
         
-        <link rel="stylesheet" type="text/css" href="styles/phonochromie_alem_v3.css">
+        <link rel="stylesheet" type="text/css" href="styles/phonochromie_alem_v4.css">
         <link rel="stylesheet" type="text/css" href="styles/styles.css">
         <link rel="stylesheet" type="text/css" href="styles/popup.css">
         <link rel="stylesheet" type="text/css" href="styles/clavier.css">

public/scripts/syntheseVocale.js

-// SYNTHESE VOCALE POUR PHONODROP
-
 var currentIpa = "";
+var currentLang = "";
 var currentDebit = 80;
+var voix = "f"
 
-async function playIpa() {
+async function playIpa(line="") {
     
     var synth = false
-    
-    // Si quelque chose est écrit...
-    if (group.length > 1) {
-        group = sortGroup(group)
-        // on récupère tous les éléments classe "carte-v2" et on récupère leur classe phon_*
-        var ipa = "";
-        for (e=0; e<group.length; e++){
-            // on parse les classe c de l'élement e
-            let newcontent = '';
-            for (c=0; c<group[e].classList.length; c++){
-                // si la classe match "phon_.*"" alors on récupère l'équivalent api
-                if (group[e].classList[c].match(/phon_.*/)){
-                    newcontent += phon2api[group[e].classList[c]];
-                }
-                if (group[e].classList[c].match(/pause/)) {
-                    // si la classe match "pause" on insert une espace (qui sera convertie en <break> dans text2speech.py)
-                    newcontent += ' ';
-                }
-                if (group[e].classList[c].match(/stress1/)) newcontent = 'ˈ' + newcontent
-                if (group[e].classList[c].match(/stress2/)) newcontent = 'ˌ' + newcontent
-            }
-            ipa += newcontent
-        }
-        ipa = ipa.trim(); // suppression des espaces en début ou en fin
-        ipa = ipa.replace(/undefined/g, '')
-
-        if (ipa != currentIpa) { synth = true }
 
-        if (synth) {
-            console.log("lecture de [", ipa,"]");
-            currentIpa = ipa;
-            // ON EMBALLE TOUT ÇA
-            var colis = {
-                ipa,
-                lang,
-                'voix': 'f',
-                'appli': "phonodrop"
-            };
-            
-            // Paramètres d'envoi
-            const options = {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify(colis)
-            };
+    if (thisAppli == "phonographe") {
+        if (thisPageLang == 'fr' || thisPageLang == 'en'){
+            // Si quelque chose est écrit...
+            var phonEllist = document.getElementsByClassName('text')
             
-            // ENVOI
-            const response = await fetch('https://phonographe.alem-app.fr/_playIpa/', options)
-            const data = await response.json();
-            readResponse(data["audio"]);
-        
-        } else if (ipa.length > 0) {
-            var sv_audio = document.getElementsByTagName("audio")[0];
-            sv_audio.playbackRate = document.getElementById('debitParole').value / 100;
-            sv_audio.play();
-        }
-
-    } else if (group.length == 1) {
-        // lire phon kinéphones
-        var thisPhon = ""
-        for (c=0; c<group[0].classList.length; c++){
-            // si la classe match "phon_.*"" alors on récupère l'équivalent api
-            if (group[0].classList[c].match(/phon_.*/)){
-                thisPhon = group[0].classList[c]
+            if (phonEllist.length > 0) {
+                // on récupère tous les élément classe "text" et on récupère leur classe phon_*
+                var ipa = "";
+                for (e=0; e<phonEllist.length; e++){
+                    // on parse les classe c de l'élement e
+                    for (c=0; c<phonEllist[e].classList.length; c++){
+                        if (phonEllist[e].classList[c].match(/stress1/)){
+                            ipa+= 'ˈ'
+                        } else if (phonEllist[e].classList[c].match(/stress2/)){
+                            ipa+= 'ˌ'
+                        }
+                    }
+                    
+                    for (c=0; c<phonEllist[e].classList.length; c++){
+                        // si la classe match "phon_.*"" alors on récupère l'équivalent api
+                        if (phonEllist[e].classList[c].match(/phon_.*/)){
+                            ipa += phon2api[phonEllist[e].classList[c]];
+                        } else if (phonEllist[e].classList[c].match(/pause/)) {
+                            // si la classe match "pause" on insert une espace (qui sera convertie en <break> dans text2speech.py)
+                            ipa += ' ';
+                        }
+                    }
+                }
+                ipa = ipa.trim(); // suppression des espaces en début ou en fin
+                if (ipa != currentIpa || currentLang != thisPageLang) { synth = true }
             }
+        } else window.alert("Cette fonctionnalité n'est pas encore disponible pour cette langue !");
+    
+    } else if (thisAppli == "phonoplayer"){
+        
+        var rep = document.getElementById('rep'+line.toString())
+        ipa = ""
+        for (i=0; i<rep.children.length; i++) {
+            var repphon = rep.children[i].classList[1].replace("rect","phon")
+            if (repphon != "espace" && repphon != "phon_inconnu") { ipa += phon2api[repphon] }
         }
+        if (ipa.length > 0 && ipa != currentIpa) { synth = true }
+    }
 
-        console.log('Lecture Kinephones', thisPhon, phon2api[thisPhon])
-        var audio = new Audio("audio/" + lang+"_" + thisPhon+"-f.mp3")
-        audio.play()
+    if (synth) {
+        currentLang = thisPageLang;
+        console.log(`Lecture de [${ipa}]`);
+        currentIpa = ipa;
+        // ON EMBALLE TOUT ÇA
+        var colis = {
+            ipa,
+            lang: thisPageLang,
+            voix: "f",
+            'appli': thisAppli
+        };
+        
+        // Paramètres d'envoi
+        const options = {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(colis)
+        };
+        
+        // ENVOI
+        const response = await fetch('/_playIpa/', options)
+        const data = await response.json();
+        readResponse(data["audio"], line);
+    } else {
+        var sv_audio = document.getElementsByTagName("audio")[0];
+        sv_audio.playbackRate = document.getElementById('debitParole'+line.toString()).value / 100;
+        sv_audio.play();
     }
-    
+
+    saveTrace(`playIpa [${ipa}] ${colis.voix} ${colis.lang} ${document.getElementById('debitParole'+line.toString()).value} rep${line}`)
 }
 
-function readResponse(response) {
+function readResponse(response, line) {
     var source = '<source src="data:audio/mpeg;base64,' + response + '" type="audio/mpeg"></source>';
     var sv_audio = '<audio autoplay="true" controls>' + source + '</audio>';
-	sv_audio.playbackRate = document.getElementById('debitParole').value / 100;
+	sv_audio.playbackRate = document.getElementById('debitParole'+line.toString()).value / 100;
     document.getElementById('audio').innerHTML = sv_audio;
 }
\ No newline at end of file

public/svg/alem-en.svg

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
-<?xml-stylesheet type="text/css" href="../styles/phonochromie_alem_v3.css"?><svg
+<?xml-stylesheet type="text/css" href="../styles/phonochromie_alem_v4.css"?><svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
@@ -32,35 +32,35 @@
      id="defs6" />
       <linearGradient id="gradient_ei_maj" x1="0" x2="0" y1="0" y2="1">
         <stop offset="55%" class="phon_e"/>
-        <stop offset="80%" class="phon_i_maj"/>
+        <stop offset="80%" class="phon_schwi"/>
     </linearGradient>
     <linearGradient id="gradient_i_majarobase" x1="0" x2="0" y1="0" y2="1">
         <stop offset="55%" class="phon_i_maj"/>
-        <stop offset="80%" class="phon_arobase"/>
+        <stop offset="80%" class="phon_schwa"/>
     </linearGradient>
     <linearGradient id="gradient_earobase" x1="0" x2="0" y1="0" y2="1">
         <stop offset="55%" class="phon_e"/>
-        <stop offset="80%" class="phon_arobase"/>
+        <stop offset="80%" class="phon_schwa"/>
     </linearGradient>
     <linearGradient id="gradient_au_maj" x1="0" x2="0" y1="0" y2="1">
-        <stop offset="55%" class="phon_a"/>
-        <stop offset="80%" class="phon_u_maj"/>
+        <stop offset="55%" class="phon_v_maj"/>
+        <stop offset="80%" class="phon_schwu"/>
     </linearGradient>
     <linearGradient id="gradient_arobaseu_maj" x1="0" x2="0" y1="0" y2="1">
-        <stop offset="55%" class="phon_arobase"/>
-        <stop offset="80%" class="phon_u_maj"/>
+        <stop offset="55%" class="phon_3"/>
+        <stop offset="80%" class="phon_schwu"/>
     </linearGradient>
     <linearGradient id="gradient_u_majarobase" x1="0" x2="0" y1="0" y2="1">
         <stop offset="55%" class="phon_u_maj"/>
-        <stop offset="80%" class="phon_arobase"/>
+        <stop offset="80%" class="phon_schwa"/>
     </linearGradient>
     <linearGradient id="gradient_o_maji_maj" x1="0" x2="0" y1="0" y2="1">
         <stop offset="55%" class="phon_o_maj"/>
-        <stop offset="80%" class="phon_i_maj"/>
+        <stop offset="80%" class="phon_schwi"/>
     </linearGradient>
     <linearGradient id="gradient_ai_maj" x1="0" x2="0" y1="0" y2="1">
-        <stop offset="55%" class="phon_a"/>
-        <stop offset="80%" class="phon_i_maj"/>
+        <stop offset="55%" class="phon_v_maj"/>
+        <stop offset="80%" class="phon_schwi"/>
     </linearGradient>
 
     <linearGradient id="gradient_ts_maj" x1="0" x2="0" y1="0" y2="1">
@@ -193,7 +193,7 @@
   <rect
      style="fill:url(#gradient_arobaseu_maj);fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0"
      id="rect_arobaseu_maj"
-	  class="phon_arobaseu_maj"
+	  class="phon_schwau_maj"
      width="104.02859"
      height="53.203194"
      x="850.508"