Creating sound waves with JavaScript

Sound waves can be generated using math equations. For example, the frequency of 440 Hz produces the musical note known as "A4". This can be created by a sine wave that vibrates the audio output 440 times in one second. Here we use JavaScript to synthesize sounds creating waves and frequencies with math equations. The resulting waves can be visualized in the graphs below using the <canvas> HTML5 element.

All overlapped points over time (44100 pixels in 1 second):

Samples in the middle of the sound playing (650 pixels):

Click to hear interesting sounds and waves:

Change code below (try frequency from 110 to 12000) and click:
var frequency = 440; // 440 Hz = "A" note var samples_length = 44100; // Plays for 1 second (44.1 KHz) for (var i=0; i < samples_length ; i++) { // fills array with samples var t = i/samples_length; // time from 0 to 1 samples[i] = sin( frequency * 2*PI*t ); // wave equation (between -1,+1) samples[i] *= (1-t); // "fade" effect (from 1 to 0) }

The equations above use principles of Frequency Modulation Synthesis (FM Synthesis).

Clarinet sound: generated by a sum of odd harmonics (1, 3, 5, 7, 9, 11, 13):
sin(w)+0.75*sin(w*3)+0.5*sin(w*5)+0.14*sin(w*7)+0.5*sin(w*9)+0.12*sin(11*w)+0.17*sin(w*13)

Violin sound: generated by a sum of harmonics with decreasing amplitudes:
sin(w)+1/2 * sin(w*2) + 1/3*sin(w*3) + 1/4*sin(w*4) + 1/5*sin(w*5) + 1/6*sin(w*6)
The "vibrato" effect is created by multiplying the equation by a low frequency (6 Hz).
The "attack time" effect (start time where the sound increases its amplitude) is created by multiplying the equation by (1-exp(-t*3)).

White noise: generated by creating random samples.

If you find other equations that emulate interesting sounds, effects or musical instruments, please post in the comments.

Each note has its own frequency, for example the middle C (C4) in the piano is 523.26 Hertz:

C4 = 261.63 Hz	C5 = 523.26 Hz
C#4 = 277.18 Hz	C#5 = 554.37 Hz
D4 = 293.66 Hz	D5 = 587.33 Hz
D#4 = 311.13 Hz	D#5 = 622.25 Hz
E4 = 329.63 Hz	E5 = 659.26 Hz
F4 = 349.23 Hz	F5 = 698.46 Hz
F#4 = 369.99 Hz	F#5 = 739.99 Hz
G4 = 392 Hz	G5 = 783.99 Hz
G#4 = 415.3 Hz	G#5 = 830.61 Hz
A4 = 440 Hz	A5 = 880 Hz
A#4 = 466.16 Hz	A#5 = 932.33 Hz
B4 = 493.88 Hz	B5 = 987.77 Hz

See also MIDI note numbers, note frequencies and keyboard note position I will create an interactive piano keyboard in my next post.

About Rodrigo Siqueira

Software developer and director at Insite (www.insite.com.br). I create Internet tools like: online forums, chat rooms, email marketing software, task management and chatter bots. I love to code in JavaScript, jQuery, Node.js and Perl.

View all posts by Rodrigo Siqueira →

This entry was posted in Javascript Audio and tagged html5. Bookmark the permalink.

4 Responses to Creating sound waves with JavaScript

Maribelle says:

July 11, 2011 at 1:35 pm

lool! this is an awesome idea! :D

bidstopper says:

February 27, 2012 at 5:07 pm

the source code is not for free .. right ? and is possible to make an image with canvas with the frequency of an mp3 ? Or is possible to make a script that use the image to make the sound ? sorry if are 3 stupid questions but i`m really interested

Alexander G.T. says:

April 19, 2012 at 11:09 pm

//Chord creator var frequency = 82.42; // 220 Hz = "E" note //set the base chord note (E = 0, F =1, F# = 2, etc...) var base = 0; //richness (1-4 work best, 4+ the volume dwindles with no noticeable tonal gain) var rich = 1 //set the chord type (Major is (0,4,7), Minor is (0,3,7), Aug+ is (0,5,8) var note1 =4; var note2 =7; frequency *= Math.pow(2,base/12+2-rich); //generate base frequency based off of parameters var samples_length = 44100; // Plays for 1 second (44.1 KHz) for (var i=0; i < samples_length ; i++) { // fills array with samples var t = i/samples_length; // time from 0 to 1 samples[i] = 0; //richness increases the number of octaves the chord ranges over for (var j=1; j<1+rich; j++){ //add the 3 notes to create the chord samples[i] += sin( frequency * PI*t *Math.pow(2,1+ j ))/3; samples[i] += sin( frequency * PI*t *Math.pow(2,1+ j +note1/12) )/3; samples[i] += sin( frequency * PI*t *Math.pow(2,1+ j +note2/12) )/3; } samples[i] /= Math.pow(rich, .7); //reduced some of the effect of the parameter changes on the volume }

manny says:

June 25, 2012 at 7:47 am

It is really nice, is there any way to load mp3 file and bring waves according to the sound depth like yours?

Click to hear interesting sounds and waves:

About Rodrigo Siqueira

4 Responses to Creating sound waves with JavaScript

Leave a Reply Cancel reply

Recent Posts

Categories

Archives