Necesito poder reproducir el habla del texto alemán en Reactjs. Probé varias bibliotecas pero no encontré ninguna que sea compatible con los navegadores modernos firefox + chrome

Finalmente intenté usar el traductor de Google. Como puede ver en el código de React, escribí una función que toma un texto y un idioma como parámetros e intenté reproducir este audio usando el traductor de Google, pero no funcionó. Recibí este error de consola "El recurso de medios indicado por el atributo src o el objeto de proveedor de medios asignado no era adecuado".

Por favor, hágame saber lo que estoy haciendo mal y si hay alguna otra solución que pueda funcionar. Mi objetivo principal es poder transformar texto a voz en alemán y que funcione en la mayoría de los navegadores modernos.

 useEffect(() => { playAudio("Herzlich Willkommen ", "de") }, []); const playAudio= (text: any, lang: any) => { // Get the audio element var audioEl = document.getElementById('tts-audio') as any; text = encodeURIComponent(text); const url = `https://translate.google.com/translate_tts?ie=UTF-8&tl=${lang}&client=tw-ob&q=${text}`; // add the sound to the audio element if (audioEl !== null) { audioEl.src = url; //For auto playing the sound audioEl.play(); } };

y HTML

 <audio controls id="tts-audio"/>