Play Musical Notes with JavaScript

In music, a note is a symbol denoting a musical sound. In English usage a note is also the sound itself. Notes can represent the pitch and duration of a sound in musical notation.

How cool it would be if we could play musical notes using JavaScript ?  In this article, we will write simple JavaScript function that could do it.

Notes – Frequency  Mapping

With the following table, we can easily create a mapping in our code to play any given note using its frequency.

C C# D Eb E F F# G G# A Bb B
0 16.35 17.32 18.35 19.45 20.60 21.83 23.12 24.50 25.96 27.50 29.14 30.87
1 32.70 34.65 36.71 38.89 41.20 43.65 46.25 49.00 51.91 55.00 58.27 61.74
2 65.41 69.30 73.42 77.78 82.41 87.31 92.50 98.00 103.8 110.0 116.5 123.5
3 130.8 138.6 146.8 155.6 164.8 174.6 185.0 196.0 207.7 220.0 233.1 246.9
4 261.6 277.2 293.7 311.1 329.6 349.2 370.0 392.0 415.3 440.0 466.2 493.9
5 523.3 554.4 587.3 622.3 659.3 698.5 740.0 784.0 830.6 880.0 932.3 987.8
6 1047 1109 1175 1245 1319 1397 1480 1568 1661 1760 1865 1976
7 2093 2217 2349 2489 2637 2794 2960 3136 3322 3520 3729 3951
8 4186 4435 4699 4978 5274 5588 5920 6272 6645 7040 7459 7902

 

Here goes the JavaScript Function

<script>
  var context=new AudioContext();
  var o=null;
  var g=null;
function playNote(frequency, type) {
  setTimeout(function(){
    o = context.createOscillator();
      g = context.createGain();
      o.type = type;
      o.connect(g);
      o.frequency.value = frequency;
      g.connect(context.destination);
      o.start(0);
      g.gain.exponentialRampToValueAtTime(0.00001, context.currentTime + 1);
  },1000)
    
}
</script>

Suppose we want to play C6 note, then we would call the javascript function as :

<script>
     playNote(1047, 'sine');
     playNote(1047, 'square');
     playNote(1047, 'triangle');
     playNote(1047, 'sawtooth');
</script>

 

It’s enven more interesting as we can play around with the type of oscillators. The available types are Sine, Square, Triangle and Sawtooth.

Lets now play G4

<script> 
      playNote(392.0, 'sine'); 
      playNote(392.0, 'square'); 
      playNote(392.0, 'triangle'); 
      playNote(392.0, 'sawtooth'); 
</script>

This is not a complete music with JavaScript and just basics to the musical note creation using JavaScript. Thanks to the blog here Generate Sounds Programmatically With Javascript

Follow this video for complete guidance :

Recommended For You

About the Author: Ritesh Ghimire

Ritesh is a Computer Engineer, Web Developer and an active cricket follower.