Skip to content

Novsun30/djent

Repository files navigation


Djent

Djent is an online sequencer that helps you make your own music.
Access here: https://djent-28b47.web.app

Table of contents


Technology stack

Djent was mainly built by React for front-end and Firebase for back-end.
I also used Tone.js for creating audio, scheduling audio and playing audio.

  • Front-end:
    • HTML5
    • styled-components
    • JavaScript
    • React
    • Tone.js
  • Back-end:
    • Firebase
      • Hosting
      • Cloud Firestore
      • Authentication

Features

  • Variable sounds: There are seven different sound that you can use.
  • Multitrack: You can add as many tracks as you like to your project.
  • Editable note: Note can be applied with different length and pitch.
  • Change key easily: With just one click, you can change key quickly.
  • Save and load: After sign up for a membership, you can save or load your project.

Usage

  • Get started

  • Control panel


    Get started

    From the index page, click the "get started" button to go to the editor page.
    In editor page, you need to add new track first. Simply click the "edit track" editTrackButton button, and select what track you want to add.
    addTrackGif


    Here is the main area where you add or remove the note by clicking theses white buttons.
    The note can be different length and pitch by using the control panel. Learn more about control panel.


    Also, there are some buttons at the bottom of page, you can demo the sound of this track by clicking the button.



    Control panel

    • Note Value

    • Sharp and flat

    • BPM (Beats per minute)

    • Key

    • Loop

    • Bar

      Note Value


      In Djent, basic note value is sixteenth note. In other words, these multiple number mean how many times of a sixteenth note.
      You can switch to what note value you want by clicking these buttons.


      Sharp and flat

      Sharp and flat buttons will change the pitch of the note. Sharp button raised the note by half-step. Flat button lowered the note by half-step. To be much easier to tell if the note is sharp or flat, the color of note also changes when button clicked. Sharp button makes note green and Flat button makes note pink. The defalut note color is orange, if sharp or flat not applied.


      BPM (Beats per minute)

      Changing BPM will changes the playing speed of the project. Bigger value makes it playing faster and smaller one makes it slower. To change the BPM, click the number of BPM and type what value you like. The acceptable range of BPM is between 1 to 300. Default BPM is 120.


      Bar

      If you want to add more bars, click the plus button.


      Key

      You can change the key by clicking plus and minus buttons, plus button raised the key by half-step and minus button lowered the key by half-step. Different key have different group of notes. There also have a major/minor button to change the key to major or minor. The difference between major and minor is interval.


      Loop

      If loop button clicked, it will loop the project when playing. Clicking again will cancel the loop.


License

This project is licensed under the terms of the MIT license.

About

Djent is an online sequencer that helps you make your own music.

Resources

Stars

Watchers

Forks

Contributors