52 lines
1.4 KiB
HTML
52 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>listening to [[ listing.name ]]</title>
|
|
<style>
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.music {
|
|
margin: 25px;
|
|
}
|
|
#captions-box {
|
|
height: 1em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
[[ component:return ]]
|
|
<div id="main">
|
|
<div class="music">
|
|
<h2 style="display: inline-block;">[[ listing.name ]] [[ chapter ]]</h2>
|
|
<br>
|
|
<audio controls>
|
|
<source src="/music_assets/[[ listing.name ]]/[[ chapter ]].mp3" type="audio/mpeg">
|
|
<track id="audio-captions" default kind="captions" src="/music_subtitle_assets/[[ listing.name ]]/[[ chapter ]].vtt"/>
|
|
</audio>
|
|
<div id="captions-box">
|
|
</div>
|
|
[[ component:nav ]] <!-- id: nav -->
|
|
</div>
|
|
</div>
|
|
<script>
|
|
let captions_ele = document.getElementById("audio-captions");
|
|
let captions_box = document.getElementById("captions-box");
|
|
|
|
captions_ele.addEventListener("cuechange", () => {
|
|
//do we need to sanitize this? surely not, right?
|
|
captions_box.innerHTML = "";
|
|
let active_cue = captions_ele.track.activeCues[0];
|
|
if (active_cue) {
|
|
captions_box.appendChild(active_cue.getCueAsHTML());
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|