Microsoft TTS library 사용하여.. Presentation Assistant 개발에 활용

[윤병남]

URL: https://icact.org/Presentation/TTS.asp?pno=20240217&page=04

Is it possible to use JavaScript for converting text to speech?

Author: Rosie Polczynski
Date: 2023-03-26
The code has two buttons - one for entering fullscreen mode and the other for exiting it. 
The final version of the code includes both buttons.

Table of contents
Text to speech with javascript?
Creating a Text-To-Speech program in Vanilla JS
How to play a base64 response from Google Text to Speech as an mp3 audio in browser using Javascript
How do I convert text to speech in JavaScript?
How do I get voice recognition in JavaScript?
How do I add text to speech feature on a website?
Text to speech with javascript?
Question:
Being new to the field, I embarked on a project involving converting text to speech.
The current functionality is satisfactory, but I desire to substitute the tag  input  
with any of the alternate tags such as  p  ,  div  , or any others.
I intend to substitute the (  input  tag) with different ones. 
What is the method to accomplish this task?

AD
Kindly assist me in removing the (  select  tag) option as it is not required.

var txtInput = document.querySelector('#txtInput');
var voiceList = document.querySelector('#voiceList');
var btnSpeak = document.querySelector('#btnSpeak');
var synth = window.speechSynthesis;
var voices = [];
PopulateVoices();
if (speechSynthesis !== undefined) {
  speechSynthesis.onvoiceschanged = PopulateVoices;
}
btnSpeak.addEventListener('click', () => {
  var toSpeak = new SpeechSynthesisUtterance(txtInput.value);
  var selectedVoiceName = voiceList.selectedOptions[0].getAttribute('data-name');
  voices.forEach((voice) => {
    if (voice.name === selectedVoiceName) {
      toSpeak.voice = voice;
    }
  });
  synth.speak(toSpeak);
});
function PopulateVoices() {
  voices = synth.getVoices();
  var selectedIndex = voiceList.selectedIndex < 0 ? 0 : voiceList.selectedIndex;
  voiceList.innerHTML = '';
  voices.forEach((voice) => {
    var listItem = document.createElement('option');
    listItem.textContent = voice.name;
    listItem.setAttribute('data-lang', voice.lang);
    listItem.setAttribute('data-name', voice.name);
    voiceList.appendChild(listItem);
  });
  voiceList.selectedIndex = selectedIndex;
}

  
  
  
  


  Select Voice:
  
 


  
 


  Speak!

Solution:

I've managed to simplify the code I wrote and I'll attempt to provide an explanation.

HTML:

    
Speak this text

 // change to paragraph element but keep the same ID
    Speak!
xxxxJavaScript:

AD

        var txtInput = document.querySelector('#txtInput');
        var btnSpeak = document.querySelector('#btnSpeak');

        var synth = window.speechSynthesis;
        var voices = [];

        PopulateVoices();
        if(speechSynthesis !== undefined){
            speechSynthesis.onvoiceschanged = PopulateVoices;
        }

        btnSpeak.addEventListener('click', ()=> {
            var toSpeak = new SpeechSynthesisUtterance(txtInput.textContent);
            toSpeak.voice = voices[7]; // Spanish
            synth.speak(toSpeak);
        });

        function PopulateVoices(){
            voices = synth.getVoices();
            voices.forEach((item, index) => console.log(item.name, index));
        }
The input was modified to a paragraph element, while keeping the same ID assigned. 
Consequently, the ID and element names are no longer relevant, especially for academic purposes. 
It is crucial to have only one ID in the DOM at a time. 
Therefore, ensure that the other element is removed if it's a duplicate, 
or modify the ID of the element and update the js selector accordingly.

Text
var elementID = document.querySelector('#foo');

In the function preceding this, you are obtaining the input text value by utilizing:

var toSpeak = new SpeechSynthesisUtterance(txtInput.value);
As the value attribute is not present in the paragraph element, we modify it in the following way:

var toSpeak = new SpeechSynthesisUtterance(txtInput.textContent);
This will retrieve the text content located within.

To aid in debugging, I am logging all voice names and corresponding indices that I receive from the API as an array.

voices.forEach((item, index) => console.log(item.name, index));
Which returns for example:

Microsoft David - English (United States) 0
Microsoft Mark - English (United States) 1
Microsoft Zira - English (United States) 2
...
The console displays each available voice, and currently, 
I have selected index 7 (Google Español) as the preset voice. 
To choose a different voice, you will need to update the corresponding index.

toSpeak.voice = voices[7]; // Spanish
I trust that the concept is clear, 
although the code is now blending outdated ES5-style syntax with newer versions that are more current. 
While it's not my preferred approach, the result should still function as intended.

You have the option to experiment with a jsfiddle as well.