ai voice assistant (html, css, javascript)

this ai voice assistant is a browser-based smart assistant built using html, css, and javascript. it uses modern web apis like speech recognition and speech synthesis to interact with users through voice commands. the assistant can listen, understand, and respond to user queries in real-time.

objective

the main objective of this project is to demonstrate how voice-based interaction can be implemented in web applications using javascript, creating a smart and interactive user experience.

technologies used

html5: structure of the application
css3: ui design and animations
javascript: logic and voice processing
speech recognition api: converts voice to text
speech synthesis api: converts text to speech

core features

voice input: user can give commands using microphone
voice response: assistant replies using speech
greeting system: auto greeting based on time (morning/afternoon/evening)
smart commands: recognizes multiple voice commands
website navigation: opens google, youtube, instagram, etc.
time & date: tells current time and date
fallback search: unknown commands open google search

how it works (code explanation)

1. speech output (speakfunc):
uses speechsynthesisutterance to convert text into voice and speak it.

2. greeting function:
checks current time using date() and greets user accordingly.

3. voice input (speech recognition):
uses webkitspeechrecognition to capture user's voice and convert it into text.

4. command handler:
the handlecommands() function checks user input and performs actions like opening websites or speaking responses.

5. button interaction:
when user clicks microphone button, voice recognition starts and icon toggles.

supported commands

say "hello" → assistant greets you
"open youtube / google / instagram"
"tell me time" → speaks current time
"tell me date" → speaks current date
"open website" → opens predefined links
unknown command → opens google search

user interface

robot ui: visual assistant representation
microphone button: start/stop listening
animated effects: active listening indication

instructions

download the project zip file
important: extract (unzip) the file before running
open the extracted folder
run as live server index.html in your browser
allow microphone permission when prompted
use google chrome for best performance (speech api support)

project highlights

this project demonstrates advanced front-end capabilities including voice recognition, speech synthesis, event handling, and real-time interaction. it simulates a real ai assistant experience using pure javascript.

conclusion

the ai voice assistant is an innovative and interactive project that showcases modern web technologies. it is a perfect example of how ai-like features can be implemented in web applications without external libraries.

ai voice assistant

expense tracker app

neon snake game

calculator

digital clock

neon calculator