Subtitles for <audio> with <track>, how to display the subtitles

Question

I'm trying to add a text transcription of a spoken audio file with the track tag. The default behavior for the video tag is to display them (works). By default the audio tag seems to lack some sort of 'canvas' (the black area a video tag displays even without video) to display the subtitles automatically. I could use the video tag but it would feel like a ugly workaround. I don't want to break the semantics of my code though.

Is there some kind of CSS to force the display of such area where the subtiles will be displayed?

<audio controls>   <source src="test.ogg" type="audio/ogg">   <source src="test.mp3" type="audio/mpeg">   <track kind="subtitles" label="English subtitles" src="/test.vtt" srclang="en" default></track>   Your browser does not support the audio tag. </audio> 

Thanks you for reading.

Answer 1

I've tested this out without jquery -- as taylor-newton mentioned, you'll need to create a tag for your text to appear in.

document.getElementById('my-audio-player').textTracks[0].addEventListener('cuechange', function() {     document.getElementById('my-subtitle-display').innerText = this.activeCues[0].text; }); 

This does work with subtitles from audio tags too and using kind="subtitles" in your track tag works with audio as well.

Answer 2

I don't know how to do this with just CSS, but I have done something similar (custom cues) with video text tracks and JavaScript. Hopefully you should be able to leverage the same TextTrack events to accomplish what you are wanting to do with audio tracks.

You can bind a custom function to the track's oncuechange event, and then use the track's activeCues to generate your own captions. This custom div can then be positioned or styled however you want.

This should grab the text track and get the text from the currently active cue every time a cue change occurs.

$('audio')[0].textTracks[0].oncuechange = function() {      var currentCue = this.activeCues[0].text;     $('#yourCustomCaptions').html(currentCue); } 

Then take the text from each cue and inject it into the custom div you want to display.

https://developer.mozilla.org/en-US/docs/Web/API/TextTrack