I'm building a voice assistant with javascript and html, and before I added the weather command (the last 'else if'), the code worked fine, but now, every time I try to ask the program something else, e.g. the date, the time, the innerHTML keeps displaying the weather. I've tried many different things but still with no avail. How come the innerHTML keeps displaying the weather instead of my other commands?
Here is my code, and since it requires mic access, here is the website: https://voice-assistant-development.stcollier.repl.co/. You can try it out yourself to see what I mean.
function record() {
var recognition = new webkitSpeechRecognition();
recognition.lang = "en-GB";
recognition.start();
recognition.onresult = function(event) {
let transcript = event.results[0][0].transcript;
var str = transcript;
//Weather Code
var input = "Detroit";
var desc = document.querySelector('#output');
fetch('https://api.openweathermap.org/data/2.5/weather?q='+input+'&units=imperial&appid=6a3b95f23e761e707120f86b0eed7d55')
.then(response => response.json())
.then(data => {
var tempValue = data['main']['temp'];
var nameValue = data['name'];
var descValue = data['weather'][0]['description'];
var humidvalue=data['main']['humidity'];
var mintemp=data['main']['temp_min'];
var maxtemp=data['main']['temp_max'];
var weather_now = "It's " + tempValue +" degrees Farenheight outsite currently, with a low of " +mintemp + " degrees Farenheight and a high of " + maxtemp + " degrees Farenheight. The humidity percentage for today is " + humidvalue + "%. The current weather is " + descValue + ".";
desc.innerHTML = weather_now;
})
//End of Weather Code
//Date Code
const d = new Date();
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var wkday = weekday[d.getDay()];
const months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
var msg_date = "It's " + wkday + ", " + months[d.getMonth()] + " " + d.getDate() + "th " + d.getFullYear() + "."
//End of Date
//Time Code
function formatAMPM(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
var strTime = "It's " + hours + ':' + minutes + ' ' + ampm;
return strTime;
}
var msg_time = formatAMPM(new Date);
//End of Time
var msg_hello = ['Hello!', 'Hello, User!', 'Hi!', 'Hello! How are you doing?'];
var msg_notunderstood = ["I'm not sure what you mean.", "I don't understand. Maybe try rephrasing?", "I'm sorry, I don't understand. Please try again."]
var affirmative_msg = ['Here you go!', 'Sure thing!']
if (str.includes('hello')) {
responsiveVoice.speak(msg_hello[Math.floor(Math.random()*msg_hello.length)], 'US English Female');
} else if (str.includes('date')) {
document.getElementById('output').innerHTML = msg_date
responsiveVoice.speak(msg_date, 'US English Female')
} else if (str.includes('time')) {
document.getElementById('output').innerHTML = msg_time
responsiveVoice.speak(msg_time, 'US English Female')
} else if (str.includes('email')) {
window.open("mailto:")
} else if (str.includes('weather')) {
document.getElementById('output').innerHTML = weather_now
responsiveVoice.speak(weather_now, 'US English Female')
} else {
document.getElementById('output').innerHTML = "I don't know what you mean."
responsiveVoice.speak(msg_notunderstood[Math.floor(Math.random()*msg_notunderstood.length)], 'US English Female');
}
document.getElementById('speechToText').value = event.results[0][0].transcript;
}
}
//Mic Trigger Key
document.body.onkeyup = function(e){
if(e.keyCode == 32){
record()
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<label for="Speech Recognition">Speech Recognition</label>
<input type="text" name="" id="speechToText" placeholder="Speak Something" disabled="disabled" value="">
<button onclick="record()">Record</button>
<p id="output"></p>
<h1 class="name" id="name"></h1>
<p class="desc"></p>
<script src="https://code.responsivevoice.org/responsivevoice.js?key=x9uXdCB8"></script>
<script src="script.js"></script>
</body>
</html>Thanks for any help. I really appreciate it.
Aucun commentaire:
Enregistrer un commentaire