useAvatar

const { avatarDisplay } = useAvatar({ ... })

return <>{avatarDisplay}</>

const audioContextRef = useRef<AudioContext>(new AudioContext());

const [avatarInitialed, setAvatarInitialed] = useState();
const { ... } = useAvatar({ 
    onAvatarLoaded: ({ avatarId }) => {
        setAvatarInitialed(true);
    }
});

useEffect(() => {
    if (!avatarInitialed) return;
    connectAudioContext(audioContextRef.current);
}, [avatarInitialed]);

const audioElementRef = useRef<HTMLAudioElement | null>(null);

const [avatarInitialed, setAvatarInitialed] = useState(false);

useEffect(() => {
    if (!avatarInitialed || !audioElementRef.current) return;
    connectAudioElement(audioElementRef.current);
}, [avatarInitialed]);

return (
    <>
        {avatarDisplay}
        <audio ref={audioElementRef} hidden/>
    </>
);

const audioContextRef = useRef<AudioContext>(new AudioContext());
const [file, setFile] = useState<File | null>(null);

useEffect(()=>{
    const nf = await file!.arrayBuffer();

    const audioBuffer = await audioContextRef.current.decodeAudioData(nf);
    const bs = audioContextRef.current.createBufferSource();
    bs.buffer = audioBuffer;
    connectAudioNode(bs);
    bs.start();
},[file])

return (
    <>
        {avatarDisplay}
        <input type="file" onChange={(e) => setFile(e.target.files![0])} />
    </>
);

const { triggerEvent } = useAvatar(...)
triggerEvent('happy')