Search code examples
javascripthtmlcssaudiowebvtt

Audio captions not showing WebVTT

I'm trying to display my captions with my audio, and it seems like chrome loads it, but i dont see it on the screen, maybe it's because it's at the bottom of the div body?

I see the controls on the screen, but i don't see the audio.

<audio id="player" autoplay="" src="data/audio/Voice 006.m4a">
        <source type="audio/m4a">
        
        <track src="data\audio\subtitles.vtt" kind="captions" srclang="en" label="English" default="">
      

        
    </audio>

This is my .vtt file

WEBVTT

1 00:00.000 --> 00:02.111

  • Hi my name is sam

2 00:02.888 --> 00:06.555

  • I wanna see what letter names, letter sounds and words you know.

3 00:07.111 --> 00:10.555

  • Let's answer some questions together and see how you do.
Solution

  • The <audio> element does not directly support WebVTT. One option is to play your audio using a <video> element, which does support WebVTT.