ARTICLE AD BOX
I'm building a little "educative game". My girlfriend is a bachelor for pedagogy and wanted to try an English learning game for a college project.
Here I tried to implement the ElevenLabs API for text-to-speech on buttons. So if you click on an icon it will say the color, number or shape it's been shown.
The problem is, on localhost it was working perfectly, but when I deployed on render I started receiving this error:
"XHR POST https://exerciciopedagogia.onrender.com/tts [HTTP/2 500 867ms]"
"O atributo HTTP "Content-Type" de "application/json" não é suportado. Falha no carregamento do recurso de mídia blob:https://exerciciopedagogia.onrender.com/1d6a8908-cb9d-4d76-9ba4-b4141d8ce320. exerciciopedagogia.onrender.com"
"Uncaught (in promise) DOMException: The media resource indicated by the src attribute or assigned media provider object was not suitable."
At first I was receiving empy String, and changed the element.target to element.currentTarget at colors.js when targetting buttons. But the error kept the same, saying it does not support application/json but the only application.json that I see is in the fetch that call the tts.
If my question is confused or anyhow blurry, please say and I'll change it. I'm new to programming and this site
https://github.com/z3itgeist/exercicioPedagogia
JavaScript: colors.js
buttons.forEach(function(button) { button.addEventListener("click", function(event){ const element = event.currentTarget; colorSounds(element); }); }); function colorSounds(element) { const id = element.id; const img = element.tagName === "IMG" ? element : element.querySelector("img"); const textToRead = img ? img.alt : ""; if(textToRead){ console.log("A cor é:", textToRead, "e o id é:", id); audio(textToRead) } } async function audio(textToRead) { const response = await fetch ('/tts', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({text: textToRead}) }); const audioBlob = await response.blob(); const audioUrl = URL.createObjectURL(audioBlob); const audio = new Audio(audioUrl); audio.play(); }