IBM Watson Speech to Text API with node. How to output to DOM?

Question

I am using a npm module to work with IBM's Watson to do speech to text. I'm using this package here: https://github.com/watson-developer-cloud/speech-javascript-sdk.

I can authenticate fine, but other than that nothing happens. I want to take the text from the response and insert it in the DOM. I tried the following just to try it out and I'm not getting any kind of feedback.

WatsonSpeech.SpeechToText.recognizeMicrophone({token: token, keepmic: true, ouputElement: "body"}).promise().then(function() {
  console.log("talking");
  })

The docs say the following for this method:

Other options passed to WritableElementStream if options.outputElement is set.

And

Pipes results through a FormatStream by default, set options.format=false > to disable.

I would think that the WatsonSpeech.SpeechToText.recognizeMicrophone would take a callback function so I can handle the response and put insert it in my DOM, but I can't figure that out. Also, I'm not really a JS guy, so I don't know what the promise does.

Answer 1

Chapter 3 of "Zero to Cognitive" has exactly this code applied.

https://github.com/rddill-IBM/ZeroToCognitive

I recommend you to take a look at his lessons on youtube, but here is the code that I found.

function initPage ()
{
  var _mic = $('#microphone'); var _stop = $("#stop");
_mic.addClass("mic_enabled");
_stop.addClass("mic_disabled");

  _mic.on("click", function ()
    {
      var _className = this.className;
      if(this.className == "mic_enabled")
      {
        _mic.addClass("mic_disabled");
    _mic.removeClass("mic_enabled");
    _stop.addClass("mic_enabled");
    _stop.removeClass("mic_disabled");
    $.when($.get('/api/speech-to-text/token')).done(
      function (token) {
        stream = WatsonSpeech.SpeechToText.recognizeMicrophone({
           token: token,
           outputElement: '#speech' // CSS selector or DOM Element
         });
        stream.on('error', function(err) { console.log(err); });
      });
    }
  });

  _stop.on("click",  function() {
      console.log("Stopping text-to-speech service...");
      if (stream != undefined) {stream.stop(); }
      _mic.addClass("mic_enabled");
      _mic.removeClass("mic_disabled");
      _stop.addClass("mic_disabled");
      _stop.removeClass("mic_enabled");
    });

}