JSFiddle - React, Tailwind, and code Playground

by sss1024

HTML

<script src="https://rawgit.com/surikov/webaudiofont/master/WebAudioFontPlayer.js"></script>
<script src="https://cdn.rawgit.com/surikov/webaudiofont/master/webaudiofont/39.16.Rubber_32Bass000079_461_460_45127.js"></script>
<script src="https://cdn.rawgit.com/surikov/webaudiofont/master/webaudiofont/128.36.Jazz_4632.js"></script>
<script src="https://cdn.rawgit.com/surikov/webaudiofont/master/webaudiofont/128.38.Standard_32_32_460.js"></script>
<script src="https://cdn.rawgit.com/surikov/webaudiofont/master/webaudiofont/128.42.Power_4616.js"></script>
<script src="https://cdn.rawgit.com/surikov/webaudiofont/master/webaudiofont/51.0.Synth_32Str_322_32synstrings2_461_460_45127.js"></script>
<script src="https://cdn.rawgit.com/surikov/webaudiofont/master/webaudiofont/128.46.Standard_32_32_460.js"></script>
<script src="https://cdn.rawgit.com/surikov/webaudiofont/master/webaudiofont/55.0.Orchestra_32Htorchestrahit_461_460_45127.js"></script>

JavaScript

var AudioContextFunc = window.AudioContext || window.webkitAudioContext;
			var audioContext = new AudioContextFunc();
			var player = new WebAudioFontPlayer();
			var gainDrums = audioContext.createGain();gainDrums.connect(audioContext.destination);gainDrums.gain.value=0.9;
			var gainSynth = audioContext.createGain();gainSynth.connect(audioContext.destination);gainSynth.gain.value=0.5;
			var gainBass = audioContext.createGain();gainBass.connect(audioContext.destination);gainBass.gain.value=1.0;
			var gainHit = audioContext.createGain();gainHit.connect(audioContext.destination);gainHit.gain.value=0.9;
			var bpm = 120;
			var N = 4 * 60 / bpm;
			var pieceLen = 4 * N;
			var beatLen=1/16 * N;
			var C2 = 0+12*2, c2 = 1+12*2, D2 = 2+12*2, d2 = 3+12*2, E2 = 4+12*2, F2 = 5+12*2, f2 = 6+12*2, G2 = 7+12*2, g2 = 8+12*2, A2 = 9+12*2, a2 = 10+12*2, B2 = 11+12*2;
			var C3 = 0+12*3, c3 = 1+12*3, D3 = 2+12*3, d3 = 3+12*3, E3 = 4+12*3, F3 = 5+12*3, f3 = 6+12*3, G3 = 7+12*3, g3 = 8+12*3, A3 = 9+12*3, a3 = 10+12*3, B3 = 11+12*3;
			var C4 = 0+12*4, c4 = 1+12*4, D4 = 2+12*4, d4 = 3+12*4, E4 = 4+12*4, F4 = 5+12*4, f4 = 6+12*4, G4 = 7+12*4, g4 = 8+12*4, A4 = 9+12*4, a4 = 10+12*4, B4 = 11+12*4;
			var C5 = 0+12*5, c5 = 1+12*5, D5 = 2+12*5, d5 = 3+12*5, E5 = 4+12*5, F5 = 5+12*5, f5 = 6+12*5, G5 = 7+12*5, g5 = 8+12*5, A5 = 9+12*5, a5 = 10+12*5, B5 = 11+12*5;
			var C6 = 0+12*6, c6 = 1+12*6, D6 = 2+12*6, d6 = 3+12*6, E6 = 4+12*6, F6 = 5+12*6, f6 = 6+12*6, G6 = 7+12*6, g6 = 8+12*6, A6 = 9+12*6, a6 = 10+12*6, B6 = 11+12*6;
			var started = false;
			var startTime = 0;
			function orchestra(pitch, duration){return {gain:gainHit,preset:_tone_Orchestra_32Htorchestrahit_461_460_45127,pitch:pitch,duration:duration*N};}
			function synth(pitch, duration){return {gain:gainSynth,preset:_tone_Synth_32Str_322_32synstrings2_461_460_45127,pitch:pitch,duration:duration*N};}
			function bass(pitch, duration){return...