alexgibson / wavepad

An experimental synthesizer built using the Web Audio API (PWA).

Wave-PD1

An experimental synthesizer built using the Web Audio API, written in ES6 and compiled using Babel. Works offline using Service Worker.

https://alexgibson.github.io/wavepad/

Audio node graph

Install

npm install

Build

To build from source and watch for changes:

gulp

By default Javascript is compiled and minified in production mode. To run un-minified and with source maps enabled, simply run:

gulp --env development --smp /path/to/project/root/

Note the smp argument is to append the relative path for source maps to work.

Run

To run the dev server:

npm start

The app can then be viewed at localhost:8000.

Deploy

To automatically build and deploy to gh-pages branch:

gulp deploy

wavepad's Issues

Remove usage of deprecated createGainNode method, and new waveform constants

This demo uses AudioContext.createGainNode, which is now deprecated (current version of the spec [1]), and should use AudioContext.createGain instead. It's just a simple renaming, so people can enjoy the demo when using Firefox and and future version of other browsers.

In addition, the way you specify a waveform is also outdated: the spec says that one should use a litteral string constant, now, instead of an integer.

We have written a little guide to ease the porting to be standard compliant, should you need more info, or if you find other problems [2]. Or you can ask :-).

Great demo, anyway!

[1] https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#AudioContext-section
[2] https://developer.mozilla.org/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext

silly idea - add scales?

Hi Alex, I was going to try and fork this and try and add in an option to only play notes from a certain scale? Like the little kaossilator does?

I gave up though as i'm not really a javascript guy (which i was though!) I was looking at something like this: https://github.com/GregJ/music.js what do you think?