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:

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.
This entry was posted in Javascript Audio and tagged . Bookmark the permalink.

8 Responses to Creating sound waves with JavaScript

  1. Maribelle says:
    lool! this is an awesome idea! :D
  2. bidstopper says:
    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
  3. Alexander G.T. says:
    //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 }
  4. manny says:
    It is really nice, is there any way to load mp3 file and bring waves according to the sound depth like yours?
  5. tmedwin says:
    This is nice, and I would like to make use of it. But it doesn't work for me in MS IE9 (with or without compatibility mode). Is there a way to make it work? Also (small point) it says (http://js.do/blog/sound-waves-with-javascript/) that Middle C (C4) is 523Hz - should be 262Hz.
  6. guillo says:
    Please tell us how to make the wave for an mp3
  7. oceank2 says:
    Can you explain, or give me references of what represent your "All overlapped points over time (44100 pixels in 1 second)" representation. Thanks a lot
  8. Jerzy Karczmarczuk says:
    This is several months after the last post, but the subject is interesting anyway... Caro Rodrigo, 1. Please dont mix-up /vibrato/ and /tremolo/. If you multiply the amplitude by an oscillating amplitude, you get the second one, not the vibrato, which changes the frequency. Compare your effect with samples[i] = sin( frequency * 2*PI*(t+0.005*sin(40*t)) ); THIS is frequency modulation. 2. Your spectral compositions (violin and clarinet) have nothing to do with Frequency Modulation. Only "bells" use this method. 3. Please be precise. "Multiplying equation by a frequency" is very incorrect. You multiply the amplitude by an oscillating envelope. Best regards. Jerzy K.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>