// voice.jsx — uses the user's own recording as the master narration. // The audio is ONE continuous track; the timeline playhead drives audio.currentTime // so visuals and voice stay locked. A calibration overlay lets the user tap the // exact scene-change moments while listening; results persist to localStorage. const MARKS_KEY = 'oneway-scene-marks-v4'; const NUM_SCENES = 8; function loadMarks(defaults) { try { const raw = localStorage.getItem(MARKS_KEY); if (raw) { const arr = JSON.parse(raw); if (Array.isArray(arr) && arr.length === defaults.length) return arr; } } catch (e) {} return defaults; } function VoiceTrack({ src, duration }) { const { time, playing, setTime, setPlaying } = useTimeline(); const audioRef = React.useRef(null); const [muted, setMuted] = React.useState(false); const [ready, setReady] = React.useState(false); const [blocked, setBlocked] = React.useState(false); const [visible, setVisible] = React.useState( typeof document === 'undefined' || document.visibilityState === 'visible' ); // Only the focused/visible view plays audio — prevents a second open copy // of the page (e.g. a background preview) from echoing over this one. React.useEffect(() => { const onVis = () => setVisible(document.visibilityState === 'visible'); document.addEventListener('visibilitychange', onVis); window.addEventListener('blur', () => setVisible(document.visibilityState === 'visible')); return () => document.removeEventListener('visibilitychange', onVis); }, []); // ── Calibration state ── const [calib, setCalib] = React.useState(false); const [marksDraft, setMarksDraft] = React.useState([]); // Lock audio position to the timeline (scrub-safe). Voice never loops. React.useEffect(() => { const a = audioRef.current; if (!a || !ready) return; const target = clamp(time, 0, a.duration || duration); if (Math.abs(a.currentTime - target) > 0.28) { try { a.currentTime = target; } catch (e) {} } }, [time, ready, duration]); React.useEffect(() => { const a = audioRef.current; if (!a || !ready) return; if (playing && !muted && visible) { a.play().then(() => setBlocked(false)).catch(() => setBlocked(true)); } else { a.pause(); } }, [playing, muted, ready, visible]); // Autoplay-policy unlock: the first real user gesture starts/raises audio. React.useEffect(() => { if (!ready) return; const unlock = () => { const a = audioRef.current; if (!a) return; if (playing && !muted && visible) { a.play().then(() => setBlocked(false)).catch(() => {}); } }; const opts = { passive: true }; window.addEventListener('pointerdown', unlock, opts); window.addEventListener('keydown', unlock, opts); window.addEventListener('touchstart', unlock, opts); return () => { window.removeEventListener('pointerdown', unlock); window.removeEventListener('keydown', unlock); window.removeEventListener('touchstart', unlock); }; }, [ready, playing, muted, visible]); React.useEffect(() => { const a = audioRef.current; if (a) a.volume = muted ? 0 : 1; }, [muted]); // ── Calibration controls ── const startCalib = () => { setMarksDraft([0]); // scene 1 always starts at 0 setCalib(true); setTime(0); setPlaying(true); }; const dropMark = () => { const a = audioRef.current; const t = a ? a.currentTime : time; setMarksDraft((prev) => { const next = [...prev, +t.toFixed(2)]; if (next.length >= NUM_SCENES) { // captured all starts → finish const final = [...next, +(a ? a.duration : duration).toFixed(2)]; try { localStorage.setItem(MARKS_KEY, JSON.stringify(final)); } catch (e) {} setPlaying(false); setTimeout(() => location.reload(), 150); } return next; }); }; const cancelCalib = () => { setCalib(false); setPlaying(false); }; const resetMarks = () => { try { localStorage.removeItem(MARKS_KEY); } catch (e) {} location.reload(); }; const SCENE_NAMES = ['Open', 'The problem', 'The hidden math', 'ROI calculator', 'Why OneWay', 'How it works', 'Testimonials', 'Book a call']; const nextSceneIdx = marksDraft.length; // 1-based index of the next scene to mark return ( <>