From e4ba39345e69829df333a65385c6174be1d635ee Mon Sep 17 00:00:00 2001
From: Simon Brooke <simon@journeyman.cc>
Date: Wed, 27 Aug 2025 13:16:14 +0100
Subject: [PATCH] Successfully starting playback, and I think in the right
 place; not successfully stopping

---
 japji/japji.html | 79 ++++++++++++++++++++++++++++++++++++------------
 1 file changed, 60 insertions(+), 19 deletions(-)
diff --git a/japji/japji.html b/japji/japji.html
index b278f9b..f92d87f 100644
--- a/japji/japji.html
+++ b/japji/japji.html
@@ -2,24 +2,53 @@
 <html>
 
 <head>
+  <title>Japji Sahib</title>
   <!-- link href="style.css" rel="stylesheet" type="text/css" / -->
   <style>
     @font-face {
-    font-family: Bulara;
-    src: url(resources/fonts/bulara_5.ttf);
+      font-family: Bulara;
+      src: url(resources/fonts/bulara_5.ttf);
+    }
+
+    body {
+      /* colours taken from 
+       * https://www.sikhiwiki.org/index.php/File:Guru_Granth_Sahib_By_Bhai_Pratap_Singh_Giani.jpg */
+      background-color: #f8e1cf;
+      color: #331f16;
+      padding: 5% 20%;
+      font-size: large;
     }
 
     #content {
-        font-family: Bulara;
+      font-family: Bulara;
     }
   </style>
-  <meta charset="UTF-8"> 
+  <meta charset="UTF-8">
   <meta Content-Language="pa, en-GB">
-  <script src="resources/scripts/scittle.js" type="application/javascript"></script>
+  <script src="resources/scripts/scittle.js" type="text/javascript"></script>
   <script crossorigin src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
   <script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/scittle.reagent.js"
-    type="application/javascript"></script>
+    type="text/javascript"></script>
+
+  <script type="text/javascript">
+    /** copied from 
+     * https://stackoverflow.com/questions/5932412/html5-audio-how-to-play-only-a-selected-portion-of-an-audio-file-audio-sprite */
+
+    function playSegment(audioObj, start, stop) {
+      console.log("Playing audio from " + start + " to " + stop);
+      let audioObjNew = audioObj.cloneNode(true); //this is to prevent "play() request was interrupted" error. 
+      audioObjNew.currentTime = start;
+      audioObjNew.play();
+      audioObjNew.int = setInterval(function () {
+        if (audioObjNew.currentTime > stop) {
+          audioObjNew.pause();
+          clearInterval(audioObjNew.int);
+        }
+      }, 10);
+    } 
+  </script>
+
 
   <script type="application/x-scittle">
       (require '[reagent.core :as r]
@@ -1642,31 +1671,41 @@
         :lineStart 480.371,
         :lineEnd 483.117}])
 
+      (def recording (js/Audio. "resources/audio/japji_bindranwale.mp3"))
+
+      (defn play-segment [audio start end]
+        (.log js/console (str "Playing recording from " start " to " end))
+        (let [clone (.cloneNode audio true)]
+          (set! (.-currentTime clone) start)
+          (.log js/console (str "current time now set to " (.-currentTime clone)))
+          (.play clone)
+          (set! (.-int clone) 
+                (.-setInterval js/window
+                  (fn []
+                    (.log js/console (str "interval: current time now " 
+                        (.-currentTime clone) "; end " end))
+                    (when (> (-.currentTime clone) end)
+                      (.pause clone)
+                      (.log js/console (str "current time now " 
+                        (.-currentTime clone) "; end " end "; recording paused"))
+                      (.-clearInterval (.-int clone)))) 
+                      10))))
+
       (defn my-alert []
         (js/alert "You clicked!"))
         ;; export function to use from JavaScript:
         (set! (.-my_alert js/window) my-alert)
 
-
-      (defn play-segment [start end]
-        (js/alert (str "Now we should be playing the sefment from "
-                      start
-                      " to "
-                      end
-                      ", but this is not yet implemented.")))
-        ;; export function to use from JavaScript:
-      (set! (.-play_segment js/window) play-segment)
-
       (defn markup-word [record phrase-no word-no]
         [:span {:class "word" 
             :id (str "word-" phrase-no "-" word-no)
-            :on-click #(play-segment (:start record) (:end record))}
+            :on-click #(play-segment recording (:start record) (:end record))}
             (str " " (:text record))])
 
       (defn markup-phrase [record n]
         [:div {:class "phrase" :id (str "phrase-" n)}
           [:button {:class "play-control" 
-            :on-click #(play-segment (:lineStart record) (:lineEnd record))} ">"]
+            :on-click #(play-segment recording (:lineStart record) (:lineEnd record))} ">"]
           (map #(markup-word %1 n %2) (:words record) (range))])
       
       (let [content (map markup-phrase data (range))]
@@ -1676,7 +1715,9 @@
 
 <body>
   <audio controls src="resources/audio/japji_bindranwale.mp3"></audio>
-  <h1><span class="en-GB" lang="en-GB">Japji</span></h1>
+  <h1><span class="en-GB" lang="en-GB">Japji Sahib</span></h1>
+  <p>Select words to hear them. Select the bullet to hear the whole line.</p>
+
   <div id="content" lang="pa">ਕ੍ਰਿਪਾ ਕਰਕੇ ਉਡੀਕ ਕਰੋ...</div>
 </body>
 
