Code Monkey home page Code Monkey logo

jssynth's Introduction

JS-130

A synthesizer and sequencer that runs in your browser, using the WebAudio API.

Try it out here: https://www.joelstrait.com/jssynth/

Example Song

The song below is an example of what you can create with the JS-130, along with Beats Drum Machine and GarageBand.

JS-130 Example Song

Features

  • Oscillator Instruments
    • Base oscillator with sine/square/saw/triangle wave
    • Secondary oscillator with same wave types, and optional detune from primary oscillator
    • White or pink noise
    • Adjustable volume for each noise source (oscillator 1, oscillator 2, noise)
    • LFO to control oscillator pitch (i.e. "pitch wobble")
    • Filter, with LFO and ADSR envelope to control filter cutoff frequency
    • ADSR Envelope to control loudness
    • Feedback delay and reverb effects
  • Sampler Instruments
    • Use a sound file (*.wav, *.mp3, etc.) as an instrument
    • Filter, with LFO and ADSR envelope to control filter cutoff frequency
    • ADSR Envelope to control loudness
    • Feedback delay and reverb effects
  • Sequencer
    • Multiple tracks, each with its own instrument and set of patterns
    • Enter notes in patterns via on-screen piano keyboard, MIDI keyboard, or computer's keyboard
    • Full songs 1-99 patterns long
    • Volume control + mute for each track
  • Tempo control
  • Master volume control
  • On-screen keyboard to enter notes and try out sounds
  • MIDI keyboard support (only in browsers that support Web MIDI, such as Chrome)
  • Download sequencer output to a *.wav file

Building / Running Locally

  • If first time building, run yarn install
  • Run yarn build-dev, which will build the app in the dist/ folder
  • Open dist/jssynth.html in your browser (make sure running a local server such as MAMP)
  • To automatically rebuild when source files change, run yarn run build-dev --watch instead

Building Production

  • Run yarn build-prod
  • dist/ folder will contain the files that should be deployed to production

Screenshots

Sequencer: JS-130 Sequencer


Instrument editor: JS-130 Instrument Editor


Pattern editor: JS-130 Pattern Editor

jssynth's People

Contributors

jstrait avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.