I’m building a Text-To-Speech Website using Google API.
Server-Side works fine, now I started building frontend where I currently have a input field for the message that should be converted into mp3, as well as a button.
This is my frontend:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="textInput">
<button id="convertButton" onclick="convertTTS()">Konvertieren</button>
<script>
function convertTTS() {
// Creating Our XMLHttpRequest object
var url = 'localhost:5500/convertTextToMp3';
var xhttp = new XMLHttpRequest();
// Making our connection
xhttp.open("GET", url, true);
// function execute after request ist successful
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log("Es funktioniert");
}
};
// Sending our request
xhttp.send();
}
</script>
</body>
</html>
and this is my server:
const textToSpeech = require("@google-cloud/text-to-speech")
// dot env
require("dotenv").config()
const fs = require("fs")
const util = require("util")
const client = new textToSpeech.TextToSpeechClient()
const express = require('express');
const app = express();
const cors = require('cors')
async function convertTextToMp3(){
console.log("Yippie! It works!");
const text = "Example Text"
const request = {
input: {text:text},
voice: {languageCode:"en-US", ssmlGender:"Neutral"},
audioConfig:{audioEncoding:"MP3"}
}
const [response] = await client.synthesizeSpeech(request)
const writeFile = util.promisify(fs.writeFile)
await writeFile("output.mp3", response.audioContent, "binary")
console.log("Text to Speech has completed. Audio File has been saved.")
}
app.use(cors());
app.get('/convertTextToMp3', (req, res) => {
//convertTextToMp3();
res.send('Function called successfully!');
});
app.listen(5500, () => console.log('Server started on port 5500'));
The server is running using nodejs and I’m using express for the endpoint.
I start the frontend using the LiveServer extension from VSCode.
I also added Cors (installed using npm).
What I tried is different uses of cors like:
app.use(corse());
or
app.use(cors({
origin: '*'
, methods: ['GET','POST','DELETE','UPDATE','PUT','PATCH']
}));
I also tried to include it into app.get directly:
app.get('/convertTextToMp3', cors(), (req, res) => {
//convertTextToMp3();
res.send('Function called successfully!');
});
I also tried to call http://127.0.0.1 instead of localhost here:
var url = 'localhost:5500/convertTextToMp3';
but then I get a 404 issue from “http://127.0.0.1:5500/convertTextToMp3”:
What I expect to happen is, that I get a “Yippie! It works!” output on the console.
The actual result is this error:
Why my question is different: So far I’ve seen multiple different questions to this topic, but mostly users are using something like file:/ which I don’t use.
Other questions I found are using specific frameworks which I don’t use.