Giter Club home page Giter Club logo

javascript-software-synthesizer's Introduction

Note: The JavaScript Software Synthesizer is in active devleopment and its currently being refactored/redesigned, thus some of the features might not work as intended. For the latest stable version please visit this repository.

JSS-01 Logo JSS-01 Logo

JSS-01
JavaScript Software Synthesizer

made-with-typescript MIT license Version

Buy Me a Coffee at ko-fi.com

Technologies Used

                                         

More info about the technologies can be found here.

Description

The JSS-01 | JavaScript Software Synthesizer is a web application enabling you to make and play music in the browser. It is a software synthesizer utilizing the Web Audio API by implementing a variety of JavaScript frameworks and libraries, such as Tone.js and NexusUI2. Its design is fully modular, thus it can easily be adapted and integrated into any kind of project.

My aim when creating the JSS-01 was to offer a powerful synthesizer that is simple, easy and, above all, fun to use!

More screenshots can be found here.

Build & Run

First clone the project from GitHub:

git clone [email protected]:michaelkolesidis/javascript-software-synthesizer.git
cd javascript-software-synthesizer

Install the project dependencies:

yarn

Start the Vite development server:

yarn dev

For versions 1.x.x

Before the introduction of Vite in version 2.0.0, after installing the dependencies, users could run JavaScript Software Synthesizer locally by using a VSCode extension like Live Server (Live Server on the Visual Studio Marketplace) or Python's http.server module.

For more information, please refer to MDN's excellent article: MDN article

Demo

There is an online demo available at https://javascript-software-synthesizer.vercel.app/

Introduction

Keys, knobs, sliders and buttons to tweak your sound and generate immersive soundscapes. You can also connect your MIDI keyboard and play with it!

Quick Start

The JSS-01 | JavaScript Software Synthesizer uses FM Synthesis (frequency modulation synthesis). In FM Synthesis there is an oscillator that produces the sound signal, the Carrier, and an oscillator that modulates the carrier's wave frequency, the Modulator.

Sine wave:

Frequency-modulated sine wave:



In JSS-01, the Synth Section of the synthesizer includes the controls for the Carrier oscillator.



The Modulation Section includes the controls for the Modulator oscillator.



The Effects Section includes the controls of the various effects that can be applied to the sound. The effects are connected in series with the following connectivity: Oscillator 2 --> Oscillator 1 --> Auto Filter --> Phaser --> Crusher --> Chebyshev --> Feedback Delay --> Ping Pong Delay --> Reverb --> Chorus --> Tremolo --> Vibrato --> Distortion --> Frequency Shifter --> Output.

How to Play

You can play the JSS-01 by using the on-screen keyboard, your computer keyboard, or a MIDI keyboard.

Oscilloscope

The Oscilloscope shows the waveform of the sound. You can click on it to pause or you can right-click on it to save the current waveform as an image.

Modulation Index

The Modulation Index determines the amount of the modulation that will be applied to the Carrier. If you set the Modulation Index to 0 (can be found at the top line of the Synth section) you get the unmodulated output of the carrier oscillator.

MIDI

In order to use your MIDI keyboard with the JSS-01 you should connect it and turn it on, prior to accessing the web app. If you connect it while already on the JSS-01, you should refresh the page. The available MIDI devices will appear inside the MIDI display, located on top left. You can click on the MIDI device you would like to use and wait for the confirmation message. You are now ready to use your MIDI keyboard. Enjoy playing!

Sequencer

Right above the on-screen keyboard you can find the Sequencer. There is an included sequence preinstalled, so you can just press the Play button and listen to it.

The first input from the left controls the rate of the sequence (speed). The second input is the base value of the notes of the sequence (16n stands for a 16th note value, 8n for an 8th and so on). You can input your own sequences in the main input by writing the sequence of the desired notes in this form: "C4", "F5", "D2"**. You can include parts with notes of half the base value by including them in brackets, ex. "C4", ["F5", "D2"]. In these examples, if the base value is 16n (16th notes), C4 will have a value of 16th, and each of the F5 and D2 will have a value of 32th (or a value of a 16th combined).

When your sequence is ready, you can add it to the sequencer using the Add button. In order to go back to the default sequence, you can simply write default in the sequence input field and then click the Add button. There are two extra sequences included, the bassline of "I Feel Love" by Donna Summer (produced by Giorgio Moroder), which can be accessed by writing i feel love in the sequence input field and then pressing the add button, and the riff of "Funky Town", that can be accessed by writing funky town.

You can find some additional information about the JSS-01 and sound synthesis in this short presentation.

System Requirements

The JSS-01 | JavaScript Software Synthesizer is quite heavy, especially on the CPU. We would suggest these indicative minimum requirements:

Component Minimum Recommended
CPU Quad-core x86-64 (2014 or later) Quad-core x86-64 (2018 or later) or M1
RAM 8GB 16GB
Display 1600x900 1920X1080
Sound Card On-board, dedicated, or audio interface Audio interface
Speakers Monitor speakers or mixing headphones Monitor speakers or mixing headphones

Browser Requirements

Browser
Chrome or other Chromium-based browsers
Safari
Firefox with the MIDI Input Provider add-on

Documentation

Full documentation will be released at some point in the future. In the meantime, you can refer to the Tone.js documentation, as well as the NexusUI2 documentation.

Guides & Tutorials

The JSS-01 is using FM synthesis implementing the FMSynth of Tone.js, While there aren't any guides and tutorials specifically for the JSS-01 yet, there are plenty of excellent guides on FM synthesis:

FM Synthesis

Contributing

Feel free to submit issues and pull requests. It would be great to create a community around JSS-01, to continue its development and evolution, making it more capable and easier to use, increasing its creative and artistic potential. If you are interested in becoming part of out community it would be useful to have a look to our dedicated document regarding Contributing, as well as, out Code of Conduct. In a nutshell, we want our community to be a safe space for everyone, so that we can all have a pleasant and joyful experience!

Changelog

Please refer to the project's Changelog document.

Technologies Used (Extended)

  • Tone.js
    One could say that Tone.js is the "soul" of our project. It provides us with the synthesizers we use to generate sounds, as well as their various properties that can be tweaked and adjusted.
  • NexusUI2
    NexusUI2 provides us with the UI components that are connected to the synthesizers and make parameters adjusting easy and playful.
  • WEBMIDI.js
    WEBMIDI.js makes Web MIDI API easy to implement. It allows users to connect their MIDI keyboards and play the synthesizer the way it is meant to be played. Because, who likes playing music with a mouse?
  • Sass
    The SCSS (Sassy CSS) syntax is utilized for the styling of our project.
  • TypeScript
    In version 0.6.1, TypeScript was first introduced in the project, with significant parts of it migrating to TypeScript for increased type safety. In version 1.0.0 migration to TypeScript was completed.
  • Vite
    Vite provides the frontend tooling, a local server and packaging

Roadmap

Completed

  • Dark Mode. Users are now able to switch the UI to dark mode. Dark mode makes the whole experience easier on the eyes and greatly improves readability and accessibility for certain users. It was one of the most common feature requests we were getting as feedback from our users.
  • Migration to TypeScrip

Currently Working On

  • Bug fixes

Future Plans

Some of the features to be implemented in the future are:

  • Recorder
  • Presets
  • All parameters controllable with MIDI
  • Other types of sound synthesis to choose from (currently only FM synthesis)
  • Rewriting the app using React

References and Inspiration

A full(-ish) list of references can be found in the References document.

Screenshots

Medium Screens

Small Screens

Contributors

Your name could be here and it would be great to have you aboard!

Other

  • You can find a mirror of this repository in Codeberg.
  • The project has a total of 3,342 lines of code (excluding blank lines and comments).

Special Thanks To

  • Mohammed Amine Grid, for his guidance and dedication throughout this journey.
  • All the students and the tutors at the Social Hackers Academy, for creating a nice little community of passionate people offering their best for each other.

💖 Support the Project

Thank you so much for your interest in my project! If you want to go a step further and support my work, buy me a coffee:

Buy Me a Coffee at ko-fi.com

License

Copyright (c) 2023 Michael Kolesidis
Licensed under the GNU Affero General Public License v3.0.


javascript-software-synthesizer's People

Contributors

dependabot[bot] avatar error-four-o-four avatar mamarmar avatar michaelkolesidis avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

javascript-software-synthesizer's Issues

MIDI implementation doesn't work on Firefox

Describe the bug
The WEBMIDI.js doesn't work on Firefox

To Reproduce
Steps to reproduce the behavior:

  1. Open the JSS-01
  2. The MIDI display appears empty
  3. MIDI keyboard is unresponsive
  4. This error appears in the console:

Screenshot from 2022-03-22 15-32-47

Desktop :

  • Ubuntu Linux 20.04 LTS
  • Mozilla Firefox 98.0.1 (64-bit)

Distortion effect doesn't work

The Distortion effect doesn't work. Moving the Amount dial up just makes the sound louder.

Chrome Version 118.0.5993.89 (Official Build) (64-bit)
Windows 11

Presets

The ability to save the current configuration both as a file and to localStorage, as well as the ability to load presets.

Recorder

The ability to record the synthesizer's output and to download the recording as an audio files.

Describe the solution you'd like
An implementation of the Recorder functionality of Tone.js https://tonejs.github.io/docs/14.7.77/Recorder

It could be in the form of extra section above, below, or next to the sequencer with a record, a stop button and identical styling with the sequencer.

Computer keyboard playability only works when keyboard language is set to English

Describe the bug
One of the synthesizer playability options is using the computer keyboard. Certain letters are matched to certain notes (A-L plus some letters from the above line), and pressing one of the letters triggers the synthesizer to play a certain note. The problem is that when the keyboard language is set to another language (in my case Greek) it stops responding.

To Reproduce
Steps to reproduce the behavior:

  1. Go to the synthesizer'smain page
  2. Try to play the synthesizer using the computer keyboard w

Desktop (please complete the following information):

  • OS: macOS 11 Big Sur 11.4
  • Browser: Chrome
  • Version 99

JSS-01 becomes laggy and unsusable if Dev Tools are open

If at any point the user open the dev tools in any Chromium-based browser, the JSS-01 becomes laggy and unsable.

To Reproduce
Steps to reproduce the behavior:

  1. Open the Dev Tools while in the app
  2. Try playing any note

Desktop (please complete the following information):

  • Ubuntu 20.04 LTS
  • Google Chrome / Microsoft Edge (any version)

Noticable cracks in the Reverb effect

@error-four-o-four

As the Decay dial moves, there are cracks in the sound output that make it almost inaudible.

If the note(s) played are released and the Decay dial is moved, any sound output at that moment stops immediately. (this is a pre-existing issue even before the update)

Chrome Version 118.0.5993.89 (Official Build) (64-bit)
Windows 11

Sound won't stop using external MIDI controller

Thanks for JSS! I have a Yamaha MX synth connected via USB to my Win 10 Edge browser. JSS sees the synth and responds to the synth keyboard. But once a note is played, it doesn't stop playing until I refresh the web page. JSS responds as expected when using the web page keyboard.

The JavaScript Software Synthesizer doesn't run on Firefox

Describe the bug
When trying to access the JavaScript Software Synthesizer using Firefox, the Tone.js elements don't load, neither do the NexusUI elements (except for the keyboard). You get the following error:

Uncaught Error: param must be an AudioParam

Screenshot from 2022-03-03 00-19-37

  • OS: Ubuntu Linux
  • Browser: FIrefox
  • Version 97 (64-bit)

How to run it locally?

I was confused for a while because I couldn't find instructions for how to actually run it, nor an online demo. I was also looking for a npm start or npm serve etc command in the package.json.

Eventually I realized you can serve the root directly in a local http server and the index.html that's in there is the entry point. Is that how others run it?

It'd be great to include a line in the README about that, or perhaps an npm command for starting a local server to make it more convenient. Thank you for the awesome library!

Bug: All keys stop playing when single key is released

Describe the bug
All keys stop playing when single key is released

To Reproduce
Steps to reproduce the behavior:

  1. Press multiple keys e.g. "ASD"
  2. Release D
  3. All keys stop emitting sound even though sounds on "AS" keys should play

Expected behavior
sounds on "AS" keys should play

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser : CHrome
  • Version: 114.0.5735.134 (Official Build) (64-bit)

Additional context
Add any other context about the problem here.

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.