aatishb / synthesine Goto Github PK

Synthesine

Home Page: https://aatishb.com/synthesine/

HTML 60.64% JavaScript 30.18% CSS 9.19%

sound audio-worklet webaudio sinewave synthesizer

synthesine's Introduction

Sound Synthesis From Scratch

Hi! This is an experimental live coding environment for experimenting with sound synthesis. You can use it to create noise, sine waves, and other kinds of sound waves, starting from scratch. And then you can do stuff like filter and combine sounds to create more complex sounds like bells, whistles, strings, and so on.

My goal is to better understand how to synthesize sounds from the ground up, and to build a tool that makes it easier for others to do the same. I'm also using functional programming ideas in Javascript, which allow us to express audio synthesis ideas in a few concise lines of code.

This project relies on a new browser tool for sound synthesis, awkwardly named Audio Worklets (currently only supported in Google Chrome). This is a fairly new way to run audio processing code in your browser in real-time, by running it in a separate audio thread where it isn't slowed down by web browsing.

/libraries/dsp.js is a growing library of functions for sound synthesis that I'm adding to as I go along. It also hides all the messy details of how to launch an audio worklet. The idea is to gradually develop a tool that makes it easier to tinker with sound synthesis in your browser.

To get started, pull up an example from the menu.

Happy audio tinkering!

Credits

Spectrum analyser sourced from ContemporaryInsanity. Icons from Font Awesome. Code editor by Ace.

synthesine's People

Contributors

Stargazers

Watchers

Forkers

shefalinayak itsextra going-digital vinniejung jabuty

synthesine's Issues

convenient way to view the value of a variable

From Dan:

is there a way to print out values in Synthesine easily, like a printf statement?

thinking that in the loudness demos like this:

let freq = 600;
let amp;
let dbfs = -20;

function setup() {
  slider('freq', 20, 1000, 1); // create frequency slider (20 - 1000 Hz)
  slider('dbfs', -27, -6, 3);  // create loudness slider (-27 to -6 dBFS)
}

function loop() {

  amp = Math.pow(10, dbfs/20); // set amplitude based on decibel level
  
  // output sine wave at given frequency & amplitude
  return sinWave(freq).mult(amp);   
}

it would be handy to see what the amp value is when you move the slider

Whether to expose time in oscillators?

I'm thinking through whether to make time explicit in the definition of the oscillators.

Option 1: (Currently used)

sin(f) means t => Math.sin(2 * PI * f * t), i.e. returns a function mapping time to a sine wave

Usage:

function setup() {
}

function loop() {
  return time
    .map(sin(440))
    .mult(0.1);
}

Pros: flow of data is explicit
Cons: cumbersome syntax, confusing for beginners

Option 2:

sin(f) means time.map(t => Math.sin(2 * PI * f * t)), i.e. returns a piece of a sine wave

Usage:

function setup() {
}

function loop() {
  return sin(440).mult(0.1);
}

Pros: concise, easier syntax
Cons: The time dependence is hidden. You might do the following and expect a sine wave, when in fact you'll just get a tiny piece of the beginning of one, looped. So this might introduce some bugs.

let wave;

function setup() {
  wave = sin(440).mult(0.1):
}

function loop() {
  return wave;
}

@shefalinayak curious what you think?

How to run locally?

Great tool! How can I play with this on my local machine? I checked out the source and got a webserver to serve up index.html but nothing happens.

aatishb / synthesine Goto Github PK

synthesine's Introduction

Sound Synthesis From Scratch

Credits

synthesine's People

Contributors

Stargazers

Watchers

Forkers

synthesine's Issues

convenient way to view the value of a variable

Whether to expose time in oscillators?

Option 1: (Currently used)

Option 2:

How to run locally?

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent