Inspiration
Our project was inspired from the joy of reading stories to young children. One of the best parts of that reading experience are the sound effects that go along with the book. The moo of a cow, the hoot of an owl, or even the chug of a train make the book come to life. When discussed with the team, it became clear none of us had ever worked with an application that took audio input and played audio output, resulting in an exercise that would be formative and new for all of us.
What it does
When reading a book aloud, voice recognition searches for keywords and upon hearing them plays the associated audio file. Cows moo, owls hoot, and trains chug along to compliment any book. The voice recognition software continues to function providing audio output until the user stops the web application.
How we built it
We first divided up a few tasks, namely recording the audio software, designing the front end interface of buttons, and then researching and then writing the code to pull a voice recognition api. Members used posts from web.dev, w3schools.com, and others to research and help drive the coding process. Greg and Matthew used audacity to record audio sound effects and then manipulate them for use in our application. Joseph designed the button interfaces as well as the logo "make some noise". Then overnight, Parker finally succeeded in audio feedback, to the absolute jubilation of the rest of the team. From there, we then migrated the files onto a server hosted by SIUE, as each student recieves their own webpage space as a student of the university. After implementing this, we then wrote the web app maniest, giving directions on how the application will be used on each device. We then scripted a call for a service worker file in javascript to cache information.
Challenges we ran into
Figuring out how to search an array for an audio file. We encountered some serious issues getting the play audio function to actually search the array and play the appropriate audio. Initially it was set up to use a switch interface, but to make the code much neater we elected to create an array that included the audio files associated with the keywords. Our largest challenge came with taking the website and making it a progressive web application. In this we created a webmanifest, a service worker file, and poured over material attempted to clear the errors we kept recieving. Sadly, at the end, due to the server being hosted by SIUE we were unable to change its protocol from providing data through HTTP. The service worker called by our script required information sent only through HTTPS, thus we hit a dead end toward creating a fully progressive web application.
Accomplishments that we're proud of
Recording our own audio files, we hosted our website on a server through SIUE, we developed our own code to call the audio files, we designed our own logo, and we developed great research habits.
What we learned
A lot of our project hinged on 2 main parts. Can we get the voice recognition software to accept input and continuously transmit that input into text, and can we get that text input and continuously search it for keywords which when played result in an audio file. We also learned how to interact with audacity, a free open source audio software, using it to create our own custom sound effects for playback. We then poured into information about progressive web applications learning about server workers, web manifests, cache, and application downloading. While we are sad it would not complete due to the lack of https, we are proud to have made it thus far.
What's next for Read Along With Rascals
Testing and feedback. Our goal is to make opportunities to read with young people and gauge their interest in the application. Based on how well it is performing, adjust the application for new features. Add new sounds, perhaps even consider adding a feature that would allow the user to record and upload their own sounds. Additionally, while we used this audio in audio out to enhance childhood reading, it has many other applications in the real world.
Built With
- audacity
- css
- html
- javascript
- vs
Log in or sign up for Devpost to join the conversation.