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 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">
|
||||
(require '[reagent.core :as r]
|
||||
'[reagent.dom :as rdom])
|
||||
|
@ -1866,6 +1758,9 @@
|
|||
;; 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"
|
||||
|
@ -1905,7 +1800,20 @@
|
|||
:on-click #(record-student phrase-no)
|
||||
:style popup-control-style
|
||||
: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)))
|
||||
|
||||
(defn markup-phrase [record n]
|
||||
|
|
Loading…
Reference in a new issue