How to create a text-to-speech application with JavaScript

Now we can show the application Text to speech on the website. Generally applications Text to speech only exists in Smartphones. You don’t have to linger any longer, just open your computer and we’ll create a text-to-speech application with JavaScript.

Tutorials

1. Open the XAMPP control panel and activate Apache.

2. Open the text editor program installed on your computer, here I use the text editor Notepad ++. Enter the following HTML5 code.

	  	  	  	  Membuat Aplikasi Text To Speech	  	  	  	  	  	  	  	  

Save the above HTLM5 code in the xampplite folder – htdocs – create a new folder named Text to speech – save the code above with the name index.html.

3. To see the results of the script code above, you can open your browser and type http: // localhost / TextToSpeech.

4. Enter the following CSS code.

   body {      width: 90%;      margin: 0 auto;      margin-top: 1rem;	  background: #2c3e50;    }    #text {      width: 100%;      height: 50vh;    }

Save the CSS code in the xampplite folder – htdocs – create a new folder named Text to speech– Save the CSS code under the name style.css.

5. Reload the URL address: http: // localhost / TextToSpeech. First view of the application Text to speech.

6. To use the application, open the text editor again and enter the following JavaScript code.

const playButton = document.getElementById('play-button')const pauseButton = document.getElementById('pause-button')const stopButton = document.getElementById('stop-button')const textInput = document.getElementById('text')const speedInput = document.getElementById('speed')let currentCharacterplayButton.addEventListener('click', () => {  playText(textInput.value)})pauseButton.addEventListener('click', pauseText)stopButton.addEventListener('click', stopText)speedInput.addEventListener('input', () => {  stopText()  playText(utterance.text.substring(currentCharacter))})const utterance = new SpeechSynthesisUtterance()utterance.addEventListener('end', () => {  textInput.disabled = false})utterance.addEventListener('boundary', e => {  currentCharacter = e.charIndex})function playText(text) {  if (speechSynthesis.paused && speechSynthesis.speaking) {    return speechSynthesis.resume()  }  if (speechSynthesis.speaking) return  utterance.text = text  utterance.rate = speedInput.value || 1  textInput.disabled = true  speechSynthesis.speak(utterance)}function pauseText() {  if (speechSynthesis.speaking) speechSynthesis.pause()}function stopText() {  speechSynthesis.resume()  speechSynthesis.cancel()}

Save the JavaScript code in the xampplite folder – htdocs – create a new folder named Text to speech– Save the JavaScript code with the name script.js.

7. Reload the URL address: http: // localhost / TextToSpeech. Appearance of the application Text to speech.

Enter the text you want to convert to tone.

Set the text reading speed and click the play button to hear the text.

8. Done.

Hence the explanation of the tutorial ‘How to create a text-to-speech application with JavaScript’. Much luck.






Leave a Reply

Your email address will not be published.