try to fix firefox android speech synthesis

oulipoh · Nov 10, 2024 · 63a673d · 63a673d
1 parent 3629e19
commit 63a673d
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 10 deletions.
diff --git a/resen/index.html b/resen/index.html
@@ -19,11 +19,11 @@
         const p = document.createElement('p')
         let span = document.createElement('span')
         //span.appendChild(make_link('https://www.facebook.com/events/1191766252206270', 'אירוע השקה 30/4'))
-        span.appendChild(make_link('https://cda.org.il/events/who-comes-after-us/', 'אירוע השקה 21/11'))
+        span.appendChild(make_link('https://cda.org.il/events/who-comes-after-us/', 'אירוע השקה לגיליון קמעות 21/11'))
         p.appendChild(span)
-        //span = document.createElement('span')
+        span = document.createElement('span')
         //span.appendChild(make_link(page2url('open-call-kmeot'), 'קול קורא - קמעות'))
-        //p.appendChild(span)
+        p.appendChild(span)
         p.classList.add('preface_he', 'banner')
         document.querySelector('.author').before(p)
         make_contents()

diff --git a/resen/kaddish/index.html b/resen/kaddish/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="preload" href="../fonts/MiriamLibre-Regular.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="../fonts/DavidLibre-Medium.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="fonts/FtPilKahol2.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="fonts/OHSagiIdan-Regular.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="stylesheet" href="../style.css">
     <link rel="stylesheet" href="style.css">
     <script src="../pages.js"></script>
@@ -16,7 +16,7 @@
 </head>
 <body onload="document.body.style.visibility = 'visible'">
     <script>make_header()</script>
-       <svg viewBox="-42.56683 -44.513535 295.01041 386.02707">
+       <svg class="mobile_wide" viewBox="-42.56683 -44.513535 295.01041 386.02707">
            <image href="media/kaddish1.jpg" x="-42.56683" y="-44.513535" />
            <g>
                        <text       x="197.49046"
@@ -258,7 +258,7 @@
        y="257.43958" />
 	   </g></svg>
 
-     <svg viewBox="-43.49287 -43.984375 296.86249 384.96875">
+     <svg class="mobile_wide" viewBox="-43.49287 -43.984375 296.86249 384.96875">
          <image href="media/kaddish2.jpg" x="-43.49287" y="-43.984375" />
          <g>
         <text

diff --git a/resen/kaddish/script.js b/resen/kaddish/script.js
@@ -67,11 +67,21 @@ document.addEventListener('keydown', event => {
         event.preventDefault()
 })
 
+let voices = speechSynthesis.getVoices()
+if (!voices.length)
+    speechSynthesis.addEventListener('voiceschanged', () => voices = speechSynthesis.getVoices())
+
 play.addEventListener('click', event => {
     if (play.classList.toggle('on')) {
         const utter = new SpeechSynthesisUtterance([...prefix_chars, ...document.querySelectorAll('svg text:not(:empty):not(.blink)')].map((e, i) => (e.textContent ?? e) + nikud_pisuk[i]).join(''))
         console.log(utter.text)
         utter.lang = 'he'
+        const voice = voices.find(v => v.lang.startsWith('he') || v.lang.startsWith('iw'))
+        if (voice) {
+            console.log(voice)
+            utter.voice = voice
+            utter.lang = voice.lang
+        }
         utter.rate = .6
         utter.onend = e => {if (e.charIndex && e.charIndex % utter.text.length == 0) play.click()}
         speechSynthesis.speak(utter)

diff --git a/resen/kaddish/style.css b/resen/kaddish/style.css
@@ -19,12 +19,14 @@ g {
 }
 
 text {
-    font-family: ktiv;
-    text-anchor: end;
     dominant-baseline: hanging;
-    font-size: .45rem;
     fill: #c13a16;
+    font-family: ktiv;
+    font-size: .45rem;
     scroll-margin-top: min(25rem, 50vh);
+    text-anchor: end;
+    user-select: none;
+    -webkit-user-select: none;
 }
 
 @keyframes blink {

diff --git a/resen/style.css b/resen/style.css
@@ -1128,7 +1128,7 @@ video::-webkit-media-controls-enclosure {  /* Not supported in Firefox */
         margin-inline-start: 0;
     }
 
-    object {
+    object, .mobile_wide {
         margin-inline: var(--anti_margin);
         --media_width: auto;
     }