I need to play Google text-to-speech in JavaScript.
The idea is to use the web service:
And play it on a certian action, e.g. a button click.
But it seems that it is not like loading a normal wav/mp3 file:
<audio src="audio/example.wav" preload="auto"></audio> <script type="text/javascript"> function play() { document.getElementById('audiotag1').play(); } </script> How can I do this?
7 Answers
Another option now may be HTML5 text to speech, which is in Chrome 33+ and many others.
Here is a sample:
var msg = new SpeechSynthesisUtterance('Hello World'); window.speechSynthesis.speak(msg); With this, perhaps you do not need to use a web service at all.
6Here is the code snippet I found:
var audio = new Audio(); audio.src =' audio.play(); You can use the SpeechSynthesisUtterance with a function like say:
function say(m) { var msg = new SpeechSynthesisUtterance(); var voices = window.speechSynthesis.getVoices(); msg.voice = voices[10]; msg.voiceURI = "native"; msg.volume = 1; msg.rate = 1; msg.pitch = 0.8; msg.text = m; msg.lang = 'en-US'; speechSynthesis.speak(msg); } Then you only need to call say(msg) when using it.
Update: Look at Google's Developer Blog that is about Voice Driven Web Apps Introduction to the Web Speech API.
2Very easy with responsive voice. Just include the js and voila!
<script src=' <input onclick="responsiveVoice.speak('This is the text you want to speak');" type='button' value='🔊 Play' /> I don't know of Google voice, but using the javaScript speech SpeechSynthesisUtterance, you can add a click event to the element you are reference to. eg:
const listenBtn = document.getElementById('myvoice'); listenBtn.addEventListener('click', (e) => { e.preventDefault(); const msg = new SpeechSynthesisUtterance( "Hello, hope my code is helpful" ); window.speechSynthesis.speak(msg); });<button type="button" id='myvoice'>Listen to me</button>The below JavaScript code sends "text" to be spoken/converted to mp3 audio to google cloud text-to-speech API and gets mp3 audio content as response back.
var text-to-speech = function(state) { const url = ' const data = { 'input':{ 'text':'Android is a mobile operating system developed by Google, based on the Linux kernel and designed primarily for touchscreen mobile devices such as smartphones and tablets.' }, 'voice':{ 'languageCode':'en-gb', 'name':'en-GB-Standard-A', 'ssmlGender':'FEMALE' }, 'audioConfig':{ 'audioEncoding':'MP3' } }; const otherparam={ headers:{ "content-type":"application/json; charset=UTF-8" }, body:JSON.stringify(data), method:"POST" }; fetch(url,otherparam) .then(data=>{return data.json()}) .then(res=>{console.log(res.audioContent); }) .catch(error=>{console.log(error);state.onError(error)}) }; Run this code it will take input as audio(microphone) and convert into the text than audio play.
<!doctype HTML> <head> <title>MY Echo</title> <script src=""></script> <link rel="stylesheet" type="text/css" href="" /> <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> Speech to text converter in JS 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>' + interimTranscripts + '</span>'; }; speechRecognizer.onerror = function(event) {}; } else { r.innerHTML = 'Your browser is not supported. If google chrome, please upgrade!'; } } </script> </body> </html> 
