Question

我开始研究涉及文字转语音的网络应用。使用从youtube用户Wes Bos学到的技术，我的代码每次点击一个按钮时都会通过Google的英文文本到语音API传递一个随机数字（将其粘贴到URL并返回音频）。

＆＃13;

<!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>

＆＃13;

在我的浏览器本地运行时，此代码可以顺利执行，但是当我在godaddy提供的网站上托管完全相同的代码时，随机数生成器可以工作，但访问谷歌的语音API几乎总是失败，返回网络控制台错误如下：＆＃34; GET https://translate.google.com/translate_tts?ie=UTF-8&q=152&tl=en 404（未找到）＆＃34;。有趣的是，一旦在一个非常蓝色的月亮中，它会通过并大声读出数字。

是什么给出的？我环顾四周但是我很难过。

[[编辑]] 当作为Stack Overflow片段运行时，代码也无法大声读出数字

Answer 1

这是付费API。您需要在Google developer console上设置项目，然后您必须输入您的CC结算信息。完成后，打开API选项卡下的API。

然后转到＆＃34; Credentials＆＃34;。在右侧，点击提示框中的＆＃34;编辑设置＆＃34;，将网址添加到您将托管文件的域中，例如＆＃34; http://mywebsite.com＆＃34;。不要将完整地址放在文件中，例如＆＃34; http://mywebsite.com/mypage.html＆＃34;。保存更改。

至于为什么你的文件在本地运行时有效，下面是我的测试文件的地址：

本地文件，在Mac上运行

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

本地文件，在PC上运行

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

托管文件

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

您在本地文件前面看到file:///？我猜测Google已将API设置为允许来自file:///的所有来源，因为他们知道这些来源是本地文件，而不是托管文件。这样，开发人员可以在与他们签订付款计划之前测试api并创建他们的应用程序。但当然，他们会阻止来自托管网站的任何请求，这些请求不在付费程序中。

enter image description here

JavaScript / jQuery对第三方网站的引用在本地工作，而不是在godaddy运行站点上托管时（404错误）

1 个答案: