A Student Support System where users can control all funcionalities using voice commands. Web Speech API provides the functionality to use speech recognition and speech synthesis into web apps to handle voice data.
See other images of the website in the Screenshot folder.
🏠 Homepage
Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites. The bootstrap 4 libraries are already downloaded and added in the CSS and JS folders. It is also referrenced in the Index.html file. You can also download it here.
<head>
<title>Student Support Assistant</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<script src="../js/bootstrap.js"></script>The Web Speech API enables you to incorporate voice data into web apps. The Web Speech API has two parts:
SpeechSynthesis (Text-to-Speech), andSpeechRecognition (Asynchronous Speech Recognition).
Speech synthesis is accessed via the SpeechSynthesis interface, a text-to-speech component that allows programs to read out their text content (normally via the device's default speech synthesizer). Different voice types are represented by SpeechSynthesisVoice objects, and different parts of text that you want to be spoken are represented by SpeechSynthesisUtterance objects. You can get these spoken by passing them to the SpeechSynthesis.speak() method.
Speech recognition is accessed via the SpeechRecognition interface, which provides the ability to recognize voice context from an audio input (normally via the device's default speech recognition service) and respond appropriately. Generally you'll use the interface's constructor to create a new SpeechRecognition object, which has a number of event handlers available for detecting when speech is input through the device's microphone. The SpeechGrammar interface represents a container for a particular set of grammar that your app should recognize. Grammar is defined using JSpeech Grammar Format.
Note: On some browsers, like Chrome, using Speech Recognition on a web page involves a server-based recognition engine. Your audio is sent to a web service for recognition processing, so it won't work offline.
The Help Section contains all the active commands for the Student Support System.
Open the Homepage in your browser to get started!
👤 Rohan Bhautoo
- Github: @rohan-bhautoo
- LinkedIn: @rohan-bhautoo
Give a ⭐️ if this project helped you!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent