{% extends "../../../layout.twig" %} {% set page_title = 'Voice - Setup Voice control of a form element' %} {% set page_slug = '/functionality/voice/' %} {% block page %}

{{page_title}}

See the two examples below to get insights into how to implement various APIs. Be aware that in the examples we use HTML5 standard APIs, but these could just as well be 3rd party like Google Cloud Speech API

Be aware that Voice only works with elements input[type="text/password/email/radio"].

Be aware that examples are using bleeding-edge browser features like Web Speech API.

You need to instantiate Conversational Form manually, here is a snippet:

var dispatcher = new cf.EventDispatcher();

var microphoneInput = null;// see examples or description below.

var conversationalForm = window.cf.ConversationalForm.startTheConversation({
	// your form element
	formEl: document.getElementById("form"),
	
	// your context
	context: document.getElementById("cf-context"),
	
	// custom event dispatcher
	eventDispatcher: dispatcher,

	// add the custom input (microphone)
	microphoneInput: microphoneInput,

	submitCallback: function(){
		// remove Conversational Form
		console.log("voice: Form submitted...", conversationalForm.getFormData(true));
		alert("You made it! Check console for data")
	}
});

You will notice a new attribute in the init method microphoneInput, this is your interface into Voice control.

microphoneInput can have the following methods and attributes, some optional some mandatory:

init Optional method init is called one time, when the custom input is instantiated together with instantiation of the Conversational Form instance. init can be used to hook into Conversational Form Events

init: () => {
	...
}

awaitingCallback Optional boolean awaitingCallback can be set to true to include an API in-between user input and set awaiting callback, as we will await the speak in this example

awaitingCallback: true

input Mandatory method Used to tap into an API when user talks into Microphone (using getUserMedia). It takes 3 attributes, resolve and reject, both callback methods that are tied to a Promise. 3rd parameter is a mediaStream which can be used to send to external API (server..).

input: (resolve, reject, mediaStream) => {

}

cancelInput Optional method can be used to cancel the input call.

cancelInput: function() {
	
}

See Feature-support: Browser support

Example - Voice input

See the Pen Conversational Form - Voice input example by SPACE10 (@space10) on CodePen.

Example - Voice input and output

See the Pen Conversational Form - Voice input and output example by SPACE10 (@space10) on CodePen.

{% endblock %} {% block toc %} {% endblock %}