Skip to content

Instantly share code, notes, and snippets.

@krishnaanaril

krishnaanaril/audio-caption.html

Created March 5, 2023 11:24
Show Gist options
  • Save krishnaanaril/da3955110ddbd286e3822b66f5b94922 to your computer and use it in GitHub Desktop.
Save krishnaanaril/da3955110ddbd286e3822b66f5b94922 to your computer and use it in GitHub Desktop.
Download ZIP
POC for displaying audio with captions and subtitles
Raw
audio-caption.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Podcast</title>
</head>
<script src="https://cdn.tailwindcss.com"></script>
<script>
window.onload = function() {
const textTracks = document.getElementById('podcast_audio').textTracks;
var activeTextTrack = getActiveTextTrack(textTracks);
textTracks.onchange = (event) => {
activeTextTrack = getActiveTextTrack(textTracks);
};
const enTrack = textTracks.getTrackById('caption_en');
}
function getActiveTextTrack(textTracks) {
var activeTextTrack;
for(var track of textTracks) {
if(track.mode == 'showing') {
activeTextTrack = track;
break;
}
}
if(activeTextTrack) {
activeTextTrack.oncuechange = onCueChange;
}
return activeTextTrack;
}
function onCueChange(event) {
const captionSpan = document.getElementById('audio_caption');
var cueText = "";
for(var activeCue of this.activeCues) {
cueText += "\n"+activeCue.text;
}
captionSpan.innerText = cueText;
}
</script>
<body>
<div class="h-screen w-screen p-2 bg-gradient-to-r from-cyan-500 to-blue-500 flex flex-col">
<div class="w-full h-full text-5xl font-bold flex flex-col justify-center">
<span id="audio_caption" class="m-auto px-2">Sample caption</span>
</div>
<audio
id="podcast_audio"
src="sounds/podcast_sample.mp3"
class="px-2 w-full"
controls>
<a href="sounds/podcast_sample.mp3">
Download <audio src=""></audio>
</a>
<track id="caption_en" default kind="captions" srclang="en" src="sounds/podcast_sample.vtt">
<track id="subtitle_de"" default kind="subtitles" srclang="de" src="sounds/podcast_sample_02.vtt">
</audio>
</div>
<!-- <figure>
<figcaption>
Listen to Football Podcast:
</figcaption>
<div>
<span id="audio_caption"></span>
</div>
<video id="podcast_audio" src="sounds/texttrack_sample.mp4" controls>
<a href="sounds/podcast_sample.mp3">
Download <audio src=""></audio>
</a>
<track id="caption_en" default kind="captions" srclang="en" src="sounds/podcast_sample.vtt">
<track id="subtitle_de"" default kind="descriptions" srclang="de" src="sounds/podcast_sample_02.vtt">
</video>
</figure> -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment