497 lines
26 KiB
HTML
Executable File
497 lines
26 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Interactive Audiobook Reader</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Poppins:wght@500;700&display=swap" rel="stylesheet" />
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<style>
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
|
|
|
html { scroll-behavior: smooth; }
|
|
body {
|
|
background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
|
|
color: #1f2937; font-family: "Lora", serif;
|
|
}
|
|
.story-title { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 2.5rem; color: #111827; }
|
|
.story-subtitle { font-family: "Poppins", sans-serif; color: #4b5563; font-weight: 500; font-size: 1.1rem; }
|
|
.main-content-card {
|
|
background-color: rgba(255,255,255,0.9); backdrop-filter: blur(12px);
|
|
border-radius: 1rem; padding: 3rem 4rem; box-shadow: 0 10px 35px rgba(0,0,0,0.08);
|
|
border: 1px solid rgba(255,255,255,0.2); max-width: 1400px; margin: 0 auto;
|
|
animation: fadeIn 0.5s ease-in-out;
|
|
}
|
|
|
|
.story-text-container { font-size: 36px; line-height: 2.1; color: #1f2937; cursor: pointer; }
|
|
.story-text-container h1,.story-text-container h2,.story-text-container h3 {
|
|
font-family: "Poppins", sans-serif; color: #111827; line-height: 1.8; margin-top: 1.5em; margin-bottom: 0.8em;
|
|
}
|
|
.story-text-container h1 { font-size: 2.2em; }
|
|
.story-text-container h2 { font-size: 1.8em; }
|
|
.story-text-container h3 { font-size: 1.5em; }
|
|
.story-text-container p { margin-bottom: 1.2em; }
|
|
.story-text-container img { max-width: 100%; height: auto; border-radius: 8px; margin: 16px auto; display: block; }
|
|
|
|
.word { transition: all 0.15s ease; border-radius: 3px; }
|
|
.word:hover { background-color: #f1f5f9; }
|
|
.current-sentence-bg {
|
|
-webkit-box-decoration-break: clone; box-decoration-break: clone;
|
|
background-color: #e0e7ff; padding: 0.1em 0.25em; margin: 0 -0.2em; border-radius: 8px;
|
|
}
|
|
.current-word { color: #3d4e81; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 3px; font-weight: 700; }
|
|
|
|
.story-image-block { text-align: center; margin: 24px 0; }
|
|
.story-image-block img { max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
|
|
|
#floating-player-btn {
|
|
position: fixed; top: 2rem; height: 60px; min-width: 60px; padding: 0 24px;
|
|
border-radius: 30px; background-image: linear-gradient(45deg, #3d4e81 0%, #5753c9 50%, #6e78da 100%);
|
|
background-size: 200% auto; border: none; color: white; box-shadow: 0 8px 25px rgba(0,0,0,0.3);
|
|
display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 1050;
|
|
transition: transform 0.2s, opacity 0.3s, width 0.3s, padding 0.3s, border-radius 0.3s;
|
|
opacity: 0; transform: scale(0.8);
|
|
}
|
|
#floating-player-btn.visible { display: flex; opacity: 1; transform: scale(1); }
|
|
#floating-player-btn:hover { transform: scale(1.05); }
|
|
#floating-player-btn:active { transform: scale(0.95); }
|
|
#floating-player-btn svg { width: 28px; height: 28px; }
|
|
#fp-start-text { font-weight: 600; margin-right: 10px; font-family: "Poppins", sans-serif; font-size: 1.1rem; }
|
|
#floating-player-btn.active-mode { width: 60px; padding: 0; border-radius: 50%; }
|
|
|
|
#story-nav {
|
|
position: fixed; top: 50%; background-color: rgba(255,255,255,0.85);
|
|
backdrop-filter: blur(10px); border-radius: 25px; padding: 0.5rem;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1); z-index: 1000; max-height: 80vh; overflow-y: auto;
|
|
opacity: 0; transform: translateY(-50%) translateX(-20px);
|
|
transition: opacity 0.4s ease-out, transform 0.4s ease-out;
|
|
}
|
|
#story-nav.visible { opacity: 1; transform: translateY(-50%) translateX(0); }
|
|
#story-nav ul { padding-left: 0; margin-bottom: 0; }
|
|
#story-nav a {
|
|
display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0.5rem 0;
|
|
border-radius: 50%; text-decoration: none; color: #4b5563; font-family: "Poppins", sans-serif;
|
|
font-weight: 500; transition: all 0.3s ease;
|
|
}
|
|
#story-nav a:hover { background-color: #e0e7ff; color: #3d4e81; }
|
|
#story-nav a.active { background-image: linear-gradient(45deg, #3d4e81 0%, #5753c9 50%, #6e78da 100%); color: white; transform: scale(1.1); }
|
|
|
|
@media (max-width: 768px) {
|
|
.main-content-card { padding: 1.5rem; }
|
|
.story-text-container { font-size: 24px; line-height: 1.9; }
|
|
#floating-player-btn { top: 1rem; right: 1rem !important; height: 50px; min-width: 50px; }
|
|
#floating-player-btn.active-mode { width: 50px; }
|
|
#story-nav { display: none !important; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav id="story-nav"><ul id="story-nav-list" class="list-unstyled"></ul></nav>
|
|
|
|
<button id="floating-player-btn">
|
|
<span id="fp-start-text">Start</span>
|
|
<svg id="fp-pause-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="display:none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
|
|
<svg id="fp-play-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="display:none;"><path d="M8 5v14l11-7z"/></svg>
|
|
</button>
|
|
|
|
<div class="container-fluid my-5 px-md-5">
|
|
<main id="main-content" class="main-content-card">
|
|
<header class="text-center mb-5" id="main-header">
|
|
<h1 class="story-title">Interactive Reader</h1>
|
|
<p class="story-subtitle">Loading book...</p>
|
|
</header>
|
|
<div id="resume-alert" class="alert alert-info d-flex justify-content-between align-items-center" style="display:none;">
|
|
<span>Welcome back! Resume from where you left off?</span>
|
|
<button id="resume-btn" class="btn btn-primary btn-sm">Resume Playback</button>
|
|
</div>
|
|
<div id="stories-main-container"></div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
const mainContainer = document.getElementById("stories-main-container");
|
|
const mainContentCard = document.getElementById("main-content");
|
|
const floatingPlayerBtn = document.getElementById("floating-player-btn");
|
|
const fpStartText = document.getElementById("fp-start-text");
|
|
const fpPauseIcon = document.getElementById("fp-pause-icon");
|
|
const fpPlayIcon = document.getElementById("fp-play-icon");
|
|
const storyNav = document.getElementById("story-nav");
|
|
const storyNavList = document.getElementById("story-nav-list");
|
|
const resumeAlert = document.getElementById("resume-alert");
|
|
const resumeBtn = document.getElementById("resume-btn");
|
|
|
|
let storyInstances = [];
|
|
let currentlyPlayingInstance = null;
|
|
let currentlyPlayingIndex = -1;
|
|
let hasStarted = false;
|
|
let navObserver;
|
|
let currentBookId = null;
|
|
let audioAssets = [];
|
|
const PROGRESS_KEY = "interactiveReaderProgress";
|
|
|
|
floatingPlayerBtn.addEventListener("click", handleFloatingBtnClick);
|
|
mainContainer.addEventListener("click", handleTextClick);
|
|
window.addEventListener("beforeunload", saveCurrentProgress);
|
|
window.addEventListener("resize", positionUI);
|
|
window.addEventListener("scroll", positionUI);
|
|
|
|
function positionUI() {
|
|
const rect = mainContentCard.getBoundingClientRect();
|
|
const btnRight = window.innerWidth - rect.right - 8;
|
|
floatingPlayerBtn.style.right = Math.max(btnRight, 8) + "px";
|
|
floatingPlayerBtn.style.left = "auto";
|
|
const navWidth = storyNav.offsetWidth || 52;
|
|
storyNav.style.left = Math.max(rect.left - navWidth - 8, 8) + "px";
|
|
}
|
|
|
|
function saveCurrentProgress() {
|
|
if (!currentlyPlayingInstance || !currentBookId) return;
|
|
const idx = storyInstances.indexOf(currentlyPlayingInstance);
|
|
saveProgress(currentBookId, idx, currentlyPlayingInstance.getAudioElement().currentTime);
|
|
}
|
|
function saveProgress(bookId, idx, timestamp) {
|
|
localStorage.setItem(PROGRESS_KEY, JSON.stringify({ bookId, instanceIndex: idx, timestamp, lastUpdate: Date.now() }));
|
|
}
|
|
function loadProgress(bookId) {
|
|
const saved = localStorage.getItem(PROGRESS_KEY);
|
|
if (!saved) return;
|
|
const p = JSON.parse(saved);
|
|
if (p.bookId !== bookId) return;
|
|
const target = storyInstances[p.instanceIndex];
|
|
if (!target) return;
|
|
resumeAlert.style.display = "flex";
|
|
resumeBtn.onclick = () => {
|
|
resumeAlert.style.display = "none";
|
|
hasStarted = true;
|
|
currentlyPlayingInstance = target;
|
|
currentlyPlayingIndex = p.instanceIndex;
|
|
target.playAt(p.timestamp);
|
|
updateFloatingButton("playing");
|
|
};
|
|
}
|
|
|
|
function updateFloatingButton(state) {
|
|
if (hasStarted) { fpStartText.style.display = "none"; floatingPlayerBtn.classList.add("active-mode"); }
|
|
if (state === "playing") { fpPauseIcon.style.display = "block"; fpPlayIcon.style.display = "none"; }
|
|
else { fpPauseIcon.style.display = "none"; fpPlayIcon.style.display = "block"; }
|
|
}
|
|
|
|
function handleFloatingBtnClick() {
|
|
if (!hasStarted) {
|
|
hasStarted = true;
|
|
if (storyInstances.length > 0) { currentlyPlayingInstance = storyInstances[0]; currentlyPlayingIndex = 0; currentlyPlayingInstance.playAt(0); updateFloatingButton("playing"); }
|
|
return;
|
|
}
|
|
if (currentlyPlayingInstance) {
|
|
const audio = currentlyPlayingInstance.getAudioElement();
|
|
if (audio.paused) { currentlyPlayingInstance.play(); updateFloatingButton("playing"); }
|
|
else { currentlyPlayingInstance.pause(); updateFloatingButton("paused"); }
|
|
} else {
|
|
if (storyInstances.length > 0) { currentlyPlayingInstance = storyInstances[0]; currentlyPlayingIndex = 0; currentlyPlayingInstance.playAt(0); updateFloatingButton("playing"); }
|
|
}
|
|
}
|
|
|
|
function playNextInstance() {
|
|
const next = currentlyPlayingIndex + 1;
|
|
if (next < storyInstances.length) {
|
|
if (currentlyPlayingInstance) currentlyPlayingInstance.stopAndReset();
|
|
currentlyPlayingInstance = storyInstances[next]; currentlyPlayingIndex = next; currentlyPlayingInstance.playAt(0);
|
|
} else { updateFloatingButton("paused"); currentlyPlayingInstance = null; currentlyPlayingIndex = -1; }
|
|
}
|
|
|
|
function handleTextClick(event) {
|
|
const wordSpan = event.target.closest(".word");
|
|
if (!wordSpan) return;
|
|
const storyBlock = event.target.closest(".story-block");
|
|
if (!storyBlock) return;
|
|
const idx = parseInt(storyBlock.dataset.instanceIndex, 10);
|
|
const target = storyInstances[idx];
|
|
if (!target) return;
|
|
const timestamp = target.getTimeForSpan(wordSpan);
|
|
if (timestamp !== null) {
|
|
hasStarted = true;
|
|
if (currentlyPlayingInstance && currentlyPlayingInstance !== target) currentlyPlayingInstance.stopAndReset();
|
|
currentlyPlayingInstance = target; currentlyPlayingIndex = idx;
|
|
currentlyPlayingInstance.playAt(timestamp); updateFloatingButton("playing");
|
|
}
|
|
}
|
|
|
|
// ── Load manifest and scan for images ──
|
|
try {
|
|
const resp = await fetch("manifest.json");
|
|
const manifest = await resp.json();
|
|
|
|
document.getElementById("main-header").querySelector(".story-title").textContent = manifest.title || "Interactive Reader";
|
|
document.getElementById("main-header").querySelector(".story-subtitle").textContent = "An interactive reading experience.";
|
|
|
|
audioAssets = (manifest.assets || []).filter(a => a.textFile && a.audioFile && a.jsonFile);
|
|
|
|
if (audioAssets.length === 0) {
|
|
mainContainer.innerHTML = '<p class="text-center text-muted">No playable content found.</p>';
|
|
return;
|
|
}
|
|
|
|
// Scan the book/ directory for image files by trying common patterns
|
|
// We'll extract all known prefixes from audio assets and also look for image-only prefixes
|
|
const allPrefixes = new Set();
|
|
const audioPrefixSet = new Set();
|
|
|
|
for (const asset of audioAssets) {
|
|
// prefix is like "1.1_"
|
|
const match = asset.prefix.match(/^([\d]+\.[\d]+)_/);
|
|
if (match) {
|
|
allPrefixes.add(match[1]);
|
|
audioPrefixSet.add(match[1]);
|
|
}
|
|
}
|
|
|
|
// Build ordered items: audio assets + try to discover image files
|
|
// Since we can't list directories via fetch, we'll look for images referenced
|
|
// in the manifest or try common image patterns
|
|
|
|
// For now, build from audio assets and try to fetch potential image files
|
|
const orderedItems = [];
|
|
|
|
// Collect all numeric prefixes we should check for images
|
|
// Check for image files at each audio prefix position and also between them
|
|
const sortedAudioPrefixes = Array.from(audioPrefixSet).sort((a, b) => {
|
|
const [aMaj, aMin] = a.split(".").map(Number);
|
|
const [bMaj, bMin] = b.split(".").map(Number);
|
|
return aMaj !== bMaj ? aMaj - bMaj : aMin - bMin;
|
|
});
|
|
|
|
// Determine all possible prefixes (including gaps for images)
|
|
const allSortKeys = new Set();
|
|
for (const p of sortedAudioPrefixes) allSortKeys.add(p);
|
|
|
|
// Check for images at each prefix — try _img0.jpg, _img0.png
|
|
const imageMap = new Map();
|
|
const imgExts = ["jpg", "jpeg", "png", "gif", "webp"];
|
|
|
|
// Also check prefixes between/around audio prefixes for image-only blocks
|
|
if (sortedAudioPrefixes.length > 0) {
|
|
const chapters = new Set(sortedAudioPrefixes.map(p => parseInt(p.split(".")[0])));
|
|
for (const ch of chapters) {
|
|
// Check sub-indices 1 through 50 for this chapter
|
|
for (let sub = 1; sub <= 50; sub++) {
|
|
allSortKeys.add(`${ch}.${sub}`);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Try to fetch images for all potential sort keys
|
|
const projectName = manifest.title ? manifest.title.replace(/[^a-zA-Z0-9_\- ]/g, "") : "book";
|
|
|
|
for (const sortKey of Array.from(allSortKeys).sort((a, b) => {
|
|
const [aMaj, aMin] = a.split(".").map(Number);
|
|
const [bMaj, bMin] = b.split(".").map(Number);
|
|
return aMaj !== bMaj ? aMaj - bMaj : aMin - bMin;
|
|
})) {
|
|
// Try fetching image files: book/{sortKey}_img0.{ext}
|
|
for (const ext of imgExts) {
|
|
try {
|
|
const imgUrl = `book/${sortKey}_img0.${ext}`;
|
|
const imgResp = await fetch(imgUrl, { method: "HEAD" });
|
|
if (imgResp.ok) {
|
|
if (!imageMap.has(sortKey)) imageMap.set(sortKey, []);
|
|
imageMap.get(sortKey).push(imgUrl);
|
|
break; // Found one format, skip others
|
|
}
|
|
} catch (e) { /* ignore */ }
|
|
}
|
|
}
|
|
|
|
// Now build final ordered list
|
|
const finalSortKeys = new Set([...audioPrefixSet, ...imageMap.keys()]);
|
|
const sortedFinalKeys = Array.from(finalSortKeys).sort((a, b) => {
|
|
const [aMaj, aMin] = a.split(".").map(Number);
|
|
const [bMaj, bMin] = b.split(".").map(Number);
|
|
return aMaj !== bMaj ? aMaj - bMaj : aMin - bMin;
|
|
});
|
|
|
|
currentBookId = audioAssets.map(a => a.prefix).join("|");
|
|
|
|
let audioInstanceIndex = 0;
|
|
let lastChapter = null;
|
|
|
|
for (const sortKey of sortedFinalKeys) {
|
|
const chapter = sortKey.split(".")[0];
|
|
const isAudio = audioPrefixSet.has(sortKey);
|
|
const hasImages = imageMap.has(sortKey);
|
|
|
|
if (isAudio) {
|
|
// Find matching audio asset
|
|
const asset = audioAssets.find(a => a.prefix.startsWith(sortKey + "_"));
|
|
if (!asset) continue;
|
|
|
|
if (chapter !== lastChapter) {
|
|
const li = document.createElement("li");
|
|
const a = document.createElement("a");
|
|
a.href = `#story-block-${audioInstanceIndex}`;
|
|
a.textContent = chapter;
|
|
a.dataset.chapter = chapter;
|
|
li.appendChild(a);
|
|
storyNavList.appendChild(li);
|
|
lastChapter = chapter;
|
|
}
|
|
|
|
mainContainer.insertAdjacentHTML("beforeend",
|
|
`<div id="story-block-${audioInstanceIndex}" class="story-block mt-4" data-instance-index="${audioInstanceIndex}" data-sort-key="${sortKey}">
|
|
<div class="image-container text-center mb-4"></div>
|
|
<div class="loading-indicator text-center p-5"><div class="spinner-border"></div></div>
|
|
<audio class="audio-player" style="display:none;"></audio>
|
|
<article class="story-text-container" style="display:none;"></article>
|
|
</div>`
|
|
);
|
|
|
|
// Show images for this audio block if any
|
|
if (hasImages) {
|
|
const block = document.getElementById(`story-block-${audioInstanceIndex}`);
|
|
const imgContainer = block.querySelector(".image-container");
|
|
for (const imgUrl of imageMap.get(sortKey)) {
|
|
const img = document.createElement("img");
|
|
img.src = imgUrl;
|
|
img.className = "img-fluid rounded shadow-sm";
|
|
img.style.maxHeight = "60vh";
|
|
imgContainer.appendChild(img);
|
|
}
|
|
}
|
|
|
|
audioInstanceIndex++;
|
|
|
|
} else if (hasImages && !isAudio) {
|
|
// Image-only block
|
|
if (chapter !== lastChapter) {
|
|
const nearestAudioIdx = Math.max(0, audioInstanceIndex - 1);
|
|
const li = document.createElement("li");
|
|
const a = document.createElement("a");
|
|
a.href = `#story-block-${nearestAudioIdx}`;
|
|
a.textContent = chapter;
|
|
a.dataset.chapter = chapter;
|
|
li.appendChild(a);
|
|
storyNavList.appendChild(li);
|
|
lastChapter = chapter;
|
|
}
|
|
|
|
const imgDiv = document.createElement("div");
|
|
imgDiv.className = "story-image-block mt-4";
|
|
for (const imgUrl of imageMap.get(sortKey)) {
|
|
const img = document.createElement("img");
|
|
img.src = imgUrl;
|
|
img.className = "img-fluid rounded shadow-sm";
|
|
img.style.maxHeight = "70vh";
|
|
imgDiv.appendChild(img);
|
|
}
|
|
mainContainer.appendChild(imgDiv);
|
|
}
|
|
}
|
|
|
|
storyNav.classList.add("visible");
|
|
floatingPlayerBtn.classList.add("visible");
|
|
|
|
// Create player instances for audio blocks
|
|
storyInstances = await Promise.all(
|
|
audioAssets.map(async (asset, index) => {
|
|
const block = document.getElementById(`story-block-${index}`);
|
|
const [text, timestamps] = await Promise.all([
|
|
fetch(asset.textFile).then(r => r.text()),
|
|
fetch(asset.jsonFile).then(r => r.json())
|
|
]);
|
|
return createStoryPlayer(block, { text, timestamps, audioUrl: asset.audioFile }, index);
|
|
})
|
|
);
|
|
|
|
loadProgress(currentBookId);
|
|
setupNavObserver();
|
|
setTimeout(positionUI, 100);
|
|
|
|
} catch (e) {
|
|
mainContainer.innerHTML = `<p class="text-center text-danger">Error loading: ${e.message}</p>`;
|
|
}
|
|
|
|
function setupNavObserver() {
|
|
if (navObserver) navObserver.disconnect();
|
|
navObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const sk = entry.target.dataset.sortKey;
|
|
if (sk) {
|
|
const ch = sk.split(".")[0];
|
|
storyNavList.querySelectorAll("a").forEach(l => l.classList.remove("active"));
|
|
const al = storyNavList.querySelector(`a[data-chapter='${ch}']`);
|
|
if (al) al.classList.add("active");
|
|
}
|
|
}
|
|
});
|
|
}, { threshold: 0.4 });
|
|
document.querySelectorAll(".story-block").forEach(b => navObserver.observe(b));
|
|
}
|
|
|
|
function createStoryPlayer(storyBlock, data, instanceIndex) {
|
|
const audioPlayer = storyBlock.querySelector(".audio-player");
|
|
const storyContainer = storyBlock.querySelector(".story-text-container");
|
|
let wordTimestamps = data.timestamps, sentenceData = [], allWordSpans = [], wordMap = [];
|
|
let animationFrameId = null, lastW = null, lastSS = [];
|
|
|
|
audioPlayer.src = data.audioUrl;
|
|
renderMd(data.text);
|
|
smartSync();
|
|
storyBlock.querySelector(".loading-indicator").style.display = "none";
|
|
storyContainer.style.display = "block";
|
|
|
|
audioPlayer.addEventListener("play", () => { startLoop(); updateFloatingButton("playing"); });
|
|
audioPlayer.addEventListener("pause", () => { stopLoop(); updateFloatingButton("paused"); saveCurrentProgress(); });
|
|
audioPlayer.addEventListener("ended", () => { stopLoop(); clearHL(); playNextInstance(); });
|
|
|
|
function renderMd(text) {
|
|
storyContainer.innerHTML = ""; allWordSpans = [];
|
|
const div = document.createElement("div");
|
|
div.innerHTML = marked.parse(text, { breaks: true, gfm: true });
|
|
function proc(n) {
|
|
if (n.nodeType === Node.TEXT_NODE) {
|
|
const ws = n.textContent.split(/(\s+)/); const f = document.createDocumentFragment();
|
|
ws.forEach(p => { if (p.trim().length > 0) { const s = document.createElement("span"); s.className = "word"; s.textContent = p; allWordSpans.push(s); f.appendChild(s); } else f.appendChild(document.createTextNode(p)); });
|
|
n.parentNode.replaceChild(f, n);
|
|
} else if (n.nodeType === Node.ELEMENT_NODE) Array.from(n.childNodes).forEach(proc);
|
|
}
|
|
proc(div); while (div.firstChild) storyContainer.appendChild(div.firstChild);
|
|
}
|
|
|
|
function smartSync() {
|
|
wordMap = new Array(allWordSpans.length).fill(undefined); let ai = 0;
|
|
allWordSpans.forEach((s, i) => { const tw = s.textContent.toLowerCase().replace(/[^\w]/g, ""); for (let o = 0; o < 5; o++) { if (ai + o >= wordTimestamps.length) break; if (tw === wordTimestamps[ai + o].word.toLowerCase().replace(/[^\w]/g, "")) { wordMap[i] = ai + o; ai += o + 1; return; } } });
|
|
sentenceData = []; let buf = [], si = 0;
|
|
allWordSpans.forEach((s, i) => { buf.push(s); if (/[.!?]["'\u201D\u2019]?$/.test(s.textContent.trim())) { let sT = 0, eT = 0; for (let k = si; k <= i; k++) if (wordMap[k] !== undefined) { sT = wordTimestamps[wordMap[k]].start; break; } for (let k = i; k >= si; k--) if (wordMap[k] !== undefined) { eT = wordTimestamps[wordMap[k]].end; break; } if (eT > sT) sentenceData.push({ spans: [...buf], startTime: sT, endTime: eT }); buf = []; si = i + 1; } });
|
|
if (buf.length > 0) { let sT = 0, eT = 0; for (let k = si; k < allWordSpans.length; k++) if (wordMap[k] !== undefined) { sT = wordTimestamps[wordMap[k]].start; break; } for (let k = allWordSpans.length - 1; k >= si; k--) if (wordMap[k] !== undefined) { eT = wordTimestamps[wordMap[k]].end; break; } if (eT > sT) sentenceData.push({ spans: [...buf], startTime: sT, endTime: eT }); }
|
|
}
|
|
|
|
function hlLoop() {
|
|
if (audioPlayer.paused) return; const t = audioPlayer.currentTime;
|
|
const ai = wordTimestamps.findIndex(w => t >= w.start && t < w.end);
|
|
if (ai !== -1) { const ti = wordMap.findIndex(i => i === ai); if (ti !== -1) { const sp = allWordSpans[ti]; if (sp !== lastW) { if (lastW) lastW.classList.remove("current-word"); sp.classList.add("current-word"); const r = sp.getBoundingClientRect(); if (r.top < window.innerHeight * 0.3 || r.bottom > window.innerHeight * 0.7) sp.scrollIntoView({ behavior: "smooth", block: "center" }); lastW = sp; } } }
|
|
const sent = sentenceData.find(s => t >= s.startTime && t <= s.endTime);
|
|
if (sent && sent.spans !== lastSS) { lastSS.forEach(s => s.classList.remove("current-sentence-bg")); sent.spans.forEach(s => s.classList.add("current-sentence-bg")); lastSS = sent.spans; }
|
|
animationFrameId = requestAnimationFrame(hlLoop);
|
|
}
|
|
function clearHL() { if (lastW) lastW.classList.remove("current-word"); lastSS.forEach(s => s.classList.remove("current-sentence-bg")); lastW = null; lastSS = []; }
|
|
function startLoop() { cancelAnimationFrame(animationFrameId); animationFrameId = requestAnimationFrame(hlLoop); }
|
|
function stopLoop() { cancelAnimationFrame(animationFrameId); }
|
|
|
|
return {
|
|
play: () => audioPlayer.play(), pause: () => audioPlayer.pause(),
|
|
playAt: (t) => { audioPlayer.currentTime = t; audioPlayer.play(); },
|
|
stopAndReset: () => { audioPlayer.pause(); audioPlayer.currentTime = 0; clearHL(); },
|
|
getAudioElement: () => audioPlayer,
|
|
getTimeForSpan: (span) => { const i = allWordSpans.indexOf(span); const ai = wordMap[i]; return ai !== undefined ? wordTimestamps[ai].start : null; },
|
|
isReady: () => Promise.resolve()
|
|
};
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|