हिंदी Page Reader auto Scroll: select text to start reading
🔊
हिंदी में सुनिए
यह एक उदाहरण अनुच्छेद है।
यह वाक्य हिंदी में पढ़ा जाएगा।
Code:
Html:
<!-- 📱 Media query -->
<style>
@media screen and (max-width: 768px) {
#smartReaderBtn {
right: 25px !important;
top: 40px !important;
}
}
</style>
<!--✅ Speaker Icon Button-->
<div id="smartReaderBtn" onclick="toggleSmartReader()" style="align-items: center; background-color: #ff9900; border-radius: 50%; border: 2px solid white; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px; color: white; cursor: pointer; display: flex; padding: 10px; position: fixed; right: 100px; top: 80px; z-index: 999;">
<span style="font-size: 24px; margin-right: 5px;">🔊</span>
<span id="smartReaderLabel" style="font-size: 16px;">हिंदी में सुनिए</span>
</div>
<!--✅ Main Content Area-->
<div class="post-body">
<p>यह एक उदाहरण अनुच्छेद है।</p>
<p>यह वाक्य हिंदी में पढ़ा जाएगा।</p>
</div>
JS:
<!--✅ Smart Voice Script-->
<!-- Reading: emoji -->
<!-- Not Reading: symbol, special carector, brackets, -->
<script>
let smartQueue = [];
let currentIndex = 0;
let isReading = false;
let isPaused = false;
let wakeLock = null;
// ✅ Toggle Start / Pause / Resume
function toggleSmartReader() {
if (!isReading && !isPaused) {
startSmartReader();
} else if (isReading) {
pauseSmartReader();
} else if (isPaused) {
showRestartPrompt();
}
}
// ✅ Start Reading
function startSmartReader() {
const content = document.querySelector(".post-body");
if (!content) {
alert("❌ Content not found.");
return;
}
smartQueue = Array.from(
content.querySelectorAll('p, li, td, th, h1, h2, h3, h4, h5, h6, span, b, strong, em, i, u, div')
).filter(el => {
const text = el.innerText.trim();
const isInsideButton = el.closest('#smartReaderBtn') !== null;
return text.length > 0 && text.length < 300 && !isInsideButton;
});
if (smartQueue.length === 0) {
alert("❌ No readable sections.");
return;
}
currentIndex = 0;
isReading = true;
isPaused = false;
updateButtonUI("reading");
requestWakeLock();
readNextLine();
}
// ✅ Read Element by Element
function readNextLine() {
if (currentIndex >= smartQueue.length) {
stopSmartReader();
return;
}
const el = smartQueue[currentIndex];
const text = el.innerText.trim();
currentIndex++;
smartQueue.forEach(e => e.style.backgroundColor = "");
el.style.backgroundColor = "lightskyblue";
el.scrollIntoView({ behavior: "smooth", block: "center" });
document.getElementById("smartReaderBtn").style.backgroundColor = "lightskyblue";
window.speechSynthesis.cancel();
const speak = new SpeechSynthesisUtterance(text);
speak.lang = "hi-IN";
speak.rate = 0.79;
speak.pitch = 1;
speak.volume = 1;
speak.onend = () => {
if (isReading) {
setTimeout(readNextLine, 400);
}
};
window.speechSynthesis.speak(speak);
}
// ✅ Pause and Ask
function pauseSmartReader() {
window.speechSynthesis.cancel();
isReading = false;
isPaused = true;
releaseWakeLock();
updateButtonUI("paused");
setTimeout(() => {
const choose = confirm("📍 Select start point to restart reading?\n\nOK = Scroll and select\nCancel = Return to the page");
if (!choose) {
smartQueue.forEach(e => e.style.backgroundColor = "");
isPaused = false;
updateButtonUI("default");
} else {
alert("🔎 Scroll to a new point. Then click the button again.");
}
}, 200);
}
// ✅ Restart After Scroll
function showRestartPrompt() {
const visibleElement = smartQueue.find(el => {
const rect = el.getBoundingClientRect();
return rect.top > 0 && rect.top < window.innerHeight;
});
if (visibleElement) {
currentIndex = smartQueue.indexOf(visibleElement);
} else {
currentIndex = 0;
}
setTimeout(() => {
const resume = confirm("✅ Start reading from selected point?\n\nOK = Start Reading\nCancel = Return to page");
if (resume) {
isPaused = false;
isReading = true;
updateButtonUI("reading");
requestWakeLock();
readNextLine();
} else {
smartQueue.forEach(e => e.style.backgroundColor = "");
isPaused = false;
updateButtonUI("default");
}
}, 100);
}
// ✅ Stop All
function stopSmartReader() {
isReading = false;
isPaused = false;
currentIndex = 0;
smartQueue.forEach(e => e.style.backgroundColor = "");
updateButtonUI("default");
releaseWakeLock();
window.speechSynthesis.cancel();
}
// ✅ Button UI Updates
function updateButtonUI(state) {
const btn = document.getElementById("smartReaderBtn");
const label = document.getElementById("smartReaderLabel");
if (state === "reading") {
btn.style.backgroundColor = "lightskyblue";
label.textContent = "Reading is in progress";
} else if (state === "paused") {
btn.style.backgroundColor = "#f0ad4e";
label.textContent = "Read Again";
} else {
btn.style.backgroundColor = "#ff9900";
label.textContent = "Listen";
}
}
// ✅ Wake Lock Request
async function requestWakeLock() {
if ('wakeLock' in navigator) {
try {
wakeLock = await navigator.wakeLock.request('screen');
console.log("✅ Wake Lock activated");
} catch (err) {
console.warn("❌ Wake Lock failed:", err.name, err.message);
alert(`❌ Wake Lock failed: ${err.message}`);
}
} else {
console.warn("❌ Wake Lock not supported in this browser.");
alert("❌ Wake Lock not supported in this browser.");
}
}
// ✅ Wake Lock Release
async function releaseWakeLock() {
try {
if (wakeLock !== null) {
await wakeLock.release();
wakeLock = null;
console.log("🔓 Wake Lock released");
}
} catch (err) {
console.warn("❌ Wake Lock release failed:", err.name, err.message);
}
}
// ✅ Reacquire Wake Lock on Return
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === "visible" && isReading) {
requestWakeLock();
}
});
</script>
यह वाक्य हिंदी में पढ़ा जाएगा।
Comments
Post a Comment