This is Musical Studio, an online platform that enables you to create your own music.
- 6 instruments
- Individually adjustable volumes for instruments
- 24 different pitches
- Variable note sizes
- Multiple input methods: keyboard bindings and note-board
- Mix and overlay notes and instruments to make your own unique music
- Import/export capabilities using an encoded format
- Move forwards, backwards, or to the beginning using buttons
- Play/Pause the music at any time
- Intuitive user interface
- Modern aesthetic
- Pleasing Animations
- DARK THEME!!
- Use either keyboard binding below or the buttons in the note-board to add notes
- Click the notes to delete them
- Use the mouse wheel or scroll gestures(up/down or left/right) on a trackpad
- For more info, check out the two images we have below!
- Open this in its own tab for the best experience!
- First off, repl.it for being such an easy-to-use environment. Forking between ourselves to make changes was awesome(we think multiplayer has a little ways to go). We both agree that it was really nice to just be able to open the editor anywhere with no manual file sync.
- Group Members: @ArpanDhatt and @SaakethChennaia
- We used Materialize CSS to give the intended theme to our app. We also used their features like grid and waves effect.
- We used ToneJS to manage the instrument audio
The instruments and wrappers around them are from github.com/nbrosowsky/tonejs-instruments
- SVGjs to create the timeline, which is made completely from SVGs.
- The Demo Score: The demo score is from “How to Train Your Dragon”, composed by John Powell. @ArpanDhatt arranged an abridged version with multiple instruments.
- It can time a little long to load sometimes. Don’t worry, it will be faster next time!
- If you leave the tab for a while and go back, the audio might not start immediately.
- Holding the left/right arrow buttons on the UI doesn’t work. We’re working on it!
Some Improvements Still Need To Be Made
- Issue #3!
- More Instruments!!!
- A better way to play the music. Right now it does it very inefficiently, although our computers now days can handle it(tested on 3rd gen Intel i5).
- Pressing multiple keys at once
We hope you all have fun playing with it! If you think it's cool, click that upvote button! If you have any questions, We'd love to answer them!
Copy this demo song and paste it in the load dialog!
@liltaco That happens on chrome, too. It doesn't move forward with the time until it knows how long the keypress was. When I started the project, I had never used SVGs in such a complex role. I was planning to use p5js since I was more familiar with it, but I chose SVGjs over it because of the better click interaction. However, I plan to transition it to p5js canvas because of the increase flexibility