Como colocar uma API que deixa o navegador falar o que esta escrito


A API de síntese de fala é uma API incrível, ótima para experimentar novos tipos de interfaces e deixar o navegador falar com você.

 

Quer escutar este texto

 

A API de síntese de fala é uma API incrível, ótima para experimentar novos tipos de interfaces e deixar o navegador falar com você.

Clique no código.

<script>
function textToSpeech(tt) {
    // get all voices that browser offers
    var available_voices = window.speechSynthesis.getVoices();
    // new SpeechSynthesisUtterance object
    var utter = new SpeechSynthesisUtterance();
    utter.rate = 1; //velocidade
    utter.pitch = 1; //tom da voz
    utter.text = tt; //texto escrito
    utter.voice = available_voices[0]; // qual sera a voz mudar de [0] até [20] para testar
    window.speechSynthesis.speak(utter);
}
</script>  


    </head>



A API de síntese de fala é uma API incrível, ótima para experimentar novos tipos de interfaces e deixar o navegador falar com você.<br>
  <a href="#" onclick="textToSpeech(' A API de síntese de fala é uma API incrível, ótima para experimentar novos tipos de interfaces e deixar o navegador falar com você.') ">escutar texto</a>


Explicando

var available_voices = window.speechSynthesis.getVoices();   //começa a função
var utter = new SpeechSynthesisUtterance();   //chama nova função
utter.rate = 1;   //velocidade pode ser de 0.1 até 1
utter.pitch = 0.5;   //tom da voz pode ser de 0.1 até 1
utter.text = tt;   //texto escrito 
utter.voice = available_voices[0];   // qual sera a voz mudar de [0] até [20] para testar

O mais interessante de tudo, que com apenas poucas linhas de código, você já consegue fazer um teste.

 

Veja abaixo um modelo com link e com textarea para escrever

Escreva um texto.

<script>
function textToSpeech(tt) {
    // get all voices that browser offers
    var available_voices = window.speechSynthesis.getVoices();
    // new SpeechSynthesisUtterance object
    var utter = new SpeechSynthesisUtterance();
    utter.rate = 1; //velocidade
    utter.pitch = 0.5; //tom da voz
    utter.text = tt; //texto escrito
    utter.voice = available_voices[0]; // qual sera a voz mudar de [0] até [20] para testar
    window.speechSynthesis.speak(utter);
}
</script>  


    </head>

Escrever e Falar<br>
  <textarea id="speak-text" type="text" placeholder="Escreva um texto"  class="imp" style="width:50%;"></textarea>
  <button id="speak-button" onclick="textToSpeech(document.getElementById('speak-text').value)" class="btn">Falar</button>
  <hr>
  
  
  <a href="#" onclick="textToSpeech('texto enviado por link') ">texto enviado por link</a>


 

Tem como disparar uma função depois de terminar de falar.

<script>
function textToSpeech(tt) {
    // get all voices that browser offers
    var available_voices = window.speechSynthesis.getVoices();
    // new SpeechSynthesisUtterance object
    var utter = new SpeechSynthesisUtterance();
    utter.rate = 1; //velocidade
    utter.pitch = 0.5; //tom da voz
    utter.text = tt; //texto escrito
    utter.voice = available_voices[0]; // qual sera a voz mudar de [0] até [20] para testar

    utter.onend = function() {
        alert('pode ser colocado qualquer função aqui');
                //pode redirecionar página

    }

    window.speechSynthesis.speak(utter);
}
</script>  

  <a href="#" onclick="textToSpeech(' depois de falar, vou disparar um alerta') ">depois de falar, vou disparar um alerta</a>


 

A API de síntese de fala é uma ferramenta incrível fornecida por navegadores modernos. Introduzido em 2014, agora é amplamente adotado e disponível no Chrome, Firefox, Safari e Edge. IE não é suportado.

Há uma longa lista de cenários de uso para esta API. Você pode pensar em acessibilidade, primeiro. E temos a oportunidade de criar aplicativos interativos.

Atualmente, na maioria dos navegadores, podemos fazer com que nossos scripts comecem a falar sem serem ativados pelo usuário. A ativação do usuário é obrigatória no iOS – o usuário deve tocar ou fazer algo para ativar a reprodução de áudio. Isso também está sendo movido rapidamente para o navegador – a reprodução automática foi preterida no Chrome 70 devido a abuso e removida no Chrome 71.

 

Abaixo vou mostrar uma versão mais completa.

 

 

 

Segue o script completo.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <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" />
        <link rel="stylesheet" href="css/app.css"></link>
        <meta name="msapplication-tap-highlight" content="no" />
        <title>Escrever e Falar</title>
  <script>
function textToSpeech(tt) {
    // get all voices that browser offers
    var available_voices = window.speechSynthesis.getVoices();
    // new SpeechSynthesisUtterance object
    var utter = new SpeechSynthesisUtterance();
    utter.rate = document.getElementById('rate').value;
    utter.pitch = document.getElementById('pitch').value;;
    utter.text = tt;
    utter.voice = available_voices[document.getElementById("chosen-voice").value];

    // event after text has been spoken
    utter.onend = function() {	
        xxx = tt.replace(/(?:\r\n|\r|\n)/g, ' ');
        document.getElementById("texto").innerHTML = "<a href=\"#\" onclick=\"copya('" + xxx.replace(" ", "-") +"')\">" + tt +" &#128266;</a><hr>"+  document.getElementById("texto").innerHTML;
    }

    // speak
    window.speechSynthesis.speak(utter);
}

function copya(yy) {
yyy = yy.replace("-", " ");
document.getElementById('speak-text').value = yyy;
textToSpeech(yyy);
}
</script>  

<style>
body {
    position: relative;
    margin: 0;
    font-family: Comic Sans MS,Georgia; text-align: center;
}

.title { color: #F50890; font-size: 30px; text-shadow: 0px -1px 5px #F5F408;}
.btn {padding: 10px 15px;border-radius: 5px;box-shadow: 1px 1px 1px #ddd; border: 0px solid #dddddd;background: green;margin: 5px; color: #fff;}
.imp {padding: 10px 15px;border-radius: 5px;box-shadow: 1px 1px 1px #ddd; border: 0px solid #dddddd;background: #fafafa;margin: 5px; color: #000;}
.divamarela {padding: 10px 15px;border-radius: 5px;box-shadow: 1px 1px 1px #ddd; border: 1px dashed #ccc;background: #eeeee0;margin: 5px; color: #000;}


a{color: #000; text-decoration: none; }
a:hover { color: #999;  }
li { list-style-type: none; }
hr{border:none;border-top:1px solid #eeeeee;height: 0.5px;}
</style>

    </head>
    
<body>
<div id="demo-container" style="padding:10px;">
<h1 class="title"><font face="Comic Sans MS">Escrever e Falar</font></h1>
<div class="divamarela">
  <br>
  vel.<select name="rate" id="rate">
<option>0.1</option>
<option>0.2</option>
<option>0.3</option>
<option>0.4</option>
<option>0.5</option>
<option>0.6</option>
<option>0.7</option>
<option>0.8</option>
<option>0.9</option>
<option selected>1</option>
</select>
Tom<select name="pitch" id="pitch">
<option>0.1</option>
<option>0.2</option>
<option>0.3</option>
<option>0.4</option>
<option selected>0.5</option>
<option>0.6</option>
<option>0.7</option>
<option>0.8</option>
<option>0.9</option>
<option>1</option>
</select>
 voz <select id="chosen-voice" style="width:40%;">
    <option value="0">Microsoft Maria Desktop - Portuguese(Brazil) (Default)</option>
    <option value="1">Microsoft Zira Desktop - English (United States)</option>
    <option value="2">Google Deutsch</option>
    <option value="3">Google US English</option>
    <option value="4">Google UK English Female</option>
    <option value="5">Google UK English Male</option>
    <option value="6">Google espa&ntilde;ol</option>
    <option value="7">Google espa&ntilde;ol de Estados Unidos</option>
    <option value="8">Google fran&ccedil;ais</option>
    <option value="9">Google हिन्दी</option>
    <option value="10">Google Bahasa Indonesia</option>
    <option value="11">Google italiano</option>
    <option value="12">Google 日本語</option>
    <option value="13">Google 한국의</option>
    <option value="14">Google Nederlands</option>
    <option value="15">Google polski</option>
    <option value="16">Google portugu&ecirc;s do Brasil</option>
    <option value="17">Google русский</option>
    <option value="18">Google&nbsp;普通话（中国大陆）</option>
    <option value="19">Google&nbsp;粤語（香港）</option>
    <option value="20">Google 國語（臺灣）</option>
  </select>
      <textarea rows="3" wrap="VIRTUAL"  class="imp" id="speak-text" style="width:90%;" type="text" placeholder="Escreva um texto"></textarea>

  <button id="speak-button" onclick="textToSpeech(document.getElementById('speak-text').value)" class="btn" style="width:90%;">Falar</button>
  </div>

<div align="left" style="color:#cccccc;"><b>Histórico</b></div>
<div id="texto"></div>
    </div>

</body>
</html>


Categoria: html, javascript | Tags: , , , , , , , | Postado por joemaster em 29/jun/2020

<< Anterior

Próximo >>

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *