From 6416e85667389d7d066ff02b455e4a2f26631566 Mon Sep 17 00:00:00 2001
From: jordan moldovan <86577524+jmoldyvan@users.noreply.github.com>
Date: Sat, 16 Apr 2022 20:58:47 -0700
Subject: [PATCH 1/4] Update main.js
---
js/main.js | 132 ++++++++++++++++++++++++++++++++++-------------------
1 file changed, 86 insertions(+), 46 deletions(-)
diff --git a/js/main.js b/js/main.js
index fdf218e..1e1a150 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,52 +1,92 @@
+// globally define variables
+let voice
+let voices
+select = document.querySelector('#voiceSelect')
+
+//set function to populate a dropdown select tab in html with the list of getvoices method
+function populateVoiceList() {
+ if (typeof speechSynthesis === 'undefined') {
+ return;
+ }
+ voices = speechSynthesis.getVoices()
+ for (let i = 0; i < voices.length; i++) {
+ let option = document.createElement('option');
+ option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+
+ if (voices[i].default) {
+ option.textContent += ' -- DEFAULT';
+ }
+
+ option.setAttribute('data-lang', voices[i].lang);
+ option.setAttribute('data-name', voices[i].name);
+ document.getElementById("voiceSelect").appendChild(option);
+ }
+}
+
+// make event listener, on change of the dropdown, the voice and lang changes to the selected name
+select.addEventListener('change', event => {
+
+ voice = voices.find(({ name, lang }) => `${name} (${lang})` === event.target.value)
+ console.log(voices, event.target.value)
+})
+
+// call function to populate
+populateVoiceList();
+if (typeof speechSynthesis !== 'undefined' && speechSynthesis.onvoiceschanged !== undefined) {
+ speechSynthesis.onvoiceschanged = populateVoiceList;
+}
+
+
function MakeNewUtterance(boxNumber, utteranceWord, imgSrc, bgColor, altText) {
- this.synth1 = window.speechSynthesis;
- this.sayWord = () => {
- if (window.speechSynthesis.speaking) {
- // there's an unfinished utterance
- window.speechSynthesis.resume();
- } else {
- // start new utterance
- const utterance = new SpeechSynthesisUtterance(utteranceWord);
-
- this.synth1.speak(utterance);
- };
+ this.synth1 = window.speechSynthesis;
+ this.sayWord = () => {
+ if (window.speechSynthesis.speaking) {
+ // there's an unfinished utterance
+ window.speechSynthesis.resume();
+ } else {
+ // start new utterance
+ const utterance = new SpeechSynthesisUtterance(utteranceWord);
+ utterance.voice = voice
+ this.synth1.speak(utterance);
};
-
- let boxSpitter = "";
- document.getElementById('mainContainer').insertAdjacentHTML("beforeend", boxSpitter);
- // "";
-
- let box = document.querySelector("#box-" + boxNumber);
- box.addEventListener("click", this.sayWord.bind(this));
-
- }
+ };
- for (let i = 0; i < dataList.length; i++) {
- let x = dataList[i].title
- x = new MakeNewUtterance(dataList[i].id + 1, dataList[i].title, dataList[i].imageSrc, dataList[i].cssClass, dataList[i].imageAlt);
+ let boxSpitter = "";
+ document.getElementById('mainContainer').insertAdjacentHTML("beforeend", boxSpitter);
+ // "";
+
+ let box = document.querySelector("#box-" + boxNumber);
+ box.addEventListener("click", this.sayWord.bind(this));
+
+}
+
+
+for (let i = 0; i < dataList.length; i++) {
+ let x = dataList[i].title
+ x = new MakeNewUtterance(dataList[i].id + 1, dataList[i].title, dataList[i].imageSrc, dataList[i].cssClass, dataList[i].imageAlt);
+}
+
+const synth = window.speechSynthesis;
+
+// Code for click event to add tiles. Just a test
+
+// document.querySelector('#addBtn').addEventListener('click', () => {
+// let insertWord = document.querySelector("#keyboard").value;
+// new MakeNewUtterance(insertWord, insertWord, 'plastic_bag.svg', 'darkGreen')
+// })
+
+document.querySelector("#submitText").addEventListener("click", run)
+
+document.querySelector('#keyboard').addEventListener('keydown', e => {
+ if (e.keyCode == 13) {
+ e.preventDefault()
+ return run()
}
-
- const synth = window.speechSynthesis;
-
- // Code for click event to add tiles. Just a test
-
- // document.querySelector('#addBtn').addEventListener('click', () => {
- // let insertWord = document.querySelector("#keyboard").value;
- // new MakeNewUtterance(insertWord, insertWord, 'plastic_bag.svg', 'darkGreen')
- // })
-
- document.querySelector("#submitText").addEventListener("click", run)
-
- document.querySelector('#keyboard').addEventListener('keydown', e => {
- if (e.keyCode == 13) {
- e.preventDefault()
- return run()
- }
- });
-
- function run() {
-
- const typeToTalk = document.querySelector("#keyboard").value;
+});
+
+function run() {
+
+ const typeToTalk = document.querySelector("#keyboard").value;
const yellText = `${typeToTalk}`;
document.querySelector("#keyboard").innerText = yellText;
@@ -54,4 +94,4 @@ function MakeNewUtterance(boxNumber, utteranceWord, imgSrc, bgColor, altText) {
let yellThis = new SpeechSynthesisUtterance(yellText);
synth.speak(yellThis);
-}
\ No newline at end of file
+}
From e8c8b1f4a0a660b6cf39dc8260a622c02f9cea05 Mon Sep 17 00:00:00 2001
From: jordan moldovan <86577524+jmoldyvan@users.noreply.github.com>
Date: Sat, 16 Apr 2022 20:59:56 -0700
Subject: [PATCH 2/4] Update index.html
---
index.html | 51 +++++++++++++++++++++++++++++----------------------
1 file changed, 29 insertions(+), 22 deletions(-)
diff --git a/index.html b/index.html
index 3b5ca89..dfbc75e 100644
--- a/index.html
+++ b/index.html
@@ -1,32 +1,38 @@
-
-
-
-
-
-
-
-
-
-
-
- Talk To Me Technology
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+ Talk To Me Technology
+
+
+
+
+
+
Talk to me Technology
-
-
+
-
\ No newline at end of file
+
+