Tidying up CSS, trying to get sound recording to work. Realise this machine has no microphone!
This commit is contained in:
parent
0f06fb501f
commit
5849a8b0f3
|
|
@ -1,8 +1,96 @@
|
|||
@font-face {
|
||||
font-family: Bulara;
|
||||
src: url(../fonts/bulara_5.ttf);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#content {
|
||||
font-family: Bulara;
|
||||
@font-face {
|
||||
font-family: 'Noto Sans Gurmukhi';
|
||||
src: url(../fonts/NotoSansGurmukhi-Medium.ttf);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
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: x-large;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: thin solid #331f16;
|
||||
font-size: medium;
|
||||
padding: 4em 0 0.5em 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.phrase:nth-child(even) {
|
||||
background-color: #ddc9b9;
|
||||
color: #331f16;
|
||||
}
|
||||
|
||||
/* #popup {
|
||||
position: absolute;
|
||||
display: none;
|
||||
background-color: whitesmoke;
|
||||
z-index: 10;
|
||||
} */
|
||||
|
||||
#popup-closebox {
|
||||
float: right;
|
||||
/* text-align: right; */
|
||||
padding: 0.1em 0.5em;
|
||||
}
|
||||
|
||||
#popup-closebox,
|
||||
#popup-record-stop {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#popup-content {
|
||||
border: thin solid #331f16;
|
||||
background-color: whitesmoke;
|
||||
position: absolute;
|
||||
display: block;
|
||||
z-index: 10
|
||||
}
|
||||
|
||||
#popup-controls {
|
||||
border: thin solid #331f16;
|
||||
padding: 0.25em 1em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#popup-phrase {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
#popup-titlebar {
|
||||
background-color: #331f16;
|
||||
color: red;
|
||||
height: 1.2em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gurmukhi {
|
||||
font-family: "Noto Sans Gurmukhi", Bulara;
|
||||
}
|
||||
|
||||
.play-control {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.popup-launcher {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@media all and (max-device-width: 768px) {
|
||||
body {
|
||||
margin: 0 5%;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,77 +4,7 @@
|
|||
<head>
|
||||
<!-- Copyright: Simon Brooke and Lucy Fyfe 2025 -->
|
||||
<title>Japji Sahib</title>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: Bulara;
|
||||
src: url(fonts/bulara_5.ttf);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Noto Sans Gurmukhi';
|
||||
src: url(fonts/NotoSansGurmukhi-Medium.ttf);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
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: x-large;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: thin solid #331f16;
|
||||
font-size: medium;
|
||||
padding: 4em 0 0.5em 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* #popup {
|
||||
position: absolute;
|
||||
display: none;
|
||||
background-color: whitesmoke;
|
||||
z-index: 10;
|
||||
} */
|
||||
|
||||
#popup-phrase {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
#popup-close-box {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#popup-record-stop,
|
||||
#popup-close-box {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.gurmukhi {
|
||||
font-family: "Noto Sans Gurmukhi", Bulara;
|
||||
}
|
||||
|
||||
.play-control {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.popup-launcher {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@media all and (max-device-width: 768px) {
|
||||
body {
|
||||
margin: 0 5%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||
<meta charset="UTF-8">
|
||||
<meta Content-Language="pa, en-GB">
|
||||
<script src="scripts/scittle.js" type="text/javascript"></script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
var shadow$provide = {};
|
||||
var CLOSURE_NO_DEPS = true;
|
||||
var CLOSURE_BASE_PATH = '/js/cljs-runtime/';
|
||||
var CLOSURE_DEFINES = {"shadow.cljs.devtools.client.env.repl_pprint":true,"shadow.cljs.devtools.client.env.reload_strategy":"optimized","shadow.cljs.devtools.client.env.devtools_url":"","shadow.cljs.devtools.client.env.autoload":true,"shadow.cljs.devtools.client.env.proc_id":"e0125c76-3c44-423b-9581-c966fb3a8c47","shadow.cljs.devtools.client.env.use_document_protocol":false,"goog.ENABLE_DEBUG_LOADER":false,"shadow.cljs.devtools.client.env.server_port":9630,"shadow.cljs.devtools.client.env.server_token":"ca420fcb-fc2f-467a-8312-a2f4d2ca0255","shadow.cljs.devtools.client.env.use_document_host":true,"shadow.cljs.devtools.client.env.module_format":"goog","goog.LOCALE":"en","shadow.cljs.devtools.client.env.build_id":"main","shadow.cljs.devtools.client.env.ignore_warnings":false,"goog.DEBUG":true,"shadow.cljs.devtools.client.env.log":true,"shadow.cljs.devtools.client.env.ssl":false,"shadow.cljs.devtools.client.env.enabled":true,"shadow.cljs.devtools.client.env.server_host":"localhost","shadow.cljs.devtools.client.env.worker_client_id":2,"goog.TRANSPILE":"never"};
|
||||
var CLOSURE_DEFINES = {"shadow.cljs.devtools.client.env.repl_pprint":true,"shadow.cljs.devtools.client.env.reload_strategy":"optimized","shadow.cljs.devtools.client.env.devtools_url":"","shadow.cljs.devtools.client.env.autoload":true,"shadow.cljs.devtools.client.env.proc_id":"59431359-a1d8-4982-b8e6-d1a7585a13aa","shadow.cljs.devtools.client.env.use_document_protocol":false,"goog.ENABLE_DEBUG_LOADER":false,"shadow.cljs.devtools.client.env.server_port":9630,"shadow.cljs.devtools.client.env.server_token":"622b7cb6-3708-47c0-bf9e-19cfed50203c","shadow.cljs.devtools.client.env.use_document_host":true,"shadow.cljs.devtools.client.env.module_format":"goog","goog.LOCALE":"en","shadow.cljs.devtools.client.env.build_id":"main","shadow.cljs.devtools.client.env.ignore_warnings":false,"goog.DEBUG":true,"shadow.cljs.devtools.client.env.log":true,"shadow.cljs.devtools.client.env.ssl":false,"shadow.cljs.devtools.client.env.enabled":true,"shadow.cljs.devtools.client.env.server_host":"localhost","shadow.cljs.devtools.client.env.worker_client_id":2,"goog.TRANSPILE":"never"};
|
||||
var COMPILED = false;
|
||||
var goog = goog || {};
|
||||
goog.global = this || self;
|
||||
|
|
|
|||
|
|
@ -1623,8 +1623,7 @@
|
|||
{:text "ਨਿਰੰਕਾਰ", :start 481.579, :end 483.117}
|
||||
{:text "॥੧੯॥"}],
|
||||
:lineStart 480.371,
|
||||
:lineEnd 483.117}]
|
||||
)
|
||||
:lineEnd 483.117}])
|
||||
|
||||
(.log js/console (str "Data has " (count data) " entries"))
|
||||
|
||||
|
|
@ -1633,8 +1632,6 @@
|
|||
|
||||
(def student-recordings (atom (apply vector (repeat (count data) nil))))
|
||||
|
||||
(defn enable-play-button! [phrase-no])
|
||||
|
||||
(defn record-student-sound!
|
||||
[phrase-no]
|
||||
(.info js/console "Recording student sound for phrase " phrase-no)
|
||||
|
|
@ -1644,7 +1641,6 @@
|
|||
(fn [arg]
|
||||
(let [media-recorder (js/MediaRecorder. arg)
|
||||
audio-chunks (atom [])]
|
||||
(.start media-recorder)
|
||||
(set! (.-onerror media-recorder)
|
||||
(fn [s]
|
||||
(.log js/console (str "Error while recording sound: " s))))
|
||||
|
|
@ -1655,12 +1651,10 @@
|
|||
(set! (.-onstop media-recorder)
|
||||
(fn [e]
|
||||
(js/console.log "data available after MediaRecorder.stop() called.")
|
||||
(if (> (count @audio-chunks) 0)
|
||||
(do
|
||||
;; Store the blob in the student-recordings data structure
|
||||
(when (> (count @audio-chunks) 0)
|
||||
(swap! student-recordings assoc phrase-no
|
||||
(js/Blob. (clj->js @audio-chunks)))
|
||||
(enable-play-button! phrase-no))))))))
|
||||
(js/Blob. (clj->js @audio-chunks))))))
|
||||
(.start media-recorder))))
|
||||
(catch js/Error e
|
||||
(.log js/console
|
||||
(str "Error thrown while recording sound: " (.-message e))))
|
||||
|
|
@ -1687,12 +1681,12 @@
|
|||
(.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)))
|
||||
(.log js/console (str "current time now set to " (.-currentTime clone) "; start is " start "; end is " end))
|
||||
(.play clone)
|
||||
(set! (.-int clone)
|
||||
(.setInterval js/window
|
||||
(interval-watcher clone end)
|
||||
10))))
|
||||
(- end start)))))
|
||||
|
||||
(defn markup-word [record phrase-no word-no]
|
||||
[:span {:class "word, gurmukhi"
|
||||
|
|
@ -1706,9 +1700,6 @@
|
|||
(when popup
|
||||
(rdom/render "" popup))))
|
||||
|
||||
(def popup-control-style {:border "thin solid #331f16"
|
||||
:padding "0 0.5em"})
|
||||
|
||||
(defn play-student!
|
||||
[phrase-no]
|
||||
(.play (js/Audio. (.createObjectURL js/URL (@student-recordings phrase-no)))))
|
||||
|
|
@ -1721,8 +1712,7 @@
|
|||
e (.getElementById js/document id)]
|
||||
(when (< i 99)
|
||||
(js/setTimeout
|
||||
#(do (.setAttribute e "value" i)
|
||||
(.info js/console (str "progress-width updated to " i))) (* i progress-step))
|
||||
#(.setAttribute e "value" i) (* i progress-step))
|
||||
(recur (inc i) e)))))
|
||||
|
||||
(defn record-student! [phrase-no]
|
||||
|
|
@ -1738,49 +1728,33 @@
|
|||
;; initially styled; so style needs to be embedded.
|
||||
(let [popup (.getElementById js/document "popup")
|
||||
phrase-data (nth data phrase-no)
|
||||
duration (- (:lineEnd phrase-data) (:lineStart phrase-data))
|
||||
progress-width (atom 0)
|
||||
progress-step (int (* duration 10))
|
||||
content [:div {:id "popup-content"
|
||||
:style {:border "thin solid #331f16"
|
||||
:background-color "whitesmoke"
|
||||
:left (- (.-pageX event) 100)
|
||||
:top (.-pageY event)
|
||||
:position "absolute"
|
||||
:display "block"
|
||||
:z-index 10}}
|
||||
[:div {:style {:background-color "#331f16"
|
||||
:color "red"
|
||||
:height "1.2em"
|
||||
:width "100%"}}
|
||||
:style {:left (- (.-pageX event) 100)
|
||||
:top (.-pageY event)}}
|
||||
[:div {:id "popup-titlebar"}
|
||||
[:span {:id "popup-closebox" :on-click #(close-popup)
|
||||
:title "Close popup"
|
||||
:style {:float "right"}} "x"]]
|
||||
:title "Close popup"} " x "]]
|
||||
(apply vector (concat [:p {:id "popup-phrase" :class "gurmukhi"}]
|
||||
(map #(markup-word %1 phrase-no %2) (:words phrase-data) (range))))
|
||||
[:table {:id "popup-controls"
|
||||
:summary "Controls for audio playback and recording"
|
||||
:style {:border "thin solid #331f16"
|
||||
:padding "0.25em 1em"
|
||||
:width "100%"}}
|
||||
:summary "Controls for audio playback and recording"}
|
||||
[:tr [:td "Tutor"] [:td {:id "popup-play-tutor"
|
||||
:class "popup-control"
|
||||
:on-click #(play-segment recording
|
||||
(:lineStart phrase-data)
|
||||
(:lineEnd phrase-data))
|
||||
:style popup-control-style
|
||||
:title "Play the tutor's recording"}
|
||||
"►"]]
|
||||
[:tr [:td "You"]
|
||||
(when (@student-recordings phrase-no)
|
||||
[:td {:id "popup-play-student"
|
||||
[:td [:button {:id "popup-play-student"
|
||||
:class "popup-control"
|
||||
:on-click #(play-student! phrase-no)
|
||||
:style popup-control-style
|
||||
:title "Play your own recording"} "►"])
|
||||
[:td {:id "popup-record-stop"
|
||||
:disabled (nil? (@student-recordings phrase-no))
|
||||
:title "Play your own recording"} "►"]]
|
||||
[:td [:button {:id "popup-record-stop"
|
||||
:class "popup-control"
|
||||
:on-click #(record-student! phrase-no)
|
||||
:style popup-control-style
|
||||
:title "Record yourself saying this phrase"}
|
||||
"⏺"]]
|
||||
:title "Record yourself saying this phrase"} "⏺"]]]
|
||||
[:tr [:td {:id "progress"
|
||||
:colspan 3}
|
||||
[:progress {:id "progress-bar"
|
||||
|
|
|
|||
Loading…
Reference in a new issue