How to add an audio file to React konva?

Question

I am trying to make a site like office 365 PowerPoint. I started using React konva. I got stucked on adding audio file to konva stage with new layer. I searched alot butcan't found solution. I should be able to add an audio file and adjust its volume.

Answer 1

You don't need react-konva for that. react-konva can be used to visualize your page.

For the sound, you can just create <audio /> element outside of canvas <Stage/> and controls its volume.

const Audio = ({ src, isPlaying }) => {
  const audioRef = React.useRef(null);

  React.useEffect(() => {
    if (isPlaying) {
      audioRef.current.play();
    } else {
      audioRef.current.pause();
    }
  });

  return <audio src={src} ref={audioRef} />;
};