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.

Jsandye

Try changing the kind attribute to "captions". AFAIK "subtitles" are only for <video> elements. See here. Also, .vtt files are "Video Text Tracks" and are therefore only for <video>. – Polite

According to the spec for WebVTT. Only <video> elements support it. The first rule for the browsers when attempting to render a <track> with a WebVTT src is as follows: "If the media element is an audio element, or is another playback mechanism with no rendering area, abort these steps." – Polite

According to the HTML 5.1 specs on the track element tracks can be used as a child of a media element. Audio is a media element. Track related events do work just fine in javascript. So I don't see a problem using them inside audio. Is there a different file format to use for the audio tracks then? – Jsandye

Try subtitles with bubbles.js. Check this link out bubbles.childnodes.com . You can independently style the subtitles. – Training

has anyone ever found a solution to this question?. i changed it to captions and added the .srt file as well. but still i cant see the captions. what else should be done?. – Eskridge

I found an example in Mozilla documentation, but still, it doesn't work on my end. developer.mozilla.org/en-US/docs/Web/HTML/Element/audio – Odelsting

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.

Rosa

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

Chapel

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.

Egis

Could you please update the link? – Maiamaiah

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 ;) .

Pepys