6

Realizando alguns testes no Google Speech API identifiquei que esse recurso só possui suporte nos navegadores Chrome e Opera conforme o Can I use.

Detalhe a função principal que é utilizada pela API é Speech Recognition API que é do novo HTML5.

Exemplo:

// Testa se o navegador suporta
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition || null;

// caso não suporte esta API DE VOZ
if (window.SpeechRecognition === null) {
  document.getElementById("gravar").style.visibility = 'hidden';
  document.getElementById("compativel").innerHTML = "Nao existe suporte para esta API, Utilize Google Chrome v25+";
} else {
  var recognizer = new window.SpeechRecognition();
  var transcricao = document.getElementById("transcricao");
  recognizer.continuous = true; //Para o reconhecedor de voz, não parar de ouvir, mesmo que tenha pausas no usuario
  recognizer.interimResults = true;
  recognizer.lang = "pt-BR";
  recognizer.onresult = function(event) {
    transcricao.textContent = "";

    for (var i = event.resultIndex; i < event.results.length; i++) {
      if (event.results[i].isFinal) {
        transcricao.textContent = event.results[i][0].transcript;
      } else {
        transcricao.textContent += event.results[i][0].transcript;
      }
    }

  };

  var fleg = true;
  document.querySelector("#gravar").addEventListener("click", function() {
    if (fleg) {
      recognizer.start();
      fleg = false;
      this.innerHTML = "Gravando...";
    } else {
      recognizer.stop();
      fleg = true;
      this.innerHTML = "Gravar";
    }

  });

}
 <h2>Google Speech API</h2>
<i id="compativel"></i>
<div id="transcricao"></div>
<button id="gravar">Gravar</button>
<div id="mensagem"></div>

Dúvidas:

  1. Como é do HTML5, se é implementada no JavaScript? Sei que pode ser uma pergunta boba, mas qual é a relação entre as duas no suporte desta API?

  2. Pesquisei bastante em vários artigos sobre a compatibilidade, pelo que vocês podem ver não é algo de exclusividade do Google e sim do HTML5, vocês sabem de alguma fila de implementação desta nova API em outros navegadores?

2 Respostas 2

1

Eu não vou responder exatamente o que você perguntou, mas vou tentar dar uma resposta para ficar claro o que realmente é Navegador, Motor e html5.

O que é HTML5

HTML5 não é uma tecnologia especifica, ele é um conjunto de tecnologias como canvas, apis do javascript, integração com css3 mais integrada, ou seja chamamos vulgarmente estas tecnologias de html5, mas no real ele é uma linguagem de marcação que deve ser interpretada pelo motor do navegador.

O html5 são normas passadas pelo w3.org, e não quer dizer que todos navegadores irão funcionar exatamente como descrito, ou irão suportar todas funcionalidades.

Cada navegador tem seu próprio motor e cada motor funciona a sua própria maneira, mas "TENTAM" entregar o resultado como descrito nas normas.

No caso Speech Recognition API é uma funcionalidade extra que pode ser acessada via uma API do Javascript e não é uma nova funcionalidade do html5.

O que é um motor/interpretador

Existem dois motores, o de renderização e o do javascript, cada navegador possui os seus próprios motores, alguns motores de renderização também são motores de javascript, mas isto é algo muito profundo pra se discutir, vou citar os principais motores de renderização:

  • Webkit (usado no Safari)
  • Trident (Internet Explorer)
  • Gecko (Firefox e ThunderBird)
  • Blink (fork do Webkit usada no Chrome e Opera)

Não vou citar os motores javascript, pois a cada versão de navegador são trocados os motores, no antigo opera e no Firefox eu lembro que ouve várias trocas de motor. Mas irei citar um muito usado (inclusive acredito que é o mesmo usado no Node.js) é o V8.

Concluindo

Tendo entendido tudo isto, então vou resumir, html5 não é algo que tem versões especificas e cada navegador pode implementar uma nova tecnologia inteiramente ou parcialmente e só acompanhando os CHANGELOGs oficiais para saber quando algo foi liberado, esta pergunta é bem semelhante a esta situação aqui já comentada no site:

Não é a mesma coisa, mas a resposta ajuda a entender como as coisas são atualizadas.

Respondendo a duvidas

  1. P: Como é do HTML5 se é implementada no javascript?

    • R: Então não é como o html5 é implementado no Javascript, quem acessa o html e css no javascript é a API Javascript DOM, então no caso o Javascript acessa um tecnologia "mais interna" (se o navegador tiver ela disponível ou implementada), ou seja o javascript pode acessar várias tecnologias, desde que o motor javascript tenha sido modificado e tenha recido tal capacidade através de quem escreve os códigos deles. Basicamente o que você enxerga do javascript é a camada superior que acessa inúmeras "interfaces".
  2. P: Pesquisei bastante em vários artigos sobre a compatibilidade, pelo que vocês podem ver não é algo de exclusividade do google e sim do HTML5, vocês sabem de alguma fila de implementação desta nova API em outros navegadores?

    • Não há como acompanhar a compatibilidade oficialmente, pois como eu disse não é porque esta definido no w3.org que os motores de um webbrowser vão dar compatibilidade ou funcionar exatamente da mesma maneira, ou seja eles podem implementar quando eles puderem ou conseguirem, não existe código pronto, o código interno de cada motor é escrito de uma maneira totalmente diferente da outra e caberá aos programadores tentarem implementar.

      Ocorre que as vezes eles necessitam reescrever o código do motor Javascript várias vezes (algo que foi muito comum no Opera com Presto e no Firefox2 e 3) pois podem ocorrer limitações ou complexidades no códigos, por isto não existem planos para implementar algo novo obrigatoriamente, vai depender unicamente dos desenvolvedores, pois como eu expliquei, não é porque algo esta definido no w3.org que os navegadores terão códigos prontos, pois lá no w3 são apenas as normas de como algo deve funcionar, cabe aos desenvolvedores tentarem criar conforme as normas.

Acompanhar de maneira não oficial

Existem sites que "tentam" verificar compatibilidades (alguns funcionam muito bem), eles são uma especie de repositório de dados e os testes são feitos por pessoas reais provavelmente, mas ainda sim trazem muitos dados bons.

Um ótimo exemplo é o http://caniuse.com e ele é atualizado via Github: https://github.com/Fyrd/caniuse

Não possui "todas" informações, mas ainda sim é bem interessante.

Veja um exemplo com o Speech (que inclusive você já havia linkado):

Para finalizar, não existem filas de implementação e cada desenvolvedor de um navegador pode entregar ou não uma nova funcionalidade, pois não é questão de obrigatoriedade ou necessidade só, mas também de tempo de desenvolvimento e até compatibilidade, pois não é porque dois navegadores conseguem fazer a mesma coisa que o código interno vai executar da mesma maneira, ou seja o w3.org não passa a tecnologia exatamente como tem que funcionar desde o nível mais baixo, mas sim o resultado como tem que ser entregue.

2
  • 1
    +1, esta separação/integração de tecnologias me deixa muito confuso. é normal ver alguma tecnologia que depende de outra para funcionar, complicado é definir o quem é de quem. 4/12/2015 às 19:27
  • 1
    @GabrielRodrigues talvez não tenha ficado claro, o que eu quero dizer é que não tem como definir quem é de quem de verdade, no basico é assim, existem APIs do javascript que acessam coisas da renderização ou de outros códigos internos, é assim que dividimos no basico, mas no nivel mais baixo cada navegador ou motor implementa isto como quiser, então é pouco relevante entender quem é de quem, devemos entender apenas aonde esta a disponibilidade. O que é apenas necessário entender é como a implementação destas novas tecnologias é feita, resumindo cada navegador implementa "quando" quer ou "pode"
    – Syzoth
    4/12/2015 às 20:21
1

Respondendo a primeira, pergunta.

Segundo a documentação. O HTML5 é uma serie de tecnologias que permite a criação de poderosas aplicações.

Quanto a segunda pergunta, por se tratar de um draft da especificação, nem todos implementaram ainda e pode até deixar de existir no futuro. O Firefox, implementa, mas precisa ser ativado. O quanto ao Edge, está sobre consideração.

Você pode ver isso nos links em inglês.

Can I Use

Edge

Firefox

Safari

1
  • 2
    +1, conforme documentação no firefox ele precisa ser habilitado, porém não funciona. traduzindo. ele apenas criou uma trava para quando ele existir, para você ter ideia, baixei o Firefox Nightly que é uma especie de navegador de testes para novas implementações e não funcionava :( 4/12/2015 às 18:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .