LightNovelPub TTS

Text to speech chapter in LightNovelPub.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         LightNovelPub TTS
// @namespace    https://xgorn.com
// @version      0.0.2
// @description  Text to speech chapter in LightNovelPub.
// @author       Noid
// @match        https://lightnovelpub.org/novel/*/chapter/*/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=lightnovelpub.org
// @grant        none
// @license      MIT
// ==/UserScript==

/* jshint esversion: 6 */

// ENV

const deflang = 'Google Bahasa Indonesia'; // set language
const ttsSpeedRate = 1.4;

// voice lists

/*
Microsoft David - English (United States)
Microsoft Mark - English (United States)
Microsoft Zira - English (United States)
Google Deutsch
Google US English
Google UK English Female
Google UK English Male
Google español
Google español de Estados Unidos
Google français
Google हिन्दी
Google Bahasa Indonesia
Google italiano
Google 日本語
Google 한국의
Google Nederlands
Google polski
Google português do Brasil
Google русский
Google 普通话（中国大陆）
Google 粤語（香港）
Google 國語（臺灣）
*/

const paragraphs = [...document.querySelectorAll('.chapter-content p')];
let currentIndex = 0;
let currentHighlighted = null;
let isReading = false;
let stopRequested = false;

const headerActions = document.querySelector('.header-actions');
if (!headerActions) return;

const button = document.createElement('button');
button.className = 'tts-btn';
button.title = 'Text to Speech';

button.innerHTML = `
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
            <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
            <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
        </svg>
    `;

const style = document.createElement('style');
style.textContent = `.tts-btn {
    background: rgba(74, 158, 255, 0.2);
    border: 1px solid rgba(74, 158, 255, 0.3);
    border-radius: 8px;
    padding: 0.75rem;
    color: #4a9eff;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tts-btn svg
 {
    width: 20px;
    height: 20px;
}
`


function getVoice({
    name = null,
    lang = null,
    keyword = null
} = {}) {

    const voices = speechSynthesis.getVoices();

    if (name) {
        const voice = voices.find(v => v.name === name);
        if (voice) return voice;
    }

    if (lang) {
        const voice = voices.find(v => v.lang.startsWith(lang));
        if (voice) return voice;
    }

    if (keyword) {
        const voice = voices.find(v =>
            v.name.toLowerCase().includes(keyword.toLowerCase())
        );
        if (voice) return voice;
    }

    return voices[0] || null;
}


function clearHighlight() {
    if (currentHighlighted) {
        currentHighlighted.style = 'margin-bottom:0.6em;';
        currentHighlighted = null;
    }
};

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}


async function speakFrom(startIndex) {
    stopRequested = false;
    isReading = true;

    button.textContent = "■";

    clearHighlight();
    speechSynthesis.cancel();

    for (let i = startIndex; i < paragraphs.length; i++) {

        if (stopRequested) {
            return;
        }

        const chapterElement = paragraphs[i];

        await new Promise(async resolve => {

            const utterance = new SpeechSynthesisUtterance(
                chapterElement.textContent
            );

            utterance.rate = ttsSpeedRate;
            utterance.voice = getVoice({ name: deflang });

            utterance.onstart = () => {
                clearHighlight();

                currentHighlighted = chapterElement;

                chapterElement.scrollIntoView({ behavior: "smooth", block: "center" });

                chapterElement.style =
                    'margin-bottom:0.6em;border-radius:8px;background-color:rgba(74,158,255,.3);border:1px solid rgba(74,158,255,.3);padding:0.75rem';
            };

            utterance.onend = () => {
                chapterElement.style = 'margin-bottom:0.6em;';
                resolve();
            };
            await sleep(2000); // wait before speaking

            if (stopRequested) {
                resolve();
                return;
            }
            speechSynthesis.speak(utterance);
        });

        if (stopRequested) {
            return;
        }
    }

    isReading = false;

    button.innerHTML = `
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
            <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
            <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
        </svg>
    `;
}

button.addEventListener('click', async () => {
    if (isReading) {
        stopReading();
        return;
    }
    await speakFrom(0);
});


window.addEventListener('mouseup', async () => {
    const selection = window.getSelection();

    if (!selection || selection.toString().trim().length < 2) {
        return;
    }

    let node = selection.anchorNode;

    if (!node) return;

    if (node.nodeType === Node.TEXT_NODE) {
        node = node.parentElement;
    }

    const paragraph = node.closest('.chapter-content p');

    if (!paragraph) return;

    const index = paragraphs.indexOf(paragraph);

    if (index === -1) return;

    await speakFrom(index);
});


function stopReading() {
    stopRequested = true;
    isReading = false;

    speechSynthesis.cancel();
    clearHighlight();

    button.innerHTML = `
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
            <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
            <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
        </svg>
    `;
}


headerActions.appendChild(button);
document.head.appendChild(style);