speechSynthesis

Question

witam, dlaczego mi to w .join nie wchodzi? za duże?

const arr = [];
window.speechSynthesis.onvoiceschanged = function() 
{
    for (let i = 0; i < 322; i++) 
    {
        var name = window.speechSynthesis.getVoices()[i].name;
        arr.push(name);
    }
    return arr;
}                
function get_arry() 
{
    return arr;
}
const viovcer = get_arry();
const viovcer_join = viovcer.join("");
const btoa_viovcer = btoa(viovcer_join);
//window.location= "?voices=" + encodedArray;
console.log(btoa_viovcer);

druga funkcja niepotrzebna ale już kombinuje z tym join

Answer 1

Problemem może być to, że próbujesz połączyć wszystkie elementy tablicy w jedną długą, jako ciąg znaków.
Tak naprawdę masz tych elementów z tego co widzę okolo 322.W JavaScript istnieje limit długości ciągu znaków, który wynosi około 2^53 - 1 znaków.
Więc nie wiem jak długie są te ciągi... 

Spróbuj podzielić to na tak zwane "fragmentowanie" z ang chunk np. 
 

for (let i = 0; i < viovcer.length; i += chunkSize) {
    const chunk = viovcer.slice(i, i + chunkSize).join("");
    viovcer_join += chunk;
}

takie podejście pozwoli połączyć elementy partiami, tym samym uniknąc  przekroczenia limitu długości ciągu znaków. 

Comments

Jeszcze jedna sprawa mi przyszła do głowy funkcja  btoa(). ma limit na kodowanie w base64
Więc wtedy fragmentowanie musi też uwzględnić te funkcje 

Answer 2

Jesteś pewien, że masz w systemie 322 zainstalowane "głosy", spróbuj użyć pętli, która nie wymaga podania jej długości do iterowania na "sztywno";

Sprawdź np. (u Mnie pokazało tylko 2 - obrazek poniżej):

<style>
  pre {
    width: 400px;
    background-color: black;
    color: limegreen;
    font: 400 .9rem/1 system-ui, monospace;
    padding: .5rem;
  }
</style>

<pre></pre>

<script>
  const voices_arr = [];

  window.onload = _=> {
    if (typeof speechSynthesis !== "undefined" &&
        speechSynthesis.onvoiceschanged !== undefined
       ) {
      speechSynthesis.onvoiceschanged = populateVoiceArray;
    }
  }

  function populateVoiceArray() {
    if (typeof speechSynthesis === "undefined") return;

    const voices = speechSynthesis.getVoices();
    let index = 0;
    for (const voice of voices) {
      voices_arr.push(`${voice.name} (${voice.lang})`);
      document.querySelector('pre').textContent += `${++index}. ${voice.name} (${voice.lang}) \n`;
    }

    //console.log(voices_arr);
  }
</script>

Comments

dzięki, zrobiłem w końcu tak, zastanawiam się tylko czy można to ładniej zrobić za pomocą querySelector, próbowałem kilka razy ale nie wychodziło to zrobiłem tak

<select name="voice" id="voice"></select>
<script>
const voices_arr = [];
window.onload = _=> 
{
    if(typeof speechSynthesis !== 'undefined' && speechSynthesis.onvoiceschanged !== undefined) 
    {
        speechSynthesis.onvoiceschanged = populateVoiceArray;
    }
}
function populateVoiceArray() 
{
    if(typeof speechSynthesis === 'undefined') return;
    const voices = speechSynthesis.getVoices();
    let index = -1;
    for(const voice of voices) 
    {
        voices_arr.push('<option value="' + `${++index}` + '">' + `${voice.name} (${voice.lang})` + '</option>');
    }
    const voices_join = voices_arr.join("");
    document.getElementById('voice').innerHTML = '<option>select a voice</option>'  + voices_join ;
    //console.log(voices_join);
}
</script>

a tak przy okazji u mnie pokazuje wszystkie 322

---

@VBService, 

dzięki

<select name="voice_select" id="voice_select"></select>
<script>
const voices_arr = [];
window.onload = _=> 
{
    if(typeof speechSynthesis !== 'undefined' && speechSynthesis.onvoiceschanged !== undefined) 
    {
        speechSynthesis.onvoiceschanged = populateVoiceArray;
    }
}
function populateVoiceArray() 
{
    if(typeof speechSynthesis === 'undefined') return;
    const voices = speechSynthesis.getVoices();
    let index = -1;
    for(const evoice of voices) 
    {
        voices_arr.push('<option value="' + `${++index}` + '">' + `${evoice.name} (${evoice.lang})` + '</option>');
    }
    const voices_join = voices_arr.join("");
    document.getElementById('voice_select').innerHTML = '<option value="">select a voice</option>'  + voices_join ;
    //console.log(voices_join);
}
const selectElement = document.getElementById('voice_select');
selectElement.addEventListener('change', function() 
{
    const selectedValue = selectElement.value;	
	const utterance = new SpeechSynthesisUtterance();
	utterance.text = "To jest test głosów";
	utterance.voice = window.speechSynthesis.getVoices()[selectedValue];
	utterance.pitch = 1.4; 
	utterance.rate = 1.0;
	window.speechSynthesis.cancel();
	window.speechSynthesis.speak(utterance);    
    selectElement.addEventListener.cancel();
});
</script>

nie wiem dlaczego znika wszystko przy odświeżaniu na CTRLF5, natomiast to znowu dubluje z resetem na selekcie html, zwariuje z tym , heh

 Uncaught TypeError: selectElement.addEventListener.cancel is not a function at HTMLSelectElement

---

@dido, 

a tak przy okazji u mnie pokazuje wszystkie 322

no to pojechałeś na grubo 

---

Sprawdź to

<select name="voice_select" id="voice_select"></select>

<script>
  const voices_arr = [];
  window.onload = _=> 
  {
    if(typeof speechSynthesis !== 'undefined' && speechSynthesis.onvoiceschanged !== undefined) 
    {
      speechSynthesis.onvoiceschanged = populateVoiceArray;
    }
  }

  const voiceSelect = document.querySelector('#voice_select');

  function populateVoiceArray() 
  {
    if(typeof speechSynthesis === 'undefined') return;

    const voices = speechSynthesis.getVoices();
    let index = 0;
    for(const voice of voices) 
    {
      voices_arr.push(`<option value="${index++}">${voice.name} (${voice.lang})</option>`);
    }

    voiceSelect.innerHTML = '<option selected disabled>Select a voice</option>' + voices_arr.join('');
    //console.log(voices_join);
  }  
  voiceSelect.addEventListener('change', _=> 
  {
    if (isNaN(voiceSelect.value)) return;  

    const utterance = new SpeechSynthesisUtterance();    
    utterance.voice = speechSynthesis.getVoices()[voiceSelect.value];
    utterance.text  = "To jest test głosu " + utterance.voice.name;
    utterance.pitch = 1.4; 
    utterance.rate  = 1.0;
    
    speechSynthesis.cancel();
    speechSynthesis.speak(utterance);
  });
</script>

 

 

BTW,

W js-ie różnica między ++i a i++ polega na tym, kiedy następuje zwiększenie wartości zmiennej i.

• ++i: zwiększa wartość zmiennej i o 1 przed użyciem jej w wyrażeniu.
• i++: zwiększa wartość zmiennej i o 1 po użyciu jej w wyrażeniu.

---

wiedziałem że to będzie jakaś banalna zasada, no ale plusików po odpowiedniej stronie się nie spodziewałem hehe, dzięki

Answer 3

Problemem może być to, że próbujesz połączyć wszystkie elementy tablicy w jedną długą, jako ciąg znaków.

można użyć document.createDocumentFragment

<select name="voice_select" id="voice_select">
  <option selected disabled>Select a voice</option>
</select>

<script>
  window.onload = _=> 
  {
    if(typeof speechSynthesis !== 'undefined' && speechSynthesis.onvoiceschanged !== undefined) 
    {
      speechSynthesis.onvoiceschanged = populateVoiceArray;
    }
  }

  const voiceSelect = document.querySelector('#voice_select');

  function populateVoiceArray() 
  {
    if(typeof speechSynthesis === 'undefined') return;

    const voices = speechSynthesis.getVoices();
    const options = document.createDocumentFragment();

    let index = 0;
    for (const voice of voices) {
      const option = document.createElement('option');
      option.value = index++;
      option.textContent = `${voice.name} (${voice.lang})`;
      options.appendChild(option);
    }

    voiceSelect.appendChild(options);
  }  
  voiceSelect.addEventListener('change', _=> 
  {
    if (isNaN(voiceSelect.value)) return;  

    const utterance = new SpeechSynthesisUtterance();    
    utterance.voice = speechSynthesis.getVoices()[voiceSelect.value];
    utterance.text  = "To jest test głosu " + utterance.voice.name;
    utterance.pitch = 1.4; 
    utterance.rate  = 1.0;

    speechSynthesis.cancel();
    speechSynthesis.speak(utterance);
  });
</script>