Your Secret Friend: the Anti-Gossiping tool made with Web Speech API

Once I needed to “create something that takes non-speech input from a person and responds with speech synthesis”. I made an app prototype that I sort of planned earlier specifically for this class — Anti-Gossiping Tool.

You can share anything with me.

Concept

The thing is, I sometimes gossip. I am not saying I do it more than anyone but, unfortunately, I don’t do it LESS than anyone either and I always feel bad afterwards. However, I remember one of my friends telling me that gossiping has a very important social function and that it’s one of the main things that differentiate us from animals.

So, the goal of this tool is to keep the important social function of gossiping but get rid of the feeling of guilt and make sure it really doesn’t harm anybody.

On the tool’s web page the user finds the input field for their secret; once they type the secret ant hit “SHARE” button they get a voice comment from the computer “Wow, that’s juicy!”.

If user hits “GET A SECRET” button, they will receive a message from across the network: the gossip from the other user THEY NEVER MET (for sake of not harming any mutual acquaintances). I plan to use WebRTC for the networking purpose, at this stage I’ve just created the array of random secrets. Computer tells random secrets with random voices.

And finally, I put the images of cute and really carefully listening dogs on the webpage because I believe dogs are the ones you can share your secrets and darkest gossips with quite fearlessly: they are so noble and understanding, and loving, and kind, that they will never spread it or judge you.

Demo & Code

+ Code on GitHub.

Process & Challenges

At first, I considered using machine learning (one of the models from RunwayML) to generate the gossips in response.

I also considered using some kind of the API that takes the headlines from the tabloids (so that I could use it for the gossips on the other end) but I didn’t really find something like that and also wasn’t sure that it really communicates the idea.

I then turned to the peer-to-peer connection so that this could potentially be multi-user human experience. I still would love to develop it this way but decided to work with “imaginary” user on the other end for the sake of the first prototype. I also need to figure out the code for WebRTC part, because my fast and furious attempts to make it work led only to the necessity to comment them all out for now:

Well, it partially worked.

The trickiest part to figure was to get a random voice to share the gossips and to say “Wow, that’s so juicy!”. I solved it with the help of both main Web Speech API repo, Digital Ocean tutorial, and my brilliant professor Nicole He. I put the snippet of code that randomizes the voices here because I truly believe it might be useful for someone else.

const synth = window.speechSynthesis;
var voices = [];
const speak = text => {
if(synth.speaking) {
console.error(“already talking”);
return;
}
voices = synth.getVoices();
let voicePick = voices[Math.floor(Math.random() * voices.length)];
let utterThis = new SpeechSynthesisUtterance(text);
utterThis.voice = voicePick;
synth.speak(utterThis);
}