<\/p>\n
A API de s\u00edntese de fala \u00e9 uma ferramenta incr\u00edvel fornecida por navegadores modernos. Introduzido em 2014, agora \u00e9 amplamente adotado e dispon\u00edvel no Chrome, Firefox, Safari e Edge. IE n\u00e3o \u00e9 suportado.<\/p>\n
H\u00e1 uma longa lista de cen\u00e1rios de uso para esta API. Voc\u00ea pode pensar em acessibilidade, primeiro. E temos a oportunidade de criar aplicativos interativos.<\/p>\n
Atualmente, na maioria dos navegadores, podemos fazer com que nossos scripts comecem a falar sem serem ativados pelo usu\u00e1rio. A ativa\u00e7\u00e3o do usu\u00e1rio \u00e9 obrigat\u00f3ria no iOS – o usu\u00e1rio deve tocar ou fazer algo para ativar a reprodu\u00e7\u00e3o de \u00e1udio. Isso tamb\u00e9m est\u00e1 sendo movido rapidamente para o navegador – a reprodu\u00e7\u00e3o autom\u00e1tica foi preterida no Chrome 70 devido a abuso e removida no Chrome 71.<\/p>\n
<\/p>\n
Abaixo vou mostrar uma vers\u00e3o mais completa.<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
Segue o script completo.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <meta charset=\"utf-8\" \/>\r\n <meta name=\"format-detection\" content=\"telephone=no\" \/>\r\n <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https:\/\/issues.apache.org\/jira\/browse\/CB-4323 -->\r\n <meta name=\"viewport\" content=\"user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi\" \/>\r\n <link rel=\"stylesheet\" href=\"css\/app.css\"><\/link>\r\n <meta name=\"msapplication-tap-highlight\" content=\"no\" \/>\r\n <title>Escrever e Falar<\/title>\r\n <script>\r\nfunction textToSpeech(tt) {\r\n \/\/ get all voices that browser offers\r\n var available_voices = window.speechSynthesis.getVoices();\r\n \/\/ new SpeechSynthesisUtterance object\r\n var utter = new SpeechSynthesisUtterance();\r\n utter.rate = document.getElementById('rate').value;\r\n utter.pitch = document.getElementById('pitch').value;;\r\n utter.text = tt;\r\n utter.voice = available_voices[document.getElementById(\"chosen-voice\").value];\r\n\r\n \/\/ event after text has been spoken\r\n utter.onend = function() {\t\r\n xxx = tt.replace(\/(?:\\r\\n|\\r|\\n)\/g, ' ');\r\n document.getElementById(\"texto\").innerHTML = \"<a href=\\\"#\\\" onclick=\\\"copya('\" + xxx.replace(\" \", \"-\") +\"')\\\">\" + tt +\" 🔊<\/a><hr>\"+ document.getElementById(\"texto\").innerHTML;\r\n }\r\n\r\n \/\/ speak\r\n window.speechSynthesis.speak(utter);\r\n}\r\n\r\nfunction copya(yy) {\r\nyyy = yy.replace(\"-\", \" \");\r\ndocument.getElementById('speak-text').value = yyy;\r\ntextToSpeech(yyy);\r\n}\r\n<\/script> \r\n\r\n<style>\r\nbody {\r\n position: relative;\r\n margin: 0;\r\n font-family: Comic Sans MS,Georgia; text-align: center;\r\n}\r\n\r\n.title { color: #F50890; font-size: 30px; text-shadow: 0px -1px 5px #F5F408;}\r\n.btn {padding: 10px 15px;border-radius: 5px;box-shadow: 1px 1px 1px #ddd; border: 0px solid #dddddd;background: green;margin: 5px; color: #fff;}\r\n.imp {padding: 10px 15px;border-radius: 5px;box-shadow: 1px 1px 1px #ddd; border: 0px solid #dddddd;background: #fafafa;margin: 5px; color: #000;}\r\n.divamarela {padding: 10px 15px;border-radius: 5px;box-shadow: 1px 1px 1px #ddd; border: 1px dashed #ccc;background: #eeeee0;margin: 5px; color: #000;}\r\n\r\n\r\na{color: #000; text-decoration: none; }\r\na:hover { color: #999; }\r\nli { list-style-type: none; }\r\nhr{border:none;border-top:1px solid #eeeeee;height: 0.5px;}\r\n<\/style>\r\n\r\n <\/head>\r\n \r\n<body>\r\n<div id=\"demo-container\" style=\"padding:10px;\">\r\n<h1 class=\"title\"><font face=\"Comic Sans MS\">Escrever e Falar<\/font><\/h1>\r\n<div class=\"divamarela\">\r\n <br>\r\n vel.<select name=\"rate\" id=\"rate\">\r\n<option>0.1<\/option>\r\n<option>0.2<\/option>\r\n<option>0.3<\/option>\r\n<option>0.4<\/option>\r\n<option>0.5<\/option>\r\n<option>0.6<\/option>\r\n<option>0.7<\/option>\r\n<option>0.8<\/option>\r\n<option>0.9<\/option>\r\n<option selected>1<\/option>\r\n<\/select>\r\nTom<select name=\"pitch\" id=\"pitch\">\r\n<option>0.1<\/option>\r\n<option>0.2<\/option>\r\n<option>0.3<\/option>\r\n<option>0.4<\/option>\r\n<option selected>0.5<\/option>\r\n<option>0.6<\/option>\r\n<option>0.7<\/option>\r\n<option>0.8<\/option>\r\n<option>0.9<\/option>\r\n<option>1<\/option>\r\n<\/select>\r\n voz <select id=\"chosen-voice\" style=\"width:40%;\">\r\n <option value=\"0\">Microsoft Maria Desktop - Portuguese(Brazil) (Default)<\/option>\r\n <option value=\"1\">Microsoft Zira Desktop - English (United States)<\/option>\r\n <option value=\"2\">Google Deutsch<\/option>\r\n <option value=\"3\">Google US English<\/option>\r\n <option value=\"4\">Google UK English Female<\/option>\r\n <option value=\"5\">Google UK English Male<\/option>\r\n <option value=\"6\">Google español<\/option>\r\n <option value=\"7\">Google español de Estados Unidos<\/option>\r\n <option value=\"8\">Google français<\/option>\r\n <option value=\"9\">Google \u0939\u093f\u0928\u094d\u0926\u0940<\/option>\r\n <option value=\"10\">Google Bahasa Indonesia<\/option>\r\n <option value=\"11\">Google italiano<\/option>\r\n <option value=\"12\">Google \u65e5\u672c\u8a9e<\/option>\r\n <option value=\"13\">Google \ud55c\uad6d\uc758<\/option>\r\n <option value=\"14\">Google Nederlands<\/option>\r\n <option value=\"15\">Google polski<\/option>\r\n <option value=\"16\">Google português do Brasil<\/option>\r\n <option value=\"17\">Google \u0440\u0443\u0441\u0441\u043a\u0438\u0439<\/option>\r\n <option value=\"18\">Google \u666e\u901a\u8bdd\uff08\u4e2d\u56fd\u5927\u9646\uff09<\/option>\r\n <option value=\"19\">Google \u7ca4\u8a9e\uff08\u9999\u6e2f\uff09<\/option>\r\n <option value=\"20\">Google \u570b\u8a9e\uff08\u81fa\u7063\uff09<\/option>\r\n <\/select>\r\n <textarea rows=\"3\" wrap=\"VIRTUAL\" class=\"imp\" id=\"speak-text\" style=\"width:90%;\" type=\"text\" placeholder=\"Escreva um texto\"><\/textarea>\r\n\r\n <button id=\"speak-button\" onclick=\"textToSpeech(document.getElementById('speak-text').value)\" class=\"btn\" style=\"width:90%;\">Falar<\/button>\r\n <\/div>\r\n\r\n<div align=\"left\" style=\"color:#cccccc;\"><b>Hist\u00f3rico<\/b><\/div>\r\n<div id=\"texto\"><\/div>\r\n <\/div>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n\n Ap\u00f3s clicar em Copy ⇗