useSountToneJs

useSound.ts

import { useEffect, useRef, useState } from "react";
import { MembraneSynth, Offline, Player } from "tone";

interface Synthhh {
  kick?: Player;
}

const sound: Synthhh = {};

Offline(() => {
  new MembraneSynth().toDestination().triggerAttackRelease("C2", "32n");
}, 5).then((buffer) => {
  sound.kick = new Player(buffer).toDestination();
});

export const useSound = () => {
  const [counter, setCounter] = useState(0);

  const synthRef = useRef(sound);

  useEffect(() => {
    synthRef.current.kick?.start();
  }, [counter]);

  const setCounterHandler = () => {
    setCounter((v) => v + 1);
  };

  return [setCounterHandler];
};