JSFiddle - React, Tailwind, and code Playground

by yotammann

HTML

<script>
var Graph=function(t,e){function n(t){t.preventDefault(),i(t.deltaX),a(t.deltaY),r()}function a(t){var e=m[1]-m[0];if(e>w||t>0){var n=-e*t*.01;m[0]+=n,m[1]-=n,o()}}function i(t){var e=(m[1]-m[0])*t*.01;m[0]+=e,m[1]+=e,o()}function o(){m[0]=Math.floor(Math.max(m[0],0)),m[1]=Math.floor(Math.min(m[1],g.length)),m[1]=Math.max(m[1],w)}function f(){var t=(m[1]-m[0])/x;magnitude=Math.ceil(Math.log10(t))-1;var e=Math.pow(10,magnitude);s.font="20px Corrier",s.fillStyle="black";for(var n=m[0]/x;n<m[1]/x;n+=e)s.fillText(n.toFixed(Math.abs(magnitude)),h(44100*n),s.canvas.height-10)}function r(){var t=s.canvas.width;s.clearRect(0,0,t,s.canvas.height),s.strokeStyle="black",s.lineWidth=4,s.beginPath();for(var e=0;t>e;e++){var n=v(e),a=g[n],i=c(a);0===e?s.moveTo(e,i):s.lineTo(e,i)}s.stroke(),f()}function l(t){r(),s.beginPath();var e=v(t),n=c(g[e]);s.fillStyle="#f0f",s.fillRect(t-5,n-5,13,13),s.fillStyle="rgba(255, 255, 255, 0.9)",s.fillRect(t,n+12,135,24),s.fillStyle="#f0f";var a="("+(e/x).toFixed(4)+", "+g[e].toFixed(4)+")";s.fillText(a,t,n+30)}function d(t,e,n,a,i){var o=(t-e)/(n-e);return o*(i-a)+a}function h(t){return d(t,m[0],m[1],0,s.canvas.width)}function v(t){return Math.floor(d(t,0,s.canvas.width,m[0],m[1]))}function c(t){return d(t,p,y,s.canvas.height-40,10)}var u=document.createElement("canvas");document.body.appendChild(u),u.style.width="100%",u.style.height="200px";var s=u.getContext("2d");s.canvas.width=2*u.offsetWidth,s.canvas.height=2*u.offsetHeight,u.addEventListener("mousewheel",n),u.addEventListener("wheel",n),window.addEventListener("resize",function(){s.canvas.width=2*u.offsetWidth}),u.addEventListener("mousemove",function(t){l(2*t.offsetX)}),u.addEventListener("mouseleave",r);var g,m=[0,0],w=400,x=44100;OfflineAudioContext=window.OfflineAudioContext||window.webkitOfflineAudioContext;var M=new OfflineAudioContext(1,Math.floor(e*x),x);"undefined"!=typeof...

JavaScript

Graph(function(context, output){

			//a looped buffer that outputs 1
			var ones = context.createBuffer(1, 128, context.sampleRate);
			var arr = ones.getChannelData(0);
			for (var i = 0; i < arr.length; i++){
				arr[i] = 1;
			}

			var onePlayer = context.createBufferSource();
			onePlayer.channelCount = 1;
			onePlayer.channelCountMode = "explicit";
			onePlayer.buffer = ones;
			onePlayer.loop = true;
			onePlayer.start(0);

			var gainNode = context.createGain();
			gainNode.connect(output);
			onePlayer.connect(gainNode);

			//the envelope scheduling
			gainNode.gain.setValueAtTime(0, 0);

			var attackTime = 0.05;
			var blockAlignedTime = (128/44100) * 20;
			//attack
			gainNode.gain.linearRampToValueAtTime(1, attackTime);
			//decay
			gainNode.gain.exponentialRampToValueAtTime(0.5, 0.2);

		}, 0.3);