HearEase — Project Story

Inspiration

We were inspired by a simple question: What if important information online could be understood without depending entirely on hearing?

People who are hard of hearing can face barriers when important information is delivered through audio, especially during online classes, video calls, videos, and everyday digital interactions. We wanted to create an affordable solution that could make audio information more accessible through a visual interface.

That idea led us to build HearEase — “Hear the Internet Visually.”

What it does

HearEase converts important audio information into visual information.

The prototype provides:

• Live speech captions to display spoken words as text
• Visual sound alerts when significant sound levels are detected
• High-contrast mode for better visibility
• Larger-text mode for easier reading
• Demo mode to experience the interface without microphone access

Our goal is to reduce dependence on hearing for accessing important digital information.

How we built it

We built HearEase as a lightweight web application using technologies that are free and accessible.

Technologies used:

• HTML
• CSS
• JavaScript
• Web Speech API
• Web Audio API

The Web Speech API is used to convert speech into captions, while the Web Audio API analyzes microphone input and can trigger visual alerts when sound levels become significant.

We focused on creating a simple, responsive interface so that users can quickly understand what is happening without needing complicated setup or specialized hardware.

Challenges we ran into

One of our main challenges was working with microphone permissions and browser compatibility. Speech recognition and microphone features depend on browser support and require users to grant permission.

Another challenge was detecting meaningful sounds without creating too many false alerts. Our current prototype uses sound-level detection as the foundation, while a future version could use AI-based sound classification to distinguish alarms, sirens, doorbells, voices, and other important sounds.

We also had limited development time, so we had to prioritize the features that best demonstrated the core accessibility idea.

Accomplishments that we're proud of

We are proud that we turned an accessibility problem into a working browser-based prototype within a short development period.

We especially focused on making the solution:

• Affordable
• Easy to access
• Simple to use
• Based on existing browser technologies
• Designed with accessibility in mind

Most importantly, HearEase demonstrates that audio information can be transformed into a visual experience without requiring expensive dedicated hardware.

What we learned

This project taught us that building for accessibility requires more than simply adding technology.

We learned how important it is to understand the user's experience and think about how information is presented, not just how it is processed.

We also learned how browser APIs such as the Web Speech API and Web Audio API can be combined to build useful accessibility prototypes quickly.

Most importantly, we learned that small technical solutions can address real-world inclusion problems when they are designed around the user's needs.

What's next for HearEase

HearEase is only the beginning.

With more time, we would like to add:

• AI-powered environmental sound classification
• Speaker identification
• Multilingual real-time captions
• Emergency sound detection
• Mobile notifications and vibration alerts
• Offline/on-device AI processing for better privacy
• Integration with video conferencing and streaming platforms

Our long-term vision is to make HearEase a practical accessibility layer that helps people access conversations, videos, meetings, notifications, and important environmental sounds visually.

HearEase — Hear the Internet Visually.

Built With

• accessibility
• api
• apis
• audio
• browser
• css
• design
• frontend
• html
• javascript
• responsive
• speech
• web