How to play from custom button

[jonalxh]

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.

[stepannemejc]

You can start/pause playback using this code:

const playerRef = useRef<AudioPlayer>(null);
const [isPlaying, setIsPlaying] = useState<boolean>(false);

const handlePlayPause = () => {
	if (isPlaying) {
		playerRef?.current?.audio?.current?.pause();
	} else {
		playerRef?.current?.audio?.current?.play();
	}
};

To determine status of player, use onPlay and onPause to set isPlaying state

[jonalxh]

Thanks a ton! @stepannemejc