https://github.com/tinusw/webaudiosynth

A Synthesizer using the Web Audio API
https://github.com/tinusw/webaudiosynth

d3 javascript sass synthesizer web-audio-api webpack

Last synced: 10 days ago
JSON representation

A Synthesizer using the Web Audio API

• Host: GitHub
• URL: https://github.com/tinusw/webaudiosynth
• Owner: Tinusw
• Created: 2016-09-20T08:27:02.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-08-28T15:12:02.000Z (over 7 years ago)
• Last Synced: 2024-11-17T04:35:22.385Z (about 2 months ago)
• Topics: d3, javascript, sass, synthesizer, web-audio-api, webpack
• Language: JavaScript
• Homepage:
• Size: 22.1 MB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
## Web Synth with Webpack, D3.js & the Web Audio API

[![License: CC BY Tinus Wagner 4.0](https://licensebuttons.net/l/by/4.0/80x15.png)](http://creativecommons.org/licenses/by/4.0/)

[See it live](https://mysterious-ravine-13417.herokuapp.com/)

This is a little synthesizer with:

- Polyphonic playable keyboard

- Two oscillators with:

  - sawtooth

  - sine

  - triagle

  - square

- By default oscillator 2 will be on the same octave as Oscillator 1, but can be shifted up, or down an octave.

- Lowpass filter with resonance

- Highpass filter with resonance

- An effects section with 2 X-Y pads:

  - A delay circuit (feedback is slightly filtered)

    - X axis controls feedback time

    - Y axis controls feedback volume

  - A distortion circuit

    - X axis controls the distortion curve

    - Y axis is in progress.

- A spectrum analyser that will give real-time output.

- It also has a mini tutorial built using [bootstrap-tour](http://bootstraptour.com/api/).

## Setting the project up & running it.

The project is bundled using webpack, so to get started run

`npm install`

To run it locally(using webpack-dev-server):

`npm dev`

To run on production(using express):

- run `npm build` to compile a new version of `bundle.js` with webpack

- run `npm start` to fire up an express server

then check out `localhost:8080`