We're a Team of Fullstack JavaScript developers, working on MEAN stack for the last 4 years. Avid followers of technology.

Team Members

Launch Site

Composer

A Music* (sound) composer. Choose chords and instrument types to create your own sound composition.

V800 localhost 3000 demo.html

Description

A Music* (sound) composer. Lets you choose chords and instrument types to create your very own sound composition, that you can share with your friends.

Pitch Video Coming Soon...

Instructions

  • On the landing page, you can either choose to see what other folks have created, or create your own compositions.

  • To create your own composition open the create composition page, where you have to use the following components

    1. Instrument - the top menu in blue
    2. Frames - your composition is divided intro frames, each frames can have up to 3 beats from one instrument.
    3. Chords - On top of each frame you have a dropdown that can be used to select the chord.
    4. Beats - chords can be toggled on each frame by clicking on the note radio button.
    5. Tempo - tempo decides how fast you want to play the beat. (BPM)
  • The canvas is basically unlimited, you can create as long of a composition as you like, simply by adding more note columns. New frames can be added by clicking on the plus icon. if the number of frames cannot be accommodated on the viewport you can scroll horizontally.

  • You can also delete frames by clicking on the trash icon which appears upon hovering over the frame.

  • When you are done, you can save the composition by clicking on save and then, share by copying the url that you get after clicking on share button.

  • When you save a composition you'll be presented with a login modal, which is just used to identify your compositions.

  • You cannot update your composition, but create a new fork by clicking on the save button. Its best to add a version number in the name if you want a versioning system.

  • To explore your compositions after logging in click on your name or the user icon on top right of the screen.

  • Works best on desktop Chrome.

If you appreciate the time and effort we spent on building this idea in 48 hours please do upvote ;D

Built With

Nodejs, mLab's free MongoDB instance, React (create-react-app), Redux, HTML5 Audio APIs, Webpack, deployed on Heroku (free tier).

Feedback / Ratings (21)

All Feedback