<voice

elements>

<voice-player>

Provides you a simple DOM API to do speech synthesis (text to speech).

In the following demo, we set some content into the text attribute. Then, by using the autoplay attribute, the voice is played when the element loads.

<voice-player autoplay text="Welcome to the jungle! hahaha just kidding!"></voice-player>

In the following demo, we define a different language by using the accent attribute. When the button is clicked, we call the speak method to trigger the audio.

<voice-player id="mi-elemento" accent="es-ES" text="Me gusta la gasolina"></voice-player>

<script>
var form = document.querySelector('#mi-form'),
    element = document.querySelector('#mi-elemento');

form.addEventListener('submit', function(e) {
    e.preventDefault();
    element.speak();
});
</script>

In the following demo, the text attribute is set according to the input value. When the form is submitted, we call the speak method to trigger the audio.

<voice-player id="player-element" text=""></voice-player>

<script>
var form = document.querySelector('#player-form'),
    input = document.querySelector('#player-input'),
    element = document.querySelector('#player-element');

input.addEventListener('input', function(e) {
    element.setAttribute('text', input.value);
});

form.addEventListener('submit', function(e) {
    e.preventDefault();
    element.speak();
});
</script>

Options

Attribute	Options	Default	Description
autoplay	boolean	false	Specifies if the audio should play when page loads.
accent	en-US, en-GB, es-ES, fr-FR, it-IT, de-DE, ja-JP, ko-KR, zh-CN	en-US	Specifies the language to be synthesized and spoken.
text	string	You are awesome	Specifies the text to be synthesized and spoken.

Methods

Method	Parameters	Returns	Description
speak()	None	Nothing	Triggers the voice audio to be played.
cancel()	None	Nothing	Triggers the voice audio to be canceled.
pause()	None	Nothing	Triggers the voice audio to be paused.
resume()	None	Nothing	Triggers the voice audio to be resumed.

Events

Event	Description
onstart	Triggers when the voice begun to be spoken.
onend	Triggers when the voice completed to be spoken.
onerror	Triggers when the voice player detects an error.
onpause	Triggers when the voice player is resumed.
onresume	Triggers when the voice player is resumed.

<voice-recognition>

Provides you a simple DOM API to do voice recognition (speech to text).

In the following demo, we trigger the voice recognition by using the start method when the user submits the form. Then, we add a listener to the result event to fetch the recognized content and put it into the textarea.

<voice-recognition id="recognition-element"></voice-recognition>

<script>
var form = document.querySelector('#recognition-form'),
    input = document.querySelector('#recognition-input'),
    element = document.querySelector('#recognition-element');

form.addEventListener('submit', function(e) {
    e.preventDefault();
    element.start();
});

element.addEventListener('result', function(e) {
    input.textContent = e.detail.result;
});
</script>

Options

Attribute	Options	Default	Description
continuous	boolean	true	Specifies if the recognition should continue when the user pauses while speaking.
text	string		Returns the recognized text.

Methods

Method	Parameters	Returns	Description
start()	None	Nothing	Starts the voice recognition.
stop()	None	Nothing	Requests to recognition service to stop listening to more audio.
abort()	None	Nothing	Requests to immediately stop listening and stop recognizing.

Events

Event	Description
onstart	Triggers when the recognition begins.
onerror	Triggers when there's a recognition error.
onend	Triggers when the recognition ends.
onresult	Triggers when there's a recognition result.