Author: Shreyash Srivastva
Shrudio is your all-in-one audio tool: play music, generate melodies, create sound effects, and tune instruments—all in a sleek, intuitive interface powered by the Web Audio API. 🎶✨
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.
-
Music Player
- Upload and play local audio files.
- Seek through tracks, adjust volume, and control playback.
-
Music Generator
- Generate melodies using customizable parameters (scale, tempo, octave, and instrument).
-
Sound Effects
- Play various effects like laser, explosion, power-up, and more.
-
Tuner
- Tune your instrument with real-time pitch and note detection using your microphone.
-
Clone the repository:
git clone https://github.com/shreyazh/shrudio.git
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open the app in your browser at
http://localhost:3000.
- Frontend: React, TypeScript
- Audio API: Web Audio API
- UI Components: Tailwind CSS
-
Music Player:
Upload an audio file to play. Use intuitive controls for seeking and adjusting volume. -
Music Generator:
Select a scale, tempo, and instrument to generate unique melodies. -
Sound Effects:
Instantly play sound effects with predefined settings. -
Tuner:
Use your microphone to detect pitch and tune instruments with ease.
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.
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.
- 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.
- 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.
- 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.
- 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.
Feel free to open issues or submit pull requests for any features or improvements you'd like to add.
This project is licensed under the MIT License.