Use Text-to-speech Azure service on public SPA (no authentication) - azure

Question

I have a public SPA website (written in Svelte), with no user authentication.
I'd like to use the Azure Text-to-speech service (as either REST Api or with the azure-cognitive-services npm package).
I now need to provide the api key to use the service... But I understand it is a bad practice to store that key in the client code.
What would be the way to use that service then? Do I really need a backend service? Do I need to wrap my text-to-speech code in something like an Azure Function?
Thanks

Answer 1

If you look at the Source Code of the microsoft-cognitiveservices-speech-sdk NPM package it is clear the only way to auth to the service is by using some form of token/id which you will have to store at client side.
Instead of that you can use an azure function which will take text and convert to text .
My index,js file in azure function .
var t = require('./test');
var fs = require('fs');
module.exports = async function (context, req) {
const name = (req.query.name || (req.body && req.body.name));
t(name);
context.res = {
body:""
}
}
The main processing will be in the file test.js
function test (text) {
var sdk = require("microsoft-cognitiveservices-speech-sdk");
var readline = require("readline");
// This will be the name of the file created later
var audioFile = "YourAudioFile.wav";
const speechConfig = sdk.SpeechConfig.fromSubscription(process.env.SPEECH_KEY, process.env.SPEECH_REGION);
const audioConfig = sdk.AudioConfig.fromAudioFileOutput(audioFile);
speechConfig.speechSynthesisVoiceName = "en-US-JennyNeural";
var synthesizer = new sdk.SpeechSynthesizer(speechConfig, audioConfig);
synthesizer.speakTextAsync(text,
function (result) {
if (result.reason === sdk.ResultReason.SynthesizingAudioCompleted) {
console.log("synthesis finished.");
} else {
console.error("Speech synthesis canceled, " + result.errorDetails +
"\nDid you set the speech resource key and region values?");
}
synthesizer.close();
synthesizer = null;
},
function (err) {
console.trace("err - " + err);
synthesizer.close();
synthesizer = null;
});
}
module.exports = test ;
Majority of code from above is from the MSDOC
At the end all you have to do is return the file created by the synthesizer.