Advanced Voice Command Website (Jarvis-Style AI Assistant) – Build Your Own AI-Powered Assistant!

## 🚀 **Introduction**  

Imagine having your own **AI-powered assistant** like **Jarvis from Iron Man**, capable of understanding and executing **voice commands**! Sounds exciting, right? In this blog, we’ll explore how I built an **Advanced Voice Command Website** using **HTML, CSS, and JavaScript**.  

This AI Assistant can **open websites, tell the time, give weather updates, play music, tell jokes, and much more—all through voice commands!**  

## 🎯 **Key Features of the Jarvis-Style AI Assistant**  

✅ **Voice Recognition** – Uses the browser's **Speech Recognition API**.  

✅ **Open Websites** – Commands like *"Open Google", "Open YouTube", "Open Wikipedia"*.  

✅ **Real-Time Updates** – Get the **current time, date, and weather** instantly.  

✅ **Play Music & Tell Jokes** – Say *"Play music"* or *"Tell me a joke"* for entertainment.  

✅ **Theme Change** – Say *"Change theme"* to switch website appearance dynamically.  

✅ **User-Friendly Interface** – A **clean, professional UI with animations** for a futuristic feel.  

## 🛠️ **Tech Stack Used**  

- **HTML** – Structure of the website  

- **CSS** – Styling & animations  

- **JavaScript** – Voice recognition & command execution (using the Web Speech API)  

## 📌 **How It Works**  

The assistant listens for **voice commands**, processes them, and performs the required action. Let’s break it down:  

### **1️⃣ Voice Recognition (Using JavaScript's Web Speech API)**  

JavaScript provides a built-in API for voice recognition:  

```javascript

const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();

recognition.onresult = function(event) {

    let command = event.results[0][0].transcript.toLowerCase();

    processCommand(command);

};

```

### **2️⃣ Processing Commands & Taking Action**  

After recognizing the voice input, the assistant determines the task:  

```javascript

function processCommand(command) {

    if (command.includes("open google")) {

        window.open("https://www.google.com", "_blank");

    } else if (command.includes("what is the time")) {

        speak(`The current time is ${new Date().toLocaleTimeString()}`);

    } else if (command.includes("play music")) {

        window.open("https://open.spotify.com", "_blank");

    } else {

        speak("Sorry, I didn't understand that.");

    }

}

```

### **3️⃣ Speaking the Response (Using Speech Synthesis API)**  

The assistant also speaks back using **Text-to-Speech (TTS):**  

```javascript

function speak(text) {

    let speech = new SpeechSynthesisUtterance(text);

    speech.voice = window.speechSynthesis.getVoices()[0];

    window.speechSynthesis.speak(speech);

}

## 🎨 **Adding a Futuristic UI with Animations**  

To give the assistant a **Jarvis-style look**, I used **CSS animations and transitions**.  

```css

@keyframes glow {

    0% { box-shadow: 0 0 10px #2ecc71; }

    50% { box-shadow: 0 0 20px #2ecc71; }

    100% { box-shadow: 0 0 10px #2ecc71; }

}

.voice-assistant {

    background: black;

    color: #2ecc71;

    padding: 20px;

    border-radius: 10px;

    text-align: center;

    animation: glow 2s infinite;

}

## 🌍 **Live Demo & Source Code**  

🔗 **Live Demo:** [Click Here](https://miniprojectbytes.blogspot.com/?m=1)  

📂 **GitHub Repo:** [GitHub Link]  

## 📢 **Conclusion**  

Building this **AI-powered voice assistant** was an exciting journey! This project showcases how **JavaScript can be used to create intelligent, interactive web applications**.