react-h5-audio-player icon indicating copy to clipboard operation
react-h5-audio-player copied to clipboard

How to play from custom button

Open jonalxh opened this issue 1 year ago • 0 comments
trafficstars

I have a custom button and I want to be able to make this audio player play when I click on it.

My current React code looks like this:

const audioPlayerRef = useRef(null);

const onPlayClick = () => {
    // TODO: Make the player play from here
    audioPlayerRef.play();
}

return (
    <Button
		className='rounded-full bg-gray-600 w-[40px] h-[40px] p-0' title='Play audio'
		onClick={() => onPlayClick()}
	>
		<Play size={24} />
    </Button>

    <AudioPlayer
	ref={audioPlayerRef}
	src={transcript.file_url}
	autoPlayAfterSrcChange={false}
	customAdditionalControls={[]}
	layout='stacked-reverse'
	className='custom-audio-player'
    ></AudioPlayer>
)

How can I make it play from my custom button? I appreciate all your help.

jonalxh avatar Sep 18 '24 14:09 jonalxh