simon/japji
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Successfully starting playback, and I think in the right place; not successfully stopping

Browse source
This commit is contained in:
Simon Brooke 2025-08-27 13:16:14 +01:00
parent 5ba165cef1
commit e4ba39345e
1 changed files with 60 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
japji/japji.html
View file

@ -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>