Shrudio

Inspiration

Shrudio was inspired by the desire to create an all-in-one audio tool that allows musicians, creators, and sound enthusiasts to generate, play, and experiment with different audio features in a seamless environment. We wanted to bring together the power of music creation, sound effects, and real-time pitch detection into one platform.

What it does

Shrudio is a versatile audio application offering four main features:

• Music Player: Upload and play local audio files with intuitive controls.
• Music Generator: Create melodies by customizing scale, tempo, octave, and instrument.
• Sound Effects: Play a variety of sound effects like laser, explosion, and power-up instantly.
• Tuner: Tune your instrument in real-time using your microphone for pitch and note detection.

How we built it

Shrudio was developed using:

• Frontend: React and TypeScript to create a dynamic and responsive interface.
• Audio API: The Web Audio API powers all audio functionalities, enabling sound manipulation and real-time tuning.
• UI Components: Tailwind CSS was used to build a clean and minimalist design that provides a smooth user experience.

Challenges we ran into

• Integrating real-time audio manipulation with the Web Audio API required deep understanding and careful implementation to ensure a seamless user experience.
• Handling various audio formats in the music player and ensuring compatibility across devices posed some challenges.
• Fine-tuning the pitch detection algorithm for the tuner was tricky, but we managed to get it working accurately.

Accomplishments that we're proud of

• Successfully integrating multiple audio features into one platform, allowing users to seamlessly generate, play, and explore sounds.
• Creating an easy-to-use and aesthetically pleasing interface that enhances user experience.
• Building a functional real-time pitch tuner that works across a variety of instruments.

What we learned

• The Web Audio API is incredibly powerful but requires careful management of resources for smooth performance.
• Tailwind CSS significantly streamlines UI development, enabling rapid design iteration without sacrificing quality.
• Fine-tuning real-time features like pitch detection can be more complex than expected, but it’s immensely rewarding when it works.

What's next for Shrudio

• Implementing additional sound effects and audio manipulation tools.
• Adding a cloud sync feature for music files, enabling users to access their audio library across devices.
• Enhancing the music generator with more customizable features, like advanced harmony and rhythm options.
• Expanding the tuner to support more instruments and provide additional tuning modes.

Built With

• audio-demos
• github
• music
• typescript
• vscode
• web-audio-api