// Cloned by Aleena Joseph on 21 Nov 2023 from World "New World (clone by Aleena Joseph) (clone by Aleena Joseph)" by Aleena Joseph // Please leave this clone trail here.const openaiURL ="https://api.openai.com/v1/audio/speech";// can POST to this 3rd party URLconst themodel ="tts-1";// the OpenAI text to speech model// default API key and prompt:var apikey ="";var theprompt ="hello";// default body is margin 0 and padding 0 // give it more whitespace:
$('body').css("margin","20px");
$('body').css("padding","20px");
document.write (`<h1 align="center">Text to SpeechwithOpenAI TTS model</h1><pre></pre>Enter your text and get different voice modulations.<br>Choose different voices from the dropdown <br><h3>Enter API key </h3>The crucial thing is you need an "API key" to talk to OpenAI.<br>Registerfor free and get your API key
<a href='https://platform.openai.com/account/api-keys'>here</a>.<br>You enter your API key below and then give a text message.<p><div id=enterkey>Enter API key:<input style='width:25vw;' maxlength='2000' NAME="apikey" id="apikey" VALUE=''><button onclick='setkey();'class=ab-normbutton >Set API key</button></div><pre></pre><div style="width:60vw; background-color:#f2e5bb; border: 1px solid black; margin:20; padding: 20px;"><h3>Enter a text </h3><INPUT style="width:50vw;height:10vw;" id=me value="" placeholder="Enter text here..."><h3>Select voice </h3><select id="voiceSelection"><option value="alloy">Alloy</option><option value="echo">Echo</option><option value="fable">fable</option><option value="onyx">Onyx</option><option value="nova">Nova</option><option value="shimmer">Shimmer</option></select><br><br><button id="Send"class=ab-normbutton>SendData</button></div><div style="width:60vw; background-color:#ffffcc; border: 1px solid black; margin:20; padding: 20px;"><h3>Playback your AudioData</h3><div id=them ></div><audio id="audioPlayer" controls>Your browser does not support the audio element.</audio></div><p><i>Text to speech withOpenAi tts model<br></i> </p><pre></pre>`);function setkey(){
apikey = jQuery("input#apikey").val();
apikey = apikey.trim();
$("#enterkey").html ("<b> API key has been set. </b>");
console.log('API has been set');}
document.getElementById('Send').addEventListener('click',()=>{const selectedVoice = document.getElementById('voiceSelection').value;const textToConvert = document.getElementById('me').value;const requestData ={
model:'tts-1',
voice: selectedVoice,// gets value from dropdown list selected by user
input: textToConvert,};function handleError(error){
console.error('Error:', error);}function handleSuccess(data){// mh edit
console.log ("API call returned success");const audioBlob =newBlob([data],{ type:'audio/mp3'});const audioUrl = URL.createObjectURL(audioBlob);// Get the audio element by IDconst audioPlayer = document.getElementById('audioPlayer');// Set the source of the audio element to the generated audio URL
audioPlayer.src = audioUrl;}
fetch(openaiURL,{
method:'POST',
headers:{'Content-Type':'application/json',Authorization:"Bearer "+ apikey,},
body: JSON.stringify(requestData),}).then(response =>{if(!response.ok){thrownewError(`HTTP error!Status: ${response.status}`);}return response.blob();}).then(handleSuccess).catch(handleError);});