jpbaena13/unc-react-audio-captions

React Audio Captions Component

Install

Install it with npm (npm install unc-react-audio-captions --save). Here's a simple example:

import React from 'react';
import { render } from 'react-dom';
import { AudioCaptions, Caption } from 'unc-react-audio-captions';

import 'animate.css/animate.min.css';

render(
  <AudioCaptions src="audio.mp3" controls autoPlay>
    <Caption start="2">
      Caption starting in second 2
      <div>
        <Caption start="4">
          Embedded Caption
        </Caption>
      </div>
    </Caption>

    <Caption start="3" animation="rotateIn">
      <h4>Caption with diferent animation</h4>
    </Caption>

    <Caption start="4" noDisplay>
      Caption with display:none
    </Caption>

    <Caption start="5" end="6">
      Caption that ends in the second 6
    </Caption>
  </AudioCaptions>,
  document.getElementById('app')
);

Documentation

Documentation and demo can be found here: http://jpbaena13.github.io/unc-react-audio-captions/

unc-react-audio-captions's Issues

All captions displaying for 1/2 a second when the page loads

Hi! I'm trying to use this to display 2 lines of captions at a time on a website and it's working great except that when the page first loads you can see all the text.

You can also see all the text when you reload the page.

That should only show the first 2 lines to start

Do you know how I could fix this to only show the first 2 captions on load and reload?