JSFiddle - React, Tailwind, and code Playground

by mohayonao

HTML

<button id="test">
  test
</button>
<div id="results"></div>
<img width="480px" src="https://cloud.githubusercontent.com/assets/158075/20644443/c1405fb2-b477-11e6-8ac5-222aab1ff6c7.png"/>

JavaScript

var AudioContext = window.AudioContext || window.webkitAudioContext;
var $results = document.getElementById("results");

$results.innerText = JSON.stringify({
  "Graph A": 128,
  "Graph B": 128,
  "Graph C": 128,
}, null, 2);

document.getElementById("test").onclick = function() {
  if (!test.called) {
    test();
    test.called = true;
  }
};

function test() {
  var audioContext = new AudioContext();
  var a = graphA(audioContext);
  var b = graphB(audioContext);
  var c = graphC(audioContext);
  
  setInterval(function() {
    $results.innerText = JSON.stringify({
      "Graph A": a(),
      "Graph B": b(),
      "Graph C": c(),
    }, null, 2);
  }, 100);
}

function graphA(audioContext) {
  var oscillator = audioContext.createOscillator();
  var analyser = audioContext.createAnalyser();
  var uint8 = new Uint8Array(analyser.fftSize);
  
  oscillator.start(audioContext.currentTime);
  oscillator.connect(analyser);

  // analyser.connect(audioContext.destination);

  return function() {
    analyser.getByteTimeDomainData(uint8);
    return uint8[0];
  }
}

function graphB(audioContext) {
  var oscillator = audioContext.createOscillator();
  var analyser = audioContext.createAnalyser();
  var gain = audioContext.createGain();
  var uint8 = new Uint8Array(analyser.fftSize);
  
  oscillator.start(audioContext.currentTime);
  oscillator.connect(analyser);

	analyser.connect(gain);
   
  gain.gain.value = 0;
  gain.connect(audioContext.destination);

  return function() {
    analyser.getByteTimeDomainData(uint8);
    return uint8[0];
  }
}


function graphC(audioContext) {
  var oscillator = audioContext.createOscillator();
  var analyser = audioContext.createAnalyser();
  var gain = audioContext.createGain();
  var uint8 = new Uint8Array(analyser.fftSize);
  
  oscillator.start(audioContext.currentTime);
  oscillator.connect(analyser);

	analyser.connect(gain);
   
  // gain.connect(audioContext.destination);

  return function() {
   ...