613 lines
29 KiB
HTML
Executable File
613 lines
29 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;
|
|
}
|
|
#load-folder-btn {
|
|
background-image: linear-gradient(45deg, #3d4e81 0%, #5753c9 50%, #6e78da 100%);
|
|
background-size: 200% auto; border: none; transition: all 0.4s ease-in-out !important;
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
|
|
}
|
|
#load-folder-btn:hover { background-position: right center; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.25); }
|
|
|
|
.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; }
|
|
|
|
/* Image blocks in reader */
|
|
.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 Button - TOP RIGHT adjacent to content */
|
|
#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 ease-out, opacity 0.3s ease-out, width 0.3s ease, padding 0.3s ease, border-radius 0.3s ease;
|
|
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%; }
|
|
|
|
/* Navigation - LEFT SIDEBAR adjacent to content */
|
|
#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-title { font-size: 2rem; }
|
|
.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">Select your assets folder to begin.</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 class="text-center" id="loader-section">
|
|
<p>Please select the folder containing your files (e.g., the 'book' folder).</p>
|
|
<input type="file" id="folder-input" webkitdirectory directory multiple style="display:none;" />
|
|
<button id="load-folder-btn" class="btn btn-dark btn-lg">Select a Folder</button>
|
|
<div id="info-alert" class="alert mt-4" style="display:none;"></div>
|
|
</div>
|
|
|
|
<div id="stories-main-container" class="d-none"></div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const mainContainer = document.getElementById("stories-main-container");
|
|
const mainContentCard = document.getElementById("main-content");
|
|
const folderInput = document.getElementById("folder-input");
|
|
const loadFolderBtn = document.getElementById("load-folder-btn");
|
|
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;
|
|
const PROGRESS_KEY = "interactiveReaderProgress";
|
|
|
|
loadFolderBtn.addEventListener("click", () => folderInput.click());
|
|
folderInput.addEventListener("change", handleFolderSelection);
|
|
mainContainer.addEventListener("click", handleTextClick);
|
|
floatingPlayerBtn.addEventListener("click", handleFloatingBtnClick);
|
|
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;
|
|
const navLeft = rect.left - navWidth - 8;
|
|
storyNav.style.left = Math.max(navLeft, 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");
|
|
}
|
|
}
|
|
|
|
function handleFolderSelection(event) {
|
|
const files = event.target.files;
|
|
if (files.length === 0) return;
|
|
|
|
// Categorize all files by their numeric prefix (e.g., "1.1_")
|
|
const allItemsMap = new Map(); // prefix -> { audioFile, textFile, jsonFile, imageFiles: [] }
|
|
|
|
for (const file of files) {
|
|
const name = file.name;
|
|
const ext = name.split(".").pop().toLowerCase();
|
|
|
|
// Match files like "1.1_something.ext"
|
|
const prefixMatch = name.match(/^([\d]+\.[\d]+)_/);
|
|
if (!prefixMatch) continue;
|
|
|
|
const sortKey = prefixMatch[1]; // e.g., "1.1"
|
|
|
|
if (!allItemsMap.has(sortKey)) {
|
|
allItemsMap.set(sortKey, { audioFile: null, textFile: null, jsonFile: null, imageFiles: [] });
|
|
}
|
|
const entry = allItemsMap.get(sortKey);
|
|
|
|
if (["wav", "mp3"].includes(ext)) entry.audioFile = file;
|
|
else if (ext === "txt") entry.textFile = file;
|
|
else if (ext === "json") entry.jsonFile = file;
|
|
else if (["jpg", "jpeg", "png", "gif", "webp"].includes(ext)) entry.imageFiles.push(file);
|
|
}
|
|
|
|
// Sort all entries by their numeric prefix
|
|
const sortedEntries = Array.from(allItemsMap.entries())
|
|
.sort(([a], [b]) => {
|
|
const [aMaj, aMin] = a.split(".").map(Number);
|
|
const [bMaj, bMin] = b.split(".").map(Number);
|
|
return aMaj !== bMaj ? aMaj - bMaj : aMin - bMin;
|
|
});
|
|
|
|
// Build ordered list of items: each is either { type: 'audio', ... } or { type: 'image', ... }
|
|
const orderedItems = [];
|
|
for (const [sortKey, entry] of sortedEntries) {
|
|
if (entry.audioFile && entry.textFile && entry.jsonFile) {
|
|
// Audio block — may also have associated images
|
|
orderedItems.push({
|
|
type: "audio",
|
|
sortKey,
|
|
audioFile: entry.audioFile,
|
|
textFile: entry.textFile,
|
|
jsonFile: entry.jsonFile,
|
|
imageFiles: entry.imageFiles
|
|
});
|
|
} else if (entry.imageFiles.length > 0) {
|
|
// Image-only block
|
|
orderedItems.push({
|
|
type: "image",
|
|
sortKey,
|
|
imageFiles: entry.imageFiles
|
|
});
|
|
}
|
|
}
|
|
|
|
const audioItems = orderedItems.filter(i => i.type === "audio");
|
|
if (audioItems.length === 0) {
|
|
document.getElementById("info-alert").textContent = "No valid story parts found. Ensure files have matching .txt, .json, and audio files.";
|
|
document.getElementById("info-alert").style.display = "block";
|
|
return;
|
|
}
|
|
|
|
currentBookId = audioItems.map(i => i.sortKey).join("|");
|
|
document.getElementById("loader-section").style.display = "none";
|
|
document.getElementById("main-header").querySelector(".story-subtitle").textContent = "An interactive reading experience.";
|
|
mainContainer.classList.remove("d-none");
|
|
mainContainer.innerHTML = "";
|
|
storyNavList.innerHTML = "";
|
|
resumeAlert.style.display = "none";
|
|
|
|
// Build DOM blocks — audio blocks get story-block class, image blocks get image-only rendering
|
|
let audioInstanceIndex = 0;
|
|
let lastChapter = null;
|
|
|
|
orderedItems.forEach((item, globalIdx) => {
|
|
const chapter = item.sortKey.split(".")[0];
|
|
|
|
if (item.type === "audio") {
|
|
// Add chapter nav entry if new chapter
|
|
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;
|
|
}
|
|
|
|
const html = `<div id="story-block-${audioInstanceIndex}" class="story-block mt-4" data-instance-index="${audioInstanceIndex}" data-sort-key="${item.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>`;
|
|
mainContainer.insertAdjacentHTML("beforeend", html);
|
|
audioInstanceIndex++;
|
|
|
|
} else if (item.type === "image") {
|
|
// Render image block directly
|
|
const imgDiv = document.createElement("div");
|
|
imgDiv.className = "story-image-block mt-4";
|
|
imgDiv.dataset.sortKey = item.sortKey;
|
|
for (const imgFile of item.imageFiles) {
|
|
const img = document.createElement("img");
|
|
img.src = URL.createObjectURL(imgFile);
|
|
img.className = "img-fluid rounded shadow-sm";
|
|
img.style.maxHeight = "70vh";
|
|
imgDiv.appendChild(img);
|
|
}
|
|
mainContainer.appendChild(imgDiv);
|
|
|
|
// Chapter nav for image-only items too
|
|
if (chapter !== lastChapter) {
|
|
const prevAudioBlock = mainContainer.querySelector(".story-block:last-of-type");
|
|
if (!prevAudioBlock) {
|
|
// No audio block yet for this chapter, still add nav
|
|
const li = document.createElement("li");
|
|
const a = document.createElement("a");
|
|
a.href = `#story-block-0`;
|
|
a.textContent = chapter;
|
|
a.dataset.chapter = chapter;
|
|
li.appendChild(a);
|
|
storyNavList.appendChild(li);
|
|
}
|
|
lastChapter = chapter;
|
|
}
|
|
}
|
|
});
|
|
|
|
storyNav.classList.add("visible");
|
|
floatingPlayerBtn.classList.add("visible");
|
|
|
|
// Create story player instances only for audio blocks
|
|
storyInstances = [];
|
|
let instIdx = 0;
|
|
for (const item of orderedItems) {
|
|
if (item.type !== "audio") continue;
|
|
const block = document.getElementById(`story-block-${instIdx}`);
|
|
|
|
// Show associated images inside the audio block's image container
|
|
if (item.imageFiles && item.imageFiles.length > 0) {
|
|
const imgContainer = block.querySelector(".image-container");
|
|
for (const imgFile of item.imageFiles) {
|
|
const img = document.createElement("img");
|
|
img.src = URL.createObjectURL(imgFile);
|
|
img.className = "img-fluid rounded shadow-sm";
|
|
img.style.maxHeight = "60vh";
|
|
imgContainer.appendChild(img);
|
|
}
|
|
}
|
|
|
|
storyInstances.push(createStoryPlayer(block, item, instIdx));
|
|
instIdx++;
|
|
}
|
|
|
|
Promise.all(storyInstances.map(i => i.isReady())).then(() => {
|
|
loadProgress(currentBookId);
|
|
positionUI();
|
|
});
|
|
setupNavObserver();
|
|
setTimeout(positionUI, 100);
|
|
}
|
|
|
|
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, item, instanceIndex) {
|
|
const audioPlayer = storyBlock.querySelector(".audio-player");
|
|
const storyContainer = storyBlock.querySelector(".story-text-container");
|
|
let wordTimestamps = [];
|
|
let sentenceData = [];
|
|
let allWordSpans = [];
|
|
let wordMap = [];
|
|
let animationFrameId = null;
|
|
let lastHighlightedWordSpan = null;
|
|
let lastHighlightedSentenceSpans = [];
|
|
|
|
const readyPromise = new Promise(async (resolve) => {
|
|
const readFile = (f) => new Promise((res, rej) => {
|
|
const r = new FileReader();
|
|
r.onload = () => res(r.result);
|
|
r.onerror = rej;
|
|
r.readAsText(f);
|
|
});
|
|
|
|
const [text, json] = await Promise.all([readFile(item.textFile), readFile(item.jsonFile)]);
|
|
wordTimestamps = JSON.parse(json);
|
|
audioPlayer.src = URL.createObjectURL(item.audioFile);
|
|
|
|
renderMarkdown(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(); clearAllHighlights(); playNextInstance(); });
|
|
|
|
resolve();
|
|
});
|
|
|
|
function renderMarkdown(text) {
|
|
storyContainer.innerHTML = "";
|
|
allWordSpans = [];
|
|
const div = document.createElement("div");
|
|
div.innerHTML = marked.parse(text, { breaks: true, gfm: true });
|
|
|
|
function processNode(node) {
|
|
if (node.nodeType === Node.TEXT_NODE) {
|
|
const words = node.textContent.split(/(\s+)/);
|
|
const fragment = document.createDocumentFragment();
|
|
words.forEach(part => {
|
|
if (part.trim().length > 0) {
|
|
const span = document.createElement("span");
|
|
span.className = "word";
|
|
span.textContent = part;
|
|
allWordSpans.push(span);
|
|
fragment.appendChild(span);
|
|
} else {
|
|
fragment.appendChild(document.createTextNode(part));
|
|
}
|
|
});
|
|
node.parentNode.replaceChild(fragment, node);
|
|
} else if (node.nodeType === Node.ELEMENT_NODE) {
|
|
Array.from(node.childNodes).forEach(processNode);
|
|
}
|
|
}
|
|
processNode(div);
|
|
while (div.firstChild) storyContainer.appendChild(div.firstChild);
|
|
}
|
|
|
|
function smartSync() {
|
|
wordMap = new Array(allWordSpans.length).fill(undefined);
|
|
let aiIdx = 0;
|
|
allWordSpans.forEach((span, i) => {
|
|
const textWord = span.textContent.toLowerCase().replace(/[^\w]/g, "");
|
|
for (let off = 0; off < 5; off++) {
|
|
if (aiIdx + off >= wordTimestamps.length) break;
|
|
const aiWord = wordTimestamps[aiIdx + off].word.toLowerCase().replace(/[^\w]/g, "");
|
|
if (textWord === aiWord) { wordMap[i] = aiIdx + off; aiIdx += off + 1; return; }
|
|
}
|
|
});
|
|
|
|
sentenceData = [];
|
|
let buffer = [], startIdx = 0;
|
|
allWordSpans.forEach((span, i) => {
|
|
buffer.push(span);
|
|
if (/[.!?]["'\u201D\u2019]?$/.test(span.textContent.trim())) {
|
|
let startT = 0, endT = 0;
|
|
for (let k = startIdx; k <= i; k++) if (wordMap[k] !== undefined) { startT = wordTimestamps[wordMap[k]].start; break; }
|
|
for (let k = i; k >= startIdx; k--) if (wordMap[k] !== undefined) { endT = wordTimestamps[wordMap[k]].end; break; }
|
|
if (endT > startT) sentenceData.push({ spans: [...buffer], startTime: startT, endTime: endT });
|
|
buffer = []; startIdx = i + 1;
|
|
}
|
|
});
|
|
if (buffer.length > 0) {
|
|
let startT = 0, endT = 0;
|
|
for (let k = startIdx; k < allWordSpans.length; k++) if (wordMap[k] !== undefined) { startT = wordTimestamps[wordMap[k]].start; break; }
|
|
for (let k = allWordSpans.length - 1; k >= startIdx; k--) if (wordMap[k] !== undefined) { endT = wordTimestamps[wordMap[k]].end; break; }
|
|
if (endT > startT) sentenceData.push({ spans: [...buffer], startTime: startT, endTime: endT });
|
|
}
|
|
}
|
|
|
|
function highlightLoop() {
|
|
if (audioPlayer.paused) return;
|
|
const t = audioPlayer.currentTime;
|
|
const aiIdx = wordTimestamps.findIndex(w => t >= w.start && t < w.end);
|
|
if (aiIdx !== -1) {
|
|
const tIdx = wordMap.findIndex(i => i === aiIdx);
|
|
if (tIdx !== -1) {
|
|
const sp = allWordSpans[tIdx];
|
|
if (sp !== lastHighlightedWordSpan) {
|
|
if (lastHighlightedWordSpan) lastHighlightedWordSpan.classList.remove("current-word");
|
|
sp.classList.add("current-word");
|
|
const rect = sp.getBoundingClientRect();
|
|
if (rect.top < window.innerHeight * 0.3 || rect.bottom > window.innerHeight * 0.7) sp.scrollIntoView({ behavior: "smooth", block: "center" });
|
|
lastHighlightedWordSpan = sp;
|
|
}
|
|
}
|
|
}
|
|
const sent = sentenceData.find(s => t >= s.startTime && t <= s.endTime);
|
|
if (sent && sent.spans !== lastHighlightedSentenceSpans) {
|
|
lastHighlightedSentenceSpans.forEach(s => s.classList.remove("current-sentence-bg"));
|
|
sent.spans.forEach(s => s.classList.add("current-sentence-bg"));
|
|
lastHighlightedSentenceSpans = sent.spans;
|
|
}
|
|
animationFrameId = requestAnimationFrame(highlightLoop);
|
|
}
|
|
|
|
function clearAllHighlights() {
|
|
if (lastHighlightedWordSpan) lastHighlightedWordSpan.classList.remove("current-word");
|
|
lastHighlightedSentenceSpans.forEach(s => s.classList.remove("current-sentence-bg"));
|
|
lastHighlightedWordSpan = null; lastHighlightedSentenceSpans = [];
|
|
}
|
|
function startLoop() { cancelAnimationFrame(animationFrameId); animationFrameId = requestAnimationFrame(highlightLoop); }
|
|
function stopLoop() { cancelAnimationFrame(animationFrameId); }
|
|
|
|
return {
|
|
play: () => audioPlayer.play(),
|
|
pause: () => audioPlayer.pause(),
|
|
playAt: (time) => { audioPlayer.currentTime = time; audioPlayer.play(); },
|
|
stopAndReset: () => { audioPlayer.pause(); audioPlayer.currentTime = 0; clearAllHighlights(); },
|
|
getAudioElement: () => audioPlayer,
|
|
getTimeForSpan: (span) => {
|
|
const idx = allWordSpans.indexOf(span);
|
|
const aiIdx = wordMap[idx];
|
|
return aiIdx !== undefined ? wordTimestamps[aiIdx].start : null;
|
|
},
|
|
isReady: () => readyPromise
|
|
};
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|