INNER CODE UNIT · JavaScript

PronunciationButton

maester365/maester · website/src/components/PronunciationButton/index.js:41

export default function PronunciationButton({
  src = "/audio/maester-pronunciation.mp3",
  label = "Hear how Maester is pronounced",
  className,
}) {
  const audioUrl = useBaseUrl(src);
  const audioRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);

  // Runs on unmount and whenever the source changes, so a clip belonging to a
  // previous `src` cannot carry on playing under the new one.
  useEffect(
    () => () => {
      audioRef.current?.element.pause();
      audioRef.current = null;
      setIsPlaying(false);
    },
    [audioUrl],

View source record →