OpenAI Text to Speech in Browser

Introduction

This program is implemented as a JavaScript Bookmarklet that uses OpenAI TTS API. It should work in any browser including Chrome, Edge and Firefox.

Using the Code

1. First, get API Key from Open AI https://platform.openai.com/account/api-keys.
2. Copy the code below to Notepad and replace "YOUR OPEN AI API KEY HERE" with your key.
3. Create a bookmark in your browser. (You can do this by dragging any URL to the Bookmark bar.)
4. Right click on the bookmark and click Edit. Change name to "Say it" and URL to the JavaScript below.
5. Select any text on the page and click Say it to hear it spoken to you.

javascript: (function () {

function TextToSpeech(s) {
    var sModelId = "tts-1-hd";
    var sVoiceId = "echo";
    var API_KEY = "YOUR OPEN AI API KEY HERE";

    ShowSpinner();

    var oHttp = new XMLHttpRequest();
    oHttp.open("POST", "https://api.openai.com/v1/audio/speech");
    oHttp.setRequestHeader("Accept", "audio/mpeg");
    oHttp.setRequestHeader("Content-Type", "application/json");
    oHttp.setRequestHeader("Authorization", "Bearer " + API_KEY);

    oHttp.onload = function () {
        if (oHttp.readyState === 4) {

            HideSpinner();

            var oBlob = new Blob([this.response], { "type": "audio/mpeg" });
            var audioURL = window.URL.createObjectURL(oBlob);
            var audio = new Audio();
            audio.src = audioURL;
            audio.play();
        }
    };

    var data = {
        model: sModelId,
        input: s,
        voice: sVoiceId
    };

    oHttp.responseType = "arraybuffer";
    oHttp.send(JSON.stringify(data));
}

function SpeakText(s) {
    var msg = new SpeechSynthesisUtterance(s);
    window.speechSynthesis.speak(msg);
}

function ShowSpinner() {
    var o = document.getElementById('spinnerContainer');
    if (o) return;

    var style = document.getElementById('SpinnerStyle');
    if (style == null) {
        var style = document.createElement("style");
        style.id = "SpinnerStyle";
        style.textContent = ".spinner-container { position: fixed; top: 50%;
        left: 50%; transform: translate(-50%, -50%); z-index: 9999;}"
                + ".spinner {border: 4px solid rgba(0, 0, 0, 0.1);
                border-left: 4px solid #3498db; border-radius: 50%; width: 40px;
                height: 40px; animation: spin 1s linear infinite;}"
                          + "@keyframes spin {0% {transform: rotate(0deg);}
                             100% {transform: rotate(360deg);}}";
        document.head.appendChild(style);
    }

    var c = document.createElement('div');
    c.id = 'spinnerContainer';
    c.classList.add('spinner-container');
    var s = document.createElement('div');
    s.classList.add('spinner');
    c.appendChild(s);
    document.body.appendChild(c);
}

function HideSpinner() {
    var o = document.getElementById('spinnerContainer');
    if (o) {
        document.body.removeChild(o);
    }
}

var s = window.getSelection().toString();
if (s) {
    TextToSpeech(s);
} else {
    alert('Please select some text to speak.');
}

}) ();

Current OpenAI pricing is $15 per 1,000,000 characters.

History

• Version 1, November 20, 2023