2013-03-27 13 views
22

Ich muss Google Text-zu-Sprache in JavaScript spielen.
Die Idee ist, den Web-Service zu nutzen:Mit Google Text-To-Speech in Javascript

http://translate.google.com/translate_tts?tl=en&q=This%20is%20just%20a%20test

Und spielen sie auf einem certian Aktion, z.B. ein Knopf klicken.

Aber es scheint, dass es nicht wie eine normale WAV/MP3-Datei laden:

<audio id="audiotag1" src="audio/example.wav" preload="auto"></audio> 

<script type="text/javascript"> 
    function play() { 
     document.getElementById('audiotag1').play(); 
    } 
</script> 

Wie kann ich das tun? Hier

Antwort

15

ist der Code-Snippet ich gefunden:

var audio = new Audio(); 
audio.src ='http://translate.google.com/translate_tts?ie=utf-8&tl=en&q=Hello%20World.'; 
audio.play(); 
+3

Es scheint, dass wenn Sie den "Dot" am Ende entfernen, es gut funktioniert, sonst wird es nicht den Ton spielen. – Diego

+4

Beachten Sie, dass Google Translate ein Limit von ~ 100 Buchstaben hat. – niutech

+7

Offenbar blockiert Google Anfragen mit einem Referrer im HTTP-Header. Gibt es eine Möglichkeit, dieses Problem zu umgehen? – jichi

60

Eine weitere Option jetzt HTML5 text to speech sein kann, die in Chrome 33+ ist und many others. Hier

ist ein Beispiel:

var msg = new SpeechSynthesisUtterance('Hello World'); 
window.speechSynthesis.speak(msg); 

Damit vielleicht Sie nicht über einen Web-Service überhaupt verwenden müssen.

+0

Das Tolle an der HTML5-Sprachsynthese ist, dass Sie die Stimmlage, Fluktuation usw. anpassen können –

+0

Unterstützt von Safari, IE? – Jasper

1

hey diesen Code ausführen es Eingang als Audio (Mikrofon) übernehmen und umwandeln in Text dann Hörspiel

<head> 
<title>MY Echo</title> 
<script src="http://code.responsivevoice.org/responsivevoice.js"></script> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.min.css" /> 
<style type="text/css"> 
    body { 
     font-family: verdana; 
    } 

    #result { 
     height: 100px; 
     border: 1px solid #ccc; 
     padding: 10px; 
     box-shadow: 0 0 10px 0 #bbb; 
     margin-bottom: 30px; 
     font-size: 14px; 
     line-height: 25px; 
    } 

    button { 
     font-size: 20px; 
     position: relative; 
     left: 50%; 
    } 
</style> 

<h4 align="center">Speech to text converter in JS</h4> 
<div id="result"></div> <button onclick="startConverting();"><i class="fa fa-microphone"></i></button> 
<script type="text/javascript"> 
    var r = document.getElementById('result'); 

    function startConverting() { 
     if ('webkitSpeechRecognition' in window) { 
      var speechRecognizer = new webkitSpeechRecognition(); 
      speechRecognizer.continuous = true; 
      speechRecognizer.interimResults = true; 
      speechRecognizer.lang = 'en-IN'; 
      speechRecognizer.start(); 
      var finalTranscripts = ''; 
      speechRecognizer.onresult = function(event) { 
       var interimTranscripts = ''; 
       for (var i = event.resultIndex; i < event.results.length; i++) { 
        var transcript = event.results[i][0].transcript; 
        transcript.replace("\n", "<br>"); 
        if (event.results[i].isFinal) { 
         finalTranscripts += transcript; 
         var speechresult = finalTranscripts; 
         console.log(speechresult); 
         if (speechresult) { 
          responsiveVoice.speak(speechresult, "UK English Female", { 
           pitch: 1 
          }, { 
           rate: 1 
          }); 
         } 
        } else { 
         interimTranscripts += transcript; 
        } 
       } 
       r.innerHTML = finalTranscripts + '<span style="color:#999">' + interimTranscripts + '</span>'; 
      }; 
      speechRecognizer.onerror = function(event) {}; 
     } else { 
      r.innerHTML = 'Your browser is not supported. If google chrome, please upgrade!'; 
     } 
    } 
</script> 
</body> 

</html>` 
0

Haben Sie schon von Say.js library gehört?
Sie müssen nur say(msg) aufrufen, wenn Sie es verwenden.