About This Application
Overview
This web application is a self-contained, educational tool designed to demonstrate the core concepts of audio analysis. It runs entirely in your browser without needing a server or external dependencies. It captures audio from your microphone, converts it to text, and performs a simulated sentiment and emotion analysis, presenting the results in real-time through interactive visualizations. The goal is to provide a clear, hands-on understanding of how such systems work under the hood.
How to Use
- Open the File: Simply open this HTML file in a modern web browser that supports the Web Speech API (Google Chrome or Microsoft Edge are recommended for best compatibility).
- Grant Permission: The browser will request permission to access your microphone. You must click "Allow" for the application to function.
- Start Recording: Click the "Start Recording" button. The status will change to "Recording...", and the button will turn red.
- Speak Clearly: As you speak, you will see a live transcription. Words and phrases recognized by the analysis engine will be highlighted in green (positive) or red (negative).
- Observe the Visuals: The sentiment meter and emotion radar chart will animate smoothly to reflect the detected emotional tone of your speech.
- Stop & Reset: Click "Stop Recording" to end the session. Click "Clear & Reset" to clear the transcript and visuals to start a fresh analysis.
Technical Details
- Technology Stack: This application is built with 100% vanilla HTML, CSS, and JavaScript. It does not use any external libraries or frameworks.
- Audio Transcription: Speech-to-text functionality is powered by the browser's built-in Web Speech API. While the application code is local, the browser's implementation may require an internet connection for processing.
-
Upgraded Analysis Engine: The sentiment and emotion analysis uses an enhanced rule-based approach for educational clarity:
- An embedded JSON object (
syntheticLexicon) acts as a dictionary, mapping words and phrases to sentiment scores and emotion categories.
- N-gram Analysis: The engine now recognizes multi-word phrases (bigrams like "very good" and trigrams like "not very good"). It prioritizes longer matches for more accurate contextual understanding.
- Intensity Modifiers: Words like "very" or "slightly" are identified as intensifiers. They don't have their own sentiment but instead multiply the sentiment score of the word immediately following them.
- Negation Handling: A basic negation check inverts the sentiment of a word if it's preceded by a negator like "not."
- Live Highlighting: The transcript is dynamically rebuilt with
<span> tags around recognized terms to provide instant visual feedback on the analysis process.
- Smooth Visualization: All graphics are drawn on an HTML
<canvas> element.
- The Sentiment Meter is now a bidirectional bar that grows left (red) for negative sentiment and right (green) for positive, providing an intuitive and clear visual. A text label explicitly states the current sentiment category.
- The animations are updated smoothly using
requestAnimationFrame and linear interpolation (lerp) to move from the current state to the target state over several frames, creating a fluid visual effect.
Future Directions
This application serves as a foundational example. It could be extended in several ways:
- Expanded Lexicon: A much larger and more nuanced lexicon would significantly improve the accuracy of the analysis.
- Acoustic Analysis: Incorporating the Web Audio API to analyze acoustic features like pitch, tone, and volume could provide a more direct measure of emotion, supplementing the text-based analysis.
- File Upload: Add functionality to allow users to upload and analyze pre-recorded audio files.
- Custom Lexicons: Allow users to add their own words and scores to a custom lexicon to see how it affects the analysis results.