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 :
