Creating something that takes non-speech input from a person and responses with speech synthesis
Based on the introduction to text-to-speech from the last week, I wanted to explore more with voice distortion such as rate, male or female, pitch and etc and looked through this page.
First, I wrote a code to get mouse position and then tried to pass the value to pitch and rate.
In html, I assigned the whole body as an interactive canvas triggering a function which is mousePos on mouse click event.
//in index.html
<body onclick="mousePos(event)">
//in script.js
let text;
function mousePos(event){
let x = event.clientX;
let y = event.clientY;
speak(x,y);
}
By receiving the mouse position, the values go to speak function which happens speech synthesis like below:
//in script.js
let pitchValue;
let rateValue;
rateValue=x/(window.innerWidth/3)+0.1;
pitchValue= y/(window.innerHeight/2);
After adjusted values of mouse position to make speech synthesis easier to hear or recognize what the computer is saying, I came up with an idea making this site that users can see what has been submitted like a wall. To make this happen, make an array that stores values of submitted data, formats them as a html text, and inserts into html.
//in script.js
let stringA = "<div><button id=button"+k;
let stringB = " style="+'"position:absolute; color:rgb('+colorR+','+colorG+','+colorB+'); left:'+x+'; top:'+y+';';
let stringC= ">"+text+"</button></div>";
arr[k]=stringA+stringB+stringC;
k++;
let full="";
for(let i =0; i<k; i++){
console.log(i+" : "+arr[i]+"\\n");
full+=arr[i];
}
document.getElementById("insert").innerHTML=full;
let utterThis = new SpeechSynthesisUtterance(text);
The outcome is like this:
If the user click on the button already created, the user can hear the speech with the same rate and pitch that the previous user made and heard as well.
See the full code in this link, and see the website here.
Glitches