You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
|
|
|
|
<style>
|
|
|
|
|
#word {
|
|
|
|
|
position:relative;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
#word .content {
|
|
|
|
|
font-size: 100px;
|
|
|
|
|
color: black;
|
|
|
|
|
}
|
|
|
|
|
#word .content.iffy {
|
|
|
|
|
color: lightpink;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<audio controls style="width: 100%">
|
|
|
|
|
<track kind="metadata" id="metadata" label="captions" src="w25mia60_words.vtt"></track>
|
|
|
|
|
<source src="w25mia60.mp3">
|
|
|
|
|
</audio>
|
|
|
|
|
<div id="word">
|
|
|
|
|
<div class="content">caption here</div>
|
|
|
|
|
</div>
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
const word_content = document.querySelector("#word .content");
|
|
|
|
|
const track = document.querySelector("track#metadata");
|
|
|
|
|
track.addEventListener("cuechange", function (e) {
|
|
|
|
|
// console.log(`track: cuechange: ${this}`);
|
|
|
|
|
if (this.track.activeCues) {
|
|
|
|
|
let word = this.track.activeCues[0]?.text;
|
|
|
|
|
console.log("word", word);
|
|
|
|
|
if (word) {
|
|
|
|
|
word = JSON.parse(word);
|
|
|
|
|
word_content.innerText = word['text'];
|
|
|
|
|
word_content.style.fontSize = (100 * word['confidence']) + "px";
|
|
|
|
|
if (word['confidence'] < 1.0 && !word_content.classList.contains("iffy")) {
|
|
|
|
|
word_content.classList.add("iffy");
|
|
|
|
|
} else if (word_content.classList.contains("iffy")) {
|
|
|
|
|
word_content.classList.remove("iffy");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
track.track.mode = "hidden";
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
