text-to-speech

[NickLargey]

https://github.com/NickLargey/text-to-speech/blob/master/README.md

Everyone loves to hear robots talk, even if they sound more and more like humans every day. Using IBM's text to speech API I'll have users be able to input text to a website and have it return a downloadable .wav file in either English or Spanish.

https://cloud.ibm.com/docs/services/text-to-speech?topic=text-to-speech-gettingStarted

[NickLargey]

Submitted / Description under review

[w3cj]

Looks good to me. The Watson API can be a little tricky, so make sure to spend some time working with the API to make sure you can get back the data you need.

Also, it should be possible to embed the audio on the page instead of having the user download it. When you reach that point, if you need some help, let me know.

Feel free to get started!

[NickLargey]

Hi CJ,

I know you're super busy but would you be willing to take a look at my code and point me in the right direction? I'm just starting frontend dev work and I can't seem to figure out how to get the API call to work :/ Specifically the speech.html and app.js files that's where I'm making the call...

Let me know if I need to clarify anything.

Thank you,
Nick

[w3cj]

I left a comment in your code. Let me know if that helps or if not, which line of code you need help with.

[NickLargey]

Hi CJ,

Me again! I still can't seem to get the API request to work... I'm getting a CORS error whenever I try to submit from my text field.

Any chance you have some resources or wisdom on how CORS works/ how to debug this issue? I fear I may have bitten of more than I can chew with this project... But I'd really like to get it done in time for a review though so I'll keep pushin' through!

And thank you for taking the time to do all that you do to help people trying to learn this stuff. I'm truly grateful for people like you!

• Nick

[w3cj]

Okay. For now, you can try to use the cors anywhere proxy. Just put this URL in front of the url you are currently fetching:

const corsProxy = 'https://cors-anywhere.herokuapp.com/';

fetch(corsProxy + url, {
// rest of the existing code here

If that works, then you might try deploying your own instance of the proxy: https://github.com/Rob--W/cors-anywhere

I will record a lesson soon that will explain cors and show you how to make your own proxy. For now, the above should work.

[NickLargey]

That worked! But... I may have come to an impasse... It appears authentication with JavaScript isn't possible with the Watson API?

I've run the curl command to get an access token after having not been able to get it to work with another GET fetch, but I'm still getting a 401 error returned. And it doesn't seem possible to run a curl command with JS, correct?

Any help would be greatly appreciated!

[w3cj]

Hmmm. You should be able to generate the auth token once, and then re-use that in your front-end project. I'll take a look at this locally tomorrow.

[NickLargey]

Thank you! I tried getting an auth token through curl then passing it though fetch as part of the url and as a header (X-Watson-Authorization-Token) but still got a 401 error back. I had some success using websockets to be able to get the length of the text passed back from the API (see auth.js) as a test. But I haven't delved into websockets to deeply just yet :/

PS I just watched you respond to this while I was responding on the live stream cause I'm behind on it hahaha --- spOoOoOoOoOoky!!!

[NickLargey]

Hi CJ,

I think the watson API is going to take me longer to understand than the allotted time frame. Not to say I'm giving up on it!! but i decided to make another entry with a more straight ahead API for a possible review to see how well (or not) my code cuts the mustard.

You can find it here: https://github.com/NickLargey/ipGeolocation

Thanks!
Nick

[w3cj]

Okay! I'll take a look at your other submission.

[NickLargey]

Hi Cj,

Quick question, I put my code up on netlify at ipgeolocate.netlify.com, but when I search an IP address the search page doesn't return anything, but if I run it with live server everything works as intended. Any tips?

Thanks,
Nick

[over-engineer]

Hey @NickLargey,

I think that it's working locally, because the page is loaded over HTTP. When it's deployed on Netlify, the page is loaded over HTTPS.

That's a problem because you can't request insecure (HTTP) resources on secure connections.

If you take a look at the console (you can open Chrome DevTools by pressing F12) on the deployed website, you'll see this error:

Mixed Content: The page at 'https://ipgeolocate.netlify.com/' was loaded over HTTPS, but requested an insecure resource 'http://ip-api.com/json/<IP_ADDRESS>'. This request has been blocked; the content must be served over HTTPS.

Sometimes you can fix mixed content issues like this, by changing the API url to HTTPS instead of HTTP.

However, the API you're using (ip-api.com) doesn't seem to be available over HTTPS.

If you open https://ip-api.com/json/<SOME_IP_ADDRESS>, you'll get this response:

{
  "status": "fail",
  "message": "SSL unavailable for this endpoint, order a key at https://members.ip-api.com/"
}

Given these limitations, I think the path of least resistance is to switch to a different API (if that's an option for you)

Hope this helps 😄

[NickLargey]

Thanks for the insight, @over-engineer! I noticed this after I posted but forgot to update my comment... Seems I'm not very good at picking API's hahaha You can get ip-api.com to work over HTTPS, but it's only available in the Pro package which is $15 a month :/

I'll look into other IP API's! or maybe just move onto my 3rd project! 😄😄😄😄