Inspiration

Have you ever gave a presentation and you found yourself using filler words like "basically", "so", or "um" often? Speaclear (portmanteau of speak and clear!) helps you work towards using less filler words by recording your speech and identifying any filler words.

What it does

You can start recording by hitting the microphone button at the center top of the screen. Make sure to have microphone permissions enabled. As you speak into the mic, a live transcript will be generated and appear in the center left of the screen. You will also see a live pie chart being created and word frequencies will appear below that as well. Hit stop to stop recording and to save your transcript/recording. You can playback the audio in the center of the screen to hear yourself. Your saved transcripts/recordings can be found by clicking the "View History" button located in the top right corner of the site.

How I built it

We built this using JavaScript, React, and Ant Design. For speech recognition, we utilized https://www.npmjs.com/package/react-speech-recognition that uses the Web Speech API. We used canvasJS to build an elegant pie chart.

Challenges I ran into

When we decided we wanted to implement audio playback, we had trouble integrating what we had already completed with react-speech-recognition. Saving the transcripts/recordings into the browser was also a minor challenge, as we had no experience attempting to save audio files somewhere before.

Accomplishments that I'm proud of

We're proud to have created a functional application that we can show off to others and have them use it.

What I learned

We learned how to integrate different libraries and packages together to create a functional, styled application that did what we wanted to do from the start. We also learned how to effectively debug apps.

What's next for Speaclear

When playing your saved recordings, we can make it so that the transcript appears in "real-time" just like it did when it was done live. This would be a nice-to-have feature solely for a nicer user experience. We can also provide more accurate and better feedback to users after analyzing their speech. A "point" system could work here. We can definitely improve the UI for this app as well.

Built With

Share this project:

Updates