const useAudio = (url: string) => {
  const [song] = useState(new Audio(url)); // 비동기로 처리
  const [play, setPlay] = useState(false); // true일 경우 비동기 처리 필요

  const toggle: MouseEventHandler<HTMLImageElement> = () => setPlay(!play);

  useEffect(() => {
    play ? song.play() : song.pause();
  }, [play, song]);

  useEffect(() => {
    song.addEventListener('ended', () => setPlay(false));
    return () => {
      song.removeEventListener('ended', () => setPlay(false));
    };
  }, [song]);

  return { play, toggle };
};

const Song = () => {
  const { play, toggle } = useAudio(
    '/music/christmas-knocking-to-the-door.mp3'
  );

  return (
    <StyledMusic
      src={play ? '/music/music.svg' : '/music/music-slash.svg'}
      onClick={toggle}
    />
  );
};

무료 크리스마스 음악 다운로드 - Pixabay

React에서 오디오 플레이어 구현

Music SVG Vectors and Icons - SVG Repo