Read Aloud ChatGPT

Add "🗣️", "🀄", and "⏹️" buttons to read aloud elements with the "prose" class in English, Chinese, and to stop reading aloud respectively.

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

You will need to install an extension such as Tampermonkey to install this script.

Tendrás que instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Tendrás que instalar una extensión como Tampermonkey antes de poder instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Tendrás que instalar una extensión como Stylus antes de poder instalar este script.

Tendrás que instalar una extensión como Stylus antes de poder instalar este script.

Tendrás que instalar una extensión como Stylus antes de poder instalar este script.

Para poder instalar esto tendrás que instalar primero una extensión de estilos de usuario.

Para poder instalar esto tendrás que instalar primero una extensión de estilos de usuario.

Para poder instalar esto tendrás que instalar primero una extensión de estilos de usuario.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

// ==UserScript==
// @name         Read Aloud ChatGPT
// @namespace    http://tampermonkey.net/
// @version      1.6
// @description  Add "🗣️", "🀄", and "⏹️" buttons to read aloud elements with the "prose" class in English, Chinese, and to stop reading aloud respectively.
// @author       Hillman Being
// @match        https://chat.openai.com/*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    let synth = window.speechSynthesis;
    let voices = [];
    let voiceIndex = {};
    let processedElements = new Set();

    function populateVoiceList() {
        voices = synth.getVoices();

        for (let i = 0; i < voices.length; i++) {
            voiceIndex[voices[i].lang] = i;
        }
    }

    if (speechSynthesis.onvoiceschanged !== undefined) {
        speechSynthesis.onvoiceschanged = populateVoiceList;
    }

    // Function to create a speech button with the given text content and language
    function createSpeechButton(textContent, lang) {
        const button = document.createElement('button');
        button.textContent = textContent;
        button.style.marginLeft = '8px';

        button.addEventListener('click', (event) => {
            event.stopPropagation();
            const proseElement = event.target.closest('.relative').querySelector('.prose');
            if (proseElement) {
                const text = proseElement.textContent;
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = lang;
                utterance.voice = voices[voiceIndex[lang]];
                synth.speak(utterance);
            }
        });

        return button;
    }

    // Function to create a stop button
    function createStopButton() {
        const button = document.createElement('button');
        button.textContent = '⏹️';
        button.style.marginLeft = '8px';

        button.addEventListener('click', (event) => {
            event.stopPropagation();
            synth.cancel();
        });

        return button;
    }

    // Function to add speech and stop buttons to elements with the "mt-2" class
    function addButtonToElements() {
        const elements = document.querySelectorAll('.mt-2');

        for (const element of elements) {
            if (!processedElements.has(element)) {
                processedElements.add(element);
                const englishSpeechButton = createSpeechButton('🗣️', 'en-US');
                const chineseSpeechButton = createSpeechButton('🀄', 'zh-CN');
                const stopButton = createStopButton();
                element.appendChild(englishSpeechButton);
                element.appendChild(chineseSpeechButton);
                element.appendChild(stopButton);
            }
        }
    }

    // Function to observe DOM changes and call addButtonToElements when necessary
    function observeDOMChanges() {
        const observer = new MutationObserver((mutations) => {
            let shouldAddButtons = false;

            for (const mutation of mutations) {
                if (mutation.type === 'childList') {
                    shouldAddButtons = true;
                    break;
                }
            }

            if (shouldAddButtons) {
                addButtonToElements();
            }
        });

        observer.observe(document.body, { childList: true, subtree: true });
    }

    addButtonToElements();
    observeDOMChanges();
})();