import  React  from  "react";

import  Timeline  from  "react-subtitle-editor";

  

function  App() {

const  mediaRef = useRef(); //access audio/video element.

const  data = [{ begin:  25, end:  35, text:  "This is subtitle" }];

  

return (

<div>

<button  onClick={() =>  audioRef.current.play()}>play</button>

<button  onClick={() =>  audioRef.current.pause()}>pause</button>

  

<Timelines

changeAreaShow={(start, end) => {}}

changeZoomLevel={(zoomLevel) => {}}

changeShift={(shift) => {}}

setAligns={(alignments) => {}}

audioRef={mediaRef}

src={"..."}

data={data}

autoScroll

colors={{

background:  "transparent",

box:  "#a9a9a9",

boxHover:  "#80add6",

selectedBox:  "#1890ff",

playingBox:  "#f0523f",

text:  "#212b33",

selectedText:  "white",

tooltipBackground:  "#474e54",

tooltipText:  "white",

scrollBarBackground:  "#f1f3f9",

scrollBar:  "#c2c9d6",

scrollBarHover:  "#8f96a3",

}}

/>

</div>

);

}