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

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

Answer 3

I have a similar requirement trying to build a captions transcript display for audio logs for a personal app. I am trying to auto scroll and highlight the text phrases based on the audio log. I did not find the element displaying .vtt file captions set on element as there is no canvas available similar to video element. And decided to write a custom canvas component to display associated .vtt on the container and found this HTML5 Video Caption maker demo handy, you can give it a shot.

Answer 4

There is a pseudo-element in html that you can select it in css to style your subtitle or caption .
It is ::cue element that you can give some css property like color, opacity, font and etc . You see all of them are the styles that used for texts .
I learned these when I learned how to use video tags . But had a search in google and found a very helpful article on MDN . You can see everything about subtitle styling in here .
And there is no reason to use plugins ;) .