Text to Speech using JavaScript in Firefox and Chrome (Feb 2022)

Your voice:

You have chosen the voice: .
Voice URI:

Firefox 97.0.1 (64-bit) -- Default Voice: Female
Chrome 98.0.4758.102 (Official Build) (64-bit) -- Default Voice: Male    
    

All The Available Voices in Firefox

>>> window.speechSynthesis.getVoices()

Array [ SpeechSynthesisVoice, SpeechSynthesisVoice ]
​
0: SpeechSynthesisVoice { voiceURI: "urn:moz-tts:sapi:Microsoft David Desktop - English (United States)?en-US", name: "Microsoft David Desktop - English (United States)", lang: "en-US", … }
​
1: SpeechSynthesisVoice { voiceURI: "urn:moz-tts:sapi:Microsoft Zira Desktop - English (United States)?en-US", name: "Microsoft Zira Desktop - English (United States)", lang: "en-US", … }
​
length: 2
​
<prototype>: Array []
    

All The Available Voices in Chrome

>>> window.speechSynthesis.getVoices()

(22) [SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice, SpeechSynthesisVoice]

0: SpeechSynthesisVoice {voiceURI: 'Microsoft David - English (United States)', name: 'Microsoft David - English (United States)', lang: 'en-US', localService: true, default: true}
1: SpeechSynthesisVoice {voiceURI: 'Microsoft Mark - English (United States)', name: 'Microsoft Mark - English (United States)', lang: 'en-US', localService: true, default: false}
2: SpeechSynthesisVoice {voiceURI: 'Microsoft Zira - English (United States)', name: 'Microsoft Zira - English (United States)', lang: 'en-US', localService: true, default: false}
3: SpeechSynthesisVoice {voiceURI: 'Google Deutsch', name: 'Google Deutsch', lang: 'de-DE', localService: false, default: false}
4: SpeechSynthesisVoice {voiceURI: 'Google US English', name: 'Google US English', lang: 'en-US', localService: false, default: false}
5: SpeechSynthesisVoice {voiceURI: 'Google UK English Female', name: 'Google UK English Female', lang: 'en-GB', localService: false, default: false}
6: SpeechSynthesisVoice {voiceURI: 'Google UK English Male', name: 'Google UK English Male', lang: 'en-GB', localService: false, default: false}
7: SpeechSynthesisVoice {voiceURI: 'Google español', name: 'Google español', lang: 'es-ES', localService: false, default: false}
8: SpeechSynthesisVoice {voiceURI: 'Google español de Estados Unidos', name: 'Google español de Estados Unidos', lang: 'es-US', localService: false, default: false}
9: SpeechSynthesisVoice {voiceURI: 'Google français', name: 'Google français', lang: 'fr-FR', localService: false, default: false}
10: SpeechSynthesisVoice {voiceURI: 'Google हिन्दी', name: 'Google हिन्दी', lang: 'hi-IN', localService: false, default: false}
11: SpeechSynthesisVoice {voiceURI: 'Google Bahasa Indonesia', name: 'Google Bahasa Indonesia', lang: 'id-ID', localService: false, default: false}
12: SpeechSynthesisVoice {voiceURI: 'Google italiano', name: 'Google italiano', lang: 'it-IT', localService: false, default: false}
13: SpeechSynthesisVoice {voiceURI: 'Google 日本語', name: 'Google 日本語', lang: 'ja-JP', localService: false, default: false}
14: SpeechSynthesisVoice {voiceURI: 'Google 한국의', name: 'Google 한국의', lang: 'ko-KR', localService: false, default: false}
15: SpeechSynthesisVoice {voiceURI: 'Google Nederlands', name: 'Google Nederlands', lang: 'nl-NL', localService: false, default: false}
16: SpeechSynthesisVoice {voiceURI: 'Google polski', name: 'Google polski', lang: 'pl-PL', localService: false, default: false}
17: SpeechSynthesisVoice {voiceURI: 'Google português do Brasil', name: 'Google português do Brasil', lang: 'pt-BR', localService: false, default: false}
18: SpeechSynthesisVoice {voiceURI: 'Google русский', name: 'Google русский', lang: 'ru-RU', localService: false, default: false}
19: SpeechSynthesisVoice {voiceURI: 'Google 普通话（中国大陆）', name: 'Google 普通话（中国大陆）', lang: 'zh-CN', localService: false, default: false}
20: SpeechSynthesisVoice {voiceURI: 'Google 粤語（香港）', name: 'Google 粤語（香港）', lang: 'zh-HK', localService: false, default: false}
21: SpeechSynthesisVoice {voiceURI: 'Google 國語（臺灣）', name: 'Google 國語（臺灣）', lang: 'zh-TW', localService: false, default: false}
length: 22
[[Prototype]]: Array(0)
    

Error Messages From Knockout

1#
Uncaught Error: ko.applyBindings: could not find document.body; has the document been loaded?
uc https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js:84
<anonymous> file:///C:/Users/Ashish Jain/OneDrive/Desktop/Twinkle Twinkle, Little Star (Word by Word Reading).html:81

2#
Uncaught TypeError: Unable to process binding "text: function(){return selectedVoice().voiceName }"
Message: selectedVoice() is undefined
    text https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js line 74 > Function:3
    update https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js:110
    q https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js:79
    xd https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js:55
    yd https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js:55
    ha https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js:54
    $ https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js:52
    q https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js:79
    C https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js:11
    q https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js:78
    l https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js:76
    m https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js:76
    l https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js:76
    m https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js:76
    l https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js:76
    uc https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js:85
    <anonymous> file:///C:/Users/Ashish Jain/OneDrive/Desktop/Twinkle Twinkle, Little Star (Word by Word Reading).html:111

Message appears in console when page loads the first time, no issues in the page functionality.

This line produces the above error:
<span data-bind="text: selectedVoice().voiceName"></span>
<span data-bind="text:selectedVoice() ? selectedVoice().voiceIx : 'unknown'"></span>.

Tags: Web Development,JavaScript,Technology,