JSFiddle - React, Tailwind, and code Playground

JavaScript

var context = new webkitAudioContext( );

var precision = 44100;

var bpm = 50;

var music = [
    440.6, 494.6, 440.6,
    554.2, 587.2, 554.2,
    440.6, 494.6, 440.6,
    554.2, 587.2, 554.2,
    494.6, 554.6, 494.6,
    554.2, 587.2, 554.2, 494.2, 440.2, 494.2, 554.2, 587.2, 554.2, 494.2, 440.2, 494.2, 554.2, 587.2, 659.2,
    880.6, 988.6, 880.6
];

var t = 0;
music.forEach( function ( note ) {
    var duration = ( note % 1 ) * 10 / 6;
    var Hz = parseInt( note );
    var numberOfFrames = precision * duration;

    var frames = new Float32Array( numberOfFrames );
    for ( var i = 0; i < numberOfFrames ; i++ ) {  
        frames[ i ] = Math.sin( i * Math.PI * 2 / precision * Hz );  
    }

    var buffer = context.createBuffer( 1, numberOfFrames, precision );
    buffer.getChannelData( 0 ).set( frames );
    var source = context.createBufferSource( );
    source.buffer = buffer;
    source.connect( context.destination );
    source.noteOn( t );
    t += duration;
} );