Google Text to Speech Api on click play website

Question

i have this paragraph

A tattoo of angel wings on the back of the young girl pointed officers to a runaway, a 15-year-old school girl called Tina Fontaine. Within days Tina's case was making headlines throughout Canada not just for the horrific nature of her death, but for what she had come to represent.

and want to play it on my website on click ! so far this is my best code, they say it cant handle more than 100 characters.

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

Any suggesions ? using only jquery / Javascript / PHP Thankyou

if you copy this code its already working it will play hello world in english. when you click this you will know [link](http://translate.google.com/translate_tts?ie=utf-8&tl=en&q=Hello%20World) — Joshua Frederic, Apr 09 '15 at 07:49

score 1 · Accepted Answer · edited May 23 '17 at 11:43

1

function say( text ){
  if('speechSynthesis' in window) { // Chrome only !!

    var speech = new SpeechSynthesisUtterance( text );
    speech.lang = 'en-US';
    window.speechSynthesis.speak(speech);

  } else { // Other browsers !!

     // Use AJAX (with GET) to a .php to file_get_contents
     // generate the <100 by <100 charaters audio files, and nest in callbacks

  }
}


say("A tattoo of angel wings can handle more than 100 characters");

The `else` part of the code

$("#playButton").click(function(){
    var string = encodeURIComponent( $("textarea").val() );
    // TODO: split 100+ string into chunks of rightly punctuated sentences.
    $.ajax({
        data: { text: string },
        success : function(d) {
            var audio = new Audio();
            audio.src = "data:audio/mpeg;base64,"+d;
            audio.play();
            audio.onended = function() {
                alert("Ended playing first part");
                // TODO : if we have chunks, play the next one!
            }
        }
    });
});

The php goes like: (you can put it inside the same page (at the top)!)

<?php 
if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['text']) && isset($_GET['lang'])) {
    $voice = file_get_contents("http://translate.google.com/translate_tts?q=". $_GET['text'] ."&tl=". $_GET['lang'] ."&ie=UTF-8");
    echo base64_encode( $voice );
    exit;
}
?>

To properly split the string into parts you can look for questions similar to Split string into sentences in javascript

edited May 23 '17 at 11:43

Community

1
1

answered Apr 09 '15 at 07:53

Roko C. Buljan

196,159
39
305
313

what if the user does not use chrome ? i see your other answer, i get the audio, play it, after it ends loop it another 100 character each? its better i provide the audio file or let the google speech ? – Joshua Frederic Apr 09 '15 at 07:58
@JoshuaFrederic logically if the user does not uses Chrome than you can activate the other part of the script that uses AJAX and php to get 100 by 100 fragments of audio. – Roko C. Buljan Apr 09 '15 at 08:00
which one is easier ? php loop get audio or javascript loop stream audio ? here is some good answers i found [link](http://stackoverflow.com/questions/14723973/text-to-speech-in-php-with-google-translate?rq=1) – Joshua Frederic Apr 09 '15 at 08:04
@JoshuaFrederic you'll have to incorporate both. JS AJAX > to > PHP – Roko C. Buljan Apr 09 '15 at 08:05
sadly now im not in my laptop that has php gear. 2 more hour can test the code, what does the code do ? if i input the $txt as 3000 character text will it output and mp3 file that can be saved? then on the website i can just play the audio file on the server – Joshua Frederic Apr 09 '15 at 08:15
@JoshuaFrederic I gave you all you need (almost, you just need to implement a string splitter to generate chunks of sentences , + you need to improve the JS code to play those chunks in callbacks. Nothing that hard.) – Roko C. Buljan Apr 09 '15 at 08:47

Google Text to Speech Api on click play website

1 Answers1

The else part of the code

The `else` part of the code