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

Reload the page to hear it again.

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

¡Habla

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

Speak!

<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