I need to be able to play speech from German text in Reactjs. I tried multiple libraries but have not found any library that is compatible with modern browsers firefox + chrome

Eventually I tried using google translate. As you can see in the React code, I wrote a function that takes a text and language as parameters and tried to play this audio using google translate but it did not work. I got this console error "The media resource indicated by the src attribute or assigned media provider object was not suitable."

Please let me know what I'm doing wrong and if there any other solutions that can work. My main goal is I want to be able to transform text to speech in German and have it work on most modern browsers

  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();
    }
  };

and html

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