0

テキスト読み上げを含む Web アプリの作業を開始しています。YouTube ユーザーの Wes Bos から学んだ手法を使用して、私のコードは、ボタンがクリックされるたびに、乱数を Google の英語のテキスト読み上げ API (文字通り URL に貼り付けて音声を返す) に渡します。

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

このコードは、ブラウザでローカルに実行すると問題なく実行されますが、godaddy が提供するサイトでまったく同じコードをホストすると、乱数ジェネレーターは機能しますが、Google の音声 API へのアクセスはほとんどの場合失敗し、次の行に沿ってネットワーク コンソール エラーが返されます。 : "GET https://translate.google.com/translate_tts?ie=UTF-8&q=152&tl=en 404 (見つかりません)". 興味深いことに、非常にブルームーンになると、通過して数字を読み上げます。

何を与える？辺りを見回しましたが、困っています。

[[編集]] このコードは、スタック オーバーフロー スニペットとして実行された場合、数字の読み上げにも失敗します

4

1 に答える 1

1

これは有料の API です。Google 開発者コンソールでプロジェクトをセットアップする必要があります。次に、CC の請求情報を入力する必要があります。それが完了したら、API タブで API を有効にします。

次に、「資格情報」に進みます。右側にある [設定の編集] をクリックし、提供されたボックスに、「http://mywebsite.com」のようにファイルがホストされるドメインの URL を追加します。「 http://mywebsite.com/mypage.html 」のようにファイルに完全なアドレスを入力しないでください。変更を保存します。

ローカルで実行したときにファイルが機能する理由については、以下に私のテスト ファイルのアドレスを示します。

ローカル ファイル、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:///ローカル ファイルの前に が表示されますか? file:///Google は、ホストされたファイルではなくローカル ファイルであることを知っているため、すべてのオリジンを許可するように API を設定していると思います。このようにして、開発者は API をテストしてアプリを作成してから、支払い計画を立てることができます。しかしもちろん、有料プログラムに参加していないホストされたサイトからのリクエストはブロックされます。

ここに画像の説明を入力

于 2015-01-09T23:55:49.317 に答える