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