Read Aloud ChatGPT

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

Dovrai installare un'estensione come Tampermonkey, Greasemonkey o Violentmonkey per installare questo script.

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

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Userscripts per installare questo script.

Dovrai installare un'estensione come ad esempio Tampermonkey per installare questo script.

Dovrai installare un gestore di script utente per installare questo script.

(Ho già un gestore di script utente, lasciamelo installare!)

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

(Ho già un gestore di stile utente, lasciamelo installare!)

// ==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();
})();