Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Languages / Javascript

OpenAI Text to Speech in Browser

0.00/5 (No votes)
19 Nov 2023CPOL 7.6K  
This program is implemented as a JavaScript Bookmarklet that uses Open AI TTS API
This article will show you how to select a test in your browser and have it read back to you in human like voice.

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.

Image 1

JavaScript
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.

Image 2

History

  • Version 1, November 20, 2023

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)