Create something that takes voice input from a person and responds without text.
When I think of speech input, I came up with "song association". I've watched several Youtube clips that celebrities sings which starts with a given word and monotonous tone of voice links to a melody seems interesting, so I found Spotify API. However, it seems I need to use Node.js, Require and etc - need some time to make a use of it.
Instead, I decided to make a simple English - Korean Translator by using Korean translation api. To use the api, I used Node.js and made a "server.js"file.
//in server.js, app gets
form: {
'source': "en",
'target': "ko",
'text': req.query.text
}
//and post after parsing JSON file and get translated text only like below:
request.post(options, function (error, response, body){
if(!error && response.statusCode ==200){
res.writeHead(200,{
'Content-Type': 'text/json;charset=utf-8'
});
console.log(body);
let data = JSON.parse(body);
console.log(data);
resultTxt = data.message.result.translatedText;
res.end(resultTxt);
}else{
res.status(response.statusCode).end();
console.log('error = '+response.statusCode);
}
});
//result
app.get("/default", (request,response) => {
response.send(resultTxt);
})
The result comes out like this when I console.log the response.
Screen Recording 2021-09-16 at 12.25.54 PM.mov
After made a simple translator receiving speech, wanted to utilize Giphy by a given word, which is translated Korean word - and see what comes up. So got a Giphy Search API and wrote a code.
//in script.js
const url = `http://api.giphy.com/v1/gifs/search?q=${phrase}&api_key=${giphyAPIKey}`
fetch(url, { mode: "cors"})
.then((response) => response.json())
.then((result) => {
console.log(result);
let counts = result.data.length;
let newDiv;
for(let i = 0; i<counts; i++){
console.log(result.data[i].images.original.url);
newDiv = document.createElement("div");
newDiv.setAttribute('id',`new${i}`)
document.body.append(newDiv);
console.log(newDiv.childNodes);
let img = '<img id="gif'+i+'" src="'+result.data[i].images.original.url+'">';
console.log(img);
document.getElementById(`new${i}`).innerHTML = img;
}
