Greasy Fork is available in English.

OpenAI Chat Synthesize Interceptor with Advanced Icon Controls

Capture ChatGPT Synthesize API responses and add advanced playback controls with icons. Forked by Baldoe13 on community.openai.com. Original by Winkelmann.

// ==UserScript==
// @name         OpenAI Chat Synthesize Interceptor with Advanced Icon Controls
// @version      0.7
// @description  Capture ChatGPT Synthesize API responses and add advanced playback controls with icons. Forked by Baldoe13 on community.openai.com. Original by Winkelmann.
// @author       93andresen
// @match        https://chat.openai.com/*
// @match        https://chatgpt.com/*
// @grant        none
// @license      MIT
// @namespace    https://github.com/93andresen/Userscripts
// ==/UserScript==

(function () {
    'use strict';
    let audio = null;  // Global audio element
    let playPauseBtn;  // Global play/pause button

    const originalFetch = window.fetch;
    window.fetch = async function (url, options) {
        const response = await originalFetch.apply(this, arguments);
        if (url.startsWith('https://chat.openai.com/backend-api/synthesize')) {
            console.log('Intercepted Synthesize API request for URL:', url);
            try {
                const clone = response.clone();
                const arrayBuffer = await clone.arrayBuffer();
                const aacFile = new Blob([arrayBuffer], { type: 'audio/aac' });
                const fileUrl = URL.createObjectURL(aacFile);
                if (audio) {
                    audio.src = fileUrl;
                } else {
                    audio = new Audio(fileUrl);
                    createControls();
                }
                audio.play().catch(err => {
                    console.error('Audio playback error:', err);
                    playPauseBtn.innerHTML = '▶️'; // Change to Play icon on error
                }).then(() => {
                    if (audio) {
                        playPauseBtn.innerHTML = '⏸'; // Change to Pause icon
                        showControlsTemporarily(); // Show controls when audio starts playing
                    }
                });
            } catch (err) {
                console.error('Error processing audio:', err);
            }
        }
        return response;
    };

    function createControls() {
        const controlsDiv = document.createElement('div');
        controlsDiv.id = 'audioControls';
        controlsDiv.style.position = 'fixed';
        controlsDiv.style.top = '15px';
        controlsDiv.style.left = '50%';
        controlsDiv.style.transform = 'translateX(-50%)';
        controlsDiv.style.zIndex = '10000';
        controlsDiv.style.display = 'flex';
        controlsDiv.style.gap = '10px';
        controlsDiv.style.opacity = '0'; // Initially invisible
        controlsDiv.style.transition = 'opacity 0.5s ease'; // Smooth transition for opacity

        controlsDiv.onmouseover = function() {
            controlsDiv.style.opacity = '1';
        };

        controlsDiv.onmouseout = function() {
            controlsDiv.style.opacity = '0';
        };

        const startOverBtn = createButton('⏮', 'Start over', () => {
            audio.currentTime = 0;
            audio.play();
            playPauseBtn.innerHTML = '⏸';
        });

        playPauseBtn = createButton('▶️', 'Play/Pause', () => {
            if (audio.paused || audio.ended) {
                audio.play();
                playPauseBtn.innerHTML = '⏸';
            } else {
                audio.pause();
                playPauseBtn.innerHTML = '▶️';
            }
        });

        const rewindBtn = createButton('⏪', 'Rewind 10 seconds', () => {
            audio.currentTime = Math.max(0, audio.currentTime - 10);
            if (audio.paused) {
                audio.play();
                playPauseBtn.innerHTML = '⏸';
            }
        });

        const stopBtn = createButton('⏹', 'Stop', () => {
            audio.pause();
            audio.currentTime = 0;
            playPauseBtn.innerHTML = '▶️';
        });

        controlsDiv.appendChild(startOverBtn);
        controlsDiv.appendChild(rewindBtn);
        controlsDiv.appendChild(playPauseBtn);
        controlsDiv.appendChild(stopBtn);

        document.body.appendChild(controlsDiv);
        showControlsTemporarily();
    }

    function createButton(icon, title, action) {
        const button = document.createElement('button');
        button.innerHTML = icon;
        button.title = title;
        button.style.cursor = 'pointer';
        button.style.background = 'none';
        button.style.border = 'none';
        button.onclick = action;
        return button;
    }

    function showControlsTemporarily() {
        const controlsDiv = document.getElementById('audioControls');
        if (controlsDiv) {
            controlsDiv.style.opacity = '1';
            setTimeout(() => {
                if (!controlsDiv.matches(':hover')) {
                    controlsDiv.style.opacity = '0';
                }
            }, 2000);
        }
    }
})();