Work on Progress bar (not done yet!)
This commit is contained in:
parent
20f471236c
commit
ca4835aeef
126
japji/index.html
126
japji/index.html
|
@ -76,114 +76,6 @@
|
||||||
<script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.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="text/javascript"></script>
|
<script src="https://cdn.jsdelivr.net/npm/scittle@0.7.27/dist/scittle.reagent.js" type="text/javascript"></script>
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
/* Yes, I should rewrite this in Scittle, especially since it depends on JQuery
|
|
||||||
* which we otherwise don't need. However it's ugly and I don't have time.
|
|
||||||
*/
|
|
||||||
/**
|
|
||||||
* Creates a progressbar. Adapted from
|
|
||||||
* https://stackoverflow.com/questions/31109581/javascript-timer-progress-bar
|
|
||||||
*
|
|
||||||
* @param id the id of the div we want to transform in a progressbar
|
|
||||||
* @param duration the duration of the timer example: '10s'
|
|
||||||
* @param callback, optional function which is called when the progressbar reaches 0.
|
|
||||||
*/
|
|
||||||
function createProgressbar(id, duration) {
|
|
||||||
// We select the div that we want to turn into a progressbar
|
|
||||||
try {
|
|
||||||
const progressbar = document.getElementById(id);
|
|
||||||
progressbar.className = 'progressbar';
|
|
||||||
|
|
||||||
// We create the div that changes width to show progress
|
|
||||||
let progressbarinner = progressbar.querySelector('.inner');
|
|
||||||
|
|
||||||
if (progressbarinner == null) {
|
|
||||||
progressbarinner = document.createElement('div');
|
|
||||||
progressbarinner.className = 'inner';
|
|
||||||
|
|
||||||
// Now we set the animation parameters
|
|
||||||
progressbarinner.style.animationDuration = duration;
|
|
||||||
|
|
||||||
// Append the progressbar to the main progressbardiv
|
|
||||||
progressbar.appendChild(progressbarinner);
|
|
||||||
}
|
|
||||||
progressbarinner.addEventListener('animationend', () => {
|
|
||||||
while (progressbar.hasChildNodes()) {
|
|
||||||
progressbar.removeChild(progressbar.lastChild);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// When everything is set up we start the animation
|
|
||||||
progressbarinner.style.animationPlayState = 'running';
|
|
||||||
} catch (e) {
|
|
||||||
console.warn("Failed to create progress bar because " +
|
|
||||||
e.message +
|
|
||||||
". This does not, cosmically speaking, matter.");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function recordStudentSound(phrase-data) {
|
|
||||||
console.info("Entered recordStudentSound for phrase " + phrase-data);
|
|
||||||
|
|
||||||
if (!!phrase-data) {
|
|
||||||
$('#record-stop').css('color', 'green');
|
|
||||||
|
|
||||||
try {
|
|
||||||
createProgressbar('progress', '5s');
|
|
||||||
|
|
||||||
navigator.mediaDevices.getUserMedia({ audio: true })
|
|
||||||
.then(stream => {
|
|
||||||
const mediaRecorder = new MediaRecorder(stream);
|
|
||||||
const audioChunks = [];
|
|
||||||
|
|
||||||
mediaRecorder.start();
|
|
||||||
mediaRecorder.onerror = function (e) {
|
|
||||||
console.log("An error has occurred: " + e.message);
|
|
||||||
};
|
|
||||||
mediaRecorder.addEventListener("dataavailable", event => {
|
|
||||||
console.info("Audio recorded...")
|
|
||||||
audioChunks.push(event.data);
|
|
||||||
});
|
|
||||||
|
|
||||||
mediaRecorder.onstop = function (e) {
|
|
||||||
console.log("data available after MediaRecorder.stop() called.");
|
|
||||||
|
|
||||||
if (audioChunks.length > 0) {
|
|
||||||
studentSounds[r][c] = new Blob(audioChunks);
|
|
||||||
|
|
||||||
$('#play-student').prop('disabled', false);
|
|
||||||
$('#play-student').css('color', 'black');
|
|
||||||
$("#play-student").on("click", function (e) {
|
|
||||||
console.log("Playing student sound for row " + r + ", column " + c);
|
|
||||||
new Audio(URL.createObjectURL(studentSounds[r][c])).play();
|
|
||||||
});
|
|
||||||
console.log("Successfully recorded student sound for row " + r + ", column " + c);
|
|
||||||
} else {
|
|
||||||
console.warn("Failed to record student sound for row " + r + ", column " + c);
|
|
||||||
window.alert("No sound detected. Check your microphone?");
|
|
||||||
}
|
|
||||||
$('#record-stop').css('color', 'red');
|
|
||||||
};
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
mediaRecorder.requestData();
|
|
||||||
mediaRecorder.stop();
|
|
||||||
|
|
||||||
}, 5000);
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error);
|
|
||||||
if (error instanceof TypeError) {
|
|
||||||
window.alert("Sound recording is only possible on secure connections.");
|
|
||||||
}
|
|
||||||
else if (error instanceof DOMException) {
|
|
||||||
window.alert("No microphone detected? " + error.message);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script type="application/x-scittle">
|
<script type="application/x-scittle">
|
||||||
(require '[reagent.core :as r]
|
(require '[reagent.core :as r]
|
||||||
'[reagent.dom :as rdom])
|
'[reagent.dom :as rdom])
|
||||||
|
@ -1866,6 +1758,9 @@
|
||||||
;; initially styled; so style needs to be embedded.
|
;; initially styled; so style needs to be embedded.
|
||||||
(let [popup (.getElementById js/document "popup")
|
(let [popup (.getElementById js/document "popup")
|
||||||
phrase-data (nth data phrase-no)
|
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"
|
content [:div {:id "popup-content"
|
||||||
:style {:border "thin solid #331f16"
|
:style {:border "thin solid #331f16"
|
||||||
:background-color "whitesmoke"
|
:background-color "whitesmoke"
|
||||||
|
@ -1905,7 +1800,20 @@
|
||||||
:on-click #(record-student phrase-no)
|
:on-click #(record-student phrase-no)
|
||||||
:style popup-control-style
|
:style popup-control-style
|
||||||
:title "Record yourself saying this phrase"}
|
:title "Record yourself saying this phrase"}
|
||||||
"⏺"]]]]]
|
"⏺"]]
|
||||||
|
[:tr [:td {:id "progress"
|
||||||
|
:colspan 3}
|
||||||
|
(do
|
||||||
|
(.info js/console (str "Duration is: " duration "; step is: " progress-step))
|
||||||
|
(js/setTimeout #(when (and (> @progress-width -1)
|
||||||
|
(< @progress-width 100))
|
||||||
|
(.info js/console (str "Incrementing progress-width from " @progress-width))
|
||||||
|
(swap! progress-width inc))
|
||||||
|
progress-step)
|
||||||
|
[:div {:id "progress-bar"
|
||||||
|
:style {:background-color "red"
|
||||||
|
:width @progress-width}}
|
||||||
|
@progress-width])]]]]]
|
||||||
(rdom/render content popup)))
|
(rdom/render content popup)))
|
||||||
|
|
||||||
(defn markup-phrase [record n]
|
(defn markup-phrase [record n]
|
||||||
|
|
Loading…
Reference in a new issue