Google Speech API compatibility

Question

Performing some tests on Google Speech API I identified that this feature only has support in Chrome and Opera browsers as per Can I use.

Detail the main function that is used by the API is Speech Recognition API which is of the new HTML5.

Example:

// 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>

Doubts:

1. How is HTML5 implemented in Javascript? I know it may be a silly question, but what is the relationship between the two in support of this API?

2. I’ve done a lot of research on several articles on compatibility, so what you can see is not something exclusive to Google but HTML5, you know of some implementation queue of this new API in other browsers?

Answer 1

Answering the first, question.

According to the documentation. HTML5 is a series of technologies that allows you to create powerful applications.

As for the second question, as it is a draft of the specification, not all have implemented it yet and may even cease to exist in the future. Firefox, implements, but needs to be enabled. As for Edge, it is under consideration.

You can see this in the links in English.

Can I Use

Edge

Firefox

Safari

Answer 2

I won’t answer exactly what you asked, but I will try to give an answer to make it clear what really is Browser, Engine and Html5.

What is HTML5

HTML5 is not a specific technology, it is a set of technologies like canvas, javascript Apis, integration with css3 more integrated, ie we commonly call these technologies Html5, but in reality it is a markup language that must be interpreted by the browser engine.

Html5 are standards passed by W3.org, and it doesn’t mean that all browsers will work exactly as described, or will support all functionalities.

Each browser has its own engine and each engine works its own way, but "TRY" deliver the result as described in the standards.

In the case Speech Recognition API is an extra feature that can be accessed via a Javascript API and is not a new Html5 functionality.

What is an engine/interpreter

There are two engines, the rendering and that of javascript, each browser has its own engines, some rendering engines are also javascript engines, but this is something too deep to discuss, I will mention the main rendering engines:

• Webkit (used in Safari)
• Trident (Internet Explorer)
• Gecko (Firefox and Thunderbird)
• Blink (Webkit Fork used in Chrome and Opera)

I won’t mention the javascript engines, because each version of the browser is changed the engines, in the old opera and in Firefox I remember that there are several engine changes. But I will mention one very used (I even believe it is the same used in Node.js) is the V8.

Concluding

Having understood all this, then I will summarize, Html5 is not something that has specific versions and each browser can implement a new technology entirely or partially and only accompanying the official Changelogs to know when something was released, this question is very similar to this situation already commented on the site:

• App style in pure CSS3 breaks while running on Android

It’s not the same thing, but the answer helps you understand how things are updated.

Answering to doubts

1. P: How HTML5 is implemented in javascript?

   • R: So it’s not like Html5 is implemented in Javascript, who accesses the html and css in javascript is the API Javascript DOM, then in case Javascript accesses a technology "more internal" (if the browser has it available or implemented), ie javascript can access various technologies, provided that the javascript engine has been modified and has received such capability through whoever writes their code. Basically what you see from javascript is the top layer that accesses numerous "interfaces".

2. P: I’ve done a lot of research on several articles on compatibility, so what you can see is not something exclusive to google but HTML5, you know of some implementation queue of this new API in other browsers?

   • There’s no way to track compatibility officially, because as I said, it’s not because it’s set in W3.org that a webbrowser’s engines will match or work in exactly the same way, which means they can implement when they can or can, there is no code ready, the internal code of each engine is written in a totally different way from the other and it will be up to the programmers to try to implement.

     It happens that sometimes they need to rewrite the Javascript engine code several times (something that was very common in Opera with Presto and Firefox2 and 3) because there may be limitations or complexities in the code, so there are no plans to implement something new necessarily, will depend solely on the developers, because as I explained, it is not because something is defined in W3.org that the browsers will have code ready, because there in W3 are only the standards of how something should work, it is up to the developers to try to create according to the rules.

Follow in an unofficial way

There are websites that "attempt" check compatibilities (some work very well), they are a kind of data repository and the tests are done by real people probably, but still bring a lot of good data.

A great example is the http://caniuse.com and it is updated via Github: https://github.com/Fyrd/caniuse

It does not have "all" information, but it is still very interesting.

See an example with Speech (which even you have already linked):

• http://caniuse.com/#feat=Speech-recognition

Finally, there are no implementation queues and each developer of a browser can deliver or not a new functionality, because it is not a matter of mandatory or need only, but also of development time and even compatibility, because it is not because two browsers can do the same thing that the internal code will perform the same way, that is to say the W3.org does not pass the technology exactly as it has to work from the lowest level, but rather the result as it has to be delivered.