Using Your Microphone to Prompt ChatGPT with JavaScript
In today’s tech-savvy world, integrating voice input into web applications can enhance user experience. This guide will walk you through creating a simple web application that allows you to speak to ChatGPT and receive responses based on your voice prompts.
What You'll Need
Basic understanding of HTML, CSS, and JavaScript.
An API key from OpenAI to access ChatGPT.
A modern web browser that supports the Web Speech API.
Step 1: Set Up Your HTML Structure
Start by creating a simple HTML page with a button to start voice recognition and a text area to display responses.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Voice Input to ChatGPT</title>
</head>
<body>
<h1>ChatGPT Voice Input</h1>
<button id="start-btn">Speak</button>
<h2>Response:</h2>
<textarea id="response" rows="10" cols="50"></textarea>
<script src="app.js"></script>
</body>
</html>
Step 2: Implement JavaScript for Voice Recognition
In your app.js file, you’ll set up the Web Speech API to handle voice recognition. When the user clicks the "Speak" button, the microphone will activate, capturing their voice input.
const startButton = document.getElementById('start-btn');
const responseArea = document.getElementById('response');
startButton.addEventListener('click', () => {
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.onstart = () => {
console.log('Voice recognition activated. Try speaking into the microphone.');
};
recognition.onresult = async (event) => {
const transcript = event.results[0][0].transcript;
console.log(`You said: ${transcript}`);
const response = await fetchChatGPTResponse(transcript);
responseArea.value = response;
};
recognition.start();
});
async function fetchChatGPTResponse(prompt) {
const response = await fetch('https://api.openai.com/v1/chat/completions', {
method: 'POST',
headers: {
'Authorization': `Bearer YOUR_API_KEY`, // Replace with your API key
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: "gpt-3.5-turbo",
messages: [{ role: "user", content: prompt }]
})
});
const data = await response.json();
return data.choices[0].message.content;
}
Explanation:
Voice Recognition: The
SpeechRecognitionAPI is used to capture spoken words. The recognition starts when the button is clicked.Handling Results: The recognized speech is passed to the ChatGPT API, which processes it and returns a response.
Displaying Response: The response from ChatGPT is displayed in the textarea.
Step 3: Styling the Application (Optional)
You can add some CSS to make the application look better. Create a styles.css file and link it in your HTML:
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #333;
}
button {
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
}
textarea {
width: 100%;
padding: 10px;
margin-top: 10px;
font-size: 16px;
}
Conclusion
Now you have a functional web application that lets users interact with ChatGPT using their voice! This feature can be particularly useful for accessibility and convenience. Experiment with different prompts and see how ChatGPT responds to your questions or commands.
Feel free to customize the application further by adding error handling and additional functionalities.
Share Your Experience!
If you found this tutorial helpful, share it with your friends or colleagues who might be interested in integrating voice capabilities into their applications!