Search code examples
javascriptjqueryhttp-status-code-404google-text-to-speech

JavaScript/jQuery reference to a third party website works locally, not when hosted on godaddy run site (404 error)

I am beginning work on a web app that involves text-to-speech. Using a technique learned from youtube user Wes Bos, my code passes a random number through Google's english text-to-speech API (literally pasting it into the URL and returning the audio) each time a button is clicked. 

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>SujiQ Dev.0</title>
       
 
   </head>
   
<body>

   <!--text display/button -->

        <p>generate random number</p>
  <div id="output1"></div>
  <button id="btn1" onclick="outText()">Random number</button>
 
 <!--Hidden audio player -->

        <audio src="" class="speech" hidden></audio>

<!--jQuery lib-->
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 
<!--read number out loud each button click -->

       <script> 

/*displays random number-of-the-moment; called on button click */

  function outText() {
  

  var randNum = Math.round(Math.exp(Math.random()*Math.log(10000000-0+1))); /*that's more like it*/

  document.getElementById("output1").innerHTML = randNum;

/* play audio of random number */

  $(function(){
        $("button#btn1").on("click",function(e){
          e.preventDefault();
          
          
          var url = "https://translate.google.com/translate_tts?ie=UTF-8&q=" + randNum + "&tl=en";

          $(".speech").attr("src", url).get(0).play();
 
 
        });
       });

  }
     
 
       </script>

 </body>
 
</html>

This code executes swimmingly without fail when run locally on my browser, but when hosting the exact same code on my godaddy provided site, the random number generator works but access to google's speech API almost always fails, returning a network console error along the lines of: "GET https://translate.google.com/translate_tts?ie=UTF-8&q=152&tl=en 404 (Not Found)". Interestingly, once in a very blue moon, it goes through and reads the number out loud.

What gives? I've looked around but I'm stumped.

[[Edit]] The code also fails to read the number out loud when run as a Stack Overflow snippet

Solution

  • This is a paid API. Youll need to set up your project on the Google developer console then youll have to input your CC billing info. Once thats done, turn on the API under the APIs tab.

    Then go to "Credentials". On the right hand side, click "Edit Settings", in the provided box, add the url to your domain where the file will be hosted like "http://mywebsite.com". Dont put the full address to the file like "http://mywebsite.com/mypage.html". Save your changes.

    As for why your file works when run locally, below are the addresses to my test files:

    local file, run on a mac

    file:///Volumes/Macintosh%20HD/Users/DoDSoftware/Desktop/soundTest.html

    local file, run on a PC

    file:///C:/Users/Flights%20Trainer/Desktop/soundTest.html

    hosted file

    http://affordable-glass.com/test/soundTest.html

    You see the file:/// in front of the local files? I'd guess that Google has the API set up to allow all origins coming from file:/// as they know those will be local files and not hosted files. This way, developers can test the api and create their apps before committing to a payment plan with them. But the of course they block any request originating from a hosted site that's not on a paid program with them.

    enter image description here