AIdentity

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

5_title.tsx (1199B)

      1 import { useEffect, useRef } from "react";
      2 import { StageProps } from "../ctrl/page.tsx";
      3 
      4 const AUDIO_SOURCE = "/audio/005.flac";
      5 
      6 export default function FifthTitle({ onComplete }: StageProps) {
      7   const audioRef = useRef<HTMLAudioElement | null>(null);
      8 
      9   useEffect(() => {
     10     if (audioRef.current) return;
     11     const audio = new Audio(AUDIO_SOURCE);
     12     audioRef.current = audio;
     13 
     14     const handleAudioEnded = () => {
     15       onComplete();
     16     };
     17 
     18     audio.addEventListener("ended", handleAudioEnded);
     19 
     20     const playAudio = () => {
     21       audio
     22         .play()
     23         .catch((e) =>
     24           console.log(
     25             "Audio playback failed (may require user interaction):",
     26             e,
     27           ),
     28         );
     29     };
     30 
     31     audio.oncanplaythrough = playAudio;
     32 
     33     return () => {
     34       audio.pause();
     35       audio.removeEventListener("ended", handleAudioEnded);
     36       audioRef.current = null;
     37     };
     38   }, [onComplete]);
     39 
     40   return (
     41     <nav
     42       style={{
     43         width: "100vw",
     44         height: "100vh",
     45         display: "flex",
     46         justifyContent: "center",
     47         alignItems: "center",
     48       }}
     49     >
     50       <h1 style={{ fontSize: "8rem", color: "#bbb" }}>AIdentity</h1>
     51     </nav>
     52   );
     53 }