30

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.

phl
  • 408
  • 1
  • 4
  • 9
  • Try changing the `kind` attribute to `"captions"`. AFAIK `"subtitles"` are only for ` – idbehold May 05 '14 at 18:16
  • 2
    According to [the spec for WebVTT](http://dev.w3.org/html5/webvtt/#h4_processing-model). Only ` – idbehold May 05 '14 at 18:22
  • 1
    According to [the HTML 5.1 specs on the track element](http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#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? – phl May 08 '14 at 17:49
  • Try subtitles with bubbles.js. Check this link out http://bubbles.childnodes.com/ . You can independently style the subtitles. – user3755563 Jul 22 '14 at 11:20
  • 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?. – Pbk1303 Dec 30 '14 at 19:43
  • 1
    I found an example in Mozilla documentation, but still, it doesn't work on my end. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio – PRASS Mar 11 '15 at 19:05

4 Answers4

3

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.

Stuart Mclean
  • 407
  • 6
  • 7
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

Taylor Newton
  • 411
  • 7
  • 10
0

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.

Saravanan N
  • 13
  • 2
0

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

Morteza Sadri
  • 695
  • 9
  • 18