Creating a closed Caption in an HTML Audio Tag

Issue

I am looking for a method to add Closed Captioning to an HTML audio only tag. I am currently using the <track> tag, but it does not provide a caption box.

  <div id="audioCenter">
        <audio controls>
            <source src="~/Training/Compliance/ar/10165676.mp3" type="audio/mpeg">
            <track kind="captions" label="English SubTitles" src="~/Training/Compliance/ar/10165676.mp3" srclang="en" />
            Your browser does not support the audio element.
            </audio>
        <p style="color:white">This Section Has been Selected from Lesson 1 section 1 to allow the Test Taker to sample the audio</p>
    </div>

Solution

The <track> element src should point to a .vtt file, not .mp3. See also this Answer at Alternative for checking browser idle

Answered By – guest271314

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.