import * as React from 'react' ; import './Audio.scss' ; const Audio = ( props , ref ) => { const audioRef = React . useRef ( null ) ; const [ currentTime , setCurrentTime ] = React . useState < number > ( 0 ) ; const [ ended , setEnded ] = React . useState < boolean > ( false ) ; React . useImperativeHandle ( ref , ( ) => ( { duration : ( ) => audioRef . current . duration , endedMusic : ( ) => ended , getBufferTime : ( ) => getBufferTime ( ) , pause : ( ) => audioRef . current . pause ( ) , play : ( ) => audioRef . current . play ( ) , timeUpdate : ( ) => currentTime , } ) ) ; React . useEffect ( ( ) => { } , [ ] ) ; const timeupdate = React . useCallback ( ( ) => { setCurrentTime ( audioRef . current . currentTime ) ; } , [ currentTime ] ) ; const getBufferTime = ( ) => { } ; const endedMusic = React . useCallback ( ( ) => setEnded ( true ) , [ ] ) ; return ( < div className = "audioBox" > < audio controls = { true } ref = { audioRef } id = "audio" onTimeUpdate = { timeupdate } onEnded = { endedMusic } src = { props . audioUrl } / > < /div>); } ; const RecommendHeaderFinal = React . forwardRef ( Audio ) ; export default RecommendHeaderFinal ;