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.
28 lines
987 B
HTML
28 lines
987 B
HTML
2 months ago
|
<!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>
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<audio src="w25mia60.mp3" controls style="width: 100%">
|
||
|
|
<track default id="captions" kind="metadata" label="vosk" src="w25mia60.vtt"></track>
|
||
|
|
</audio>
|
||
|
|
|
||
|
|
<div id="caption" style="text-align: center; padding: 25px; font-size: 42px; color: line">caption here</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
let captrack = document.querySelector("track#captions");
|
||
|
|
let capdiv = document.querySelector("#caption");
|
||
|
|
captrack.addEventListener("cuechange", (e) => {
|
||
|
|
console.log('track: cuechange', e);
|
||
|
|
let text = captrack.track.activeCues[0]?.text || "";
|
||
|
|
console.log(text);
|
||
|
|
capdiv.innerHTML = text;
|
||
|
|
});
|
||
|
|
captrack.track.mode = "hidden";
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|