ibanez270dx · October 19, 2021 13:13
diff --git a/example.html b/example.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>Web audio: Filter Playground</title>
  <link href="http://www.smartjava.org/examples/webaudio-filters/css/bootstrap.css" rel="stylesheet"/>
 </head>

 <body>
  <div class="container">
    <h1 class="pagination-centered">HTML5 Web audio</h1>

    <div class="span1">
      <span>Microphone:</span>
    </div>

    <div class="span2">
      <div class="btn-toolbar" style="margin-top: -7px; margin-left: 10px">
        <div class="btn-group">
          <a class="btn btn-primary" id="mic-start" href="#"><i id="mic-start-icon" class="icon-play icon-white"></i></a>
          <a class="btn btn-primary disabled" id="mic-stop" href="#"><i id="mic-stop-icon" class="icon-stop icon-white"></i></a>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="span4">
        Spectrogram:
        <canvas id="spectrogram" width="300" height="256" style="display: block; background-color: black ;"></canvas>
      </div>

      <div class="span4">
        Waveform:
        <canvas id="waveform" width="300" height="256" style="display: block; background-color: black ;"></canvas>
      </div>

      <div class="span4">
        Wave:
        <canvas id="wave" width="530" height="100" style="display: block; background-color: white ;"></canvas>
      </div>
    </div>
  </div>

 <script src="http://www.smartjava.org/examples/webaudio-filters/js/jquery-1.8.2.js"></script>
 <script src="http://www.smartjava.org/examples/webaudio-filters/js/jquery-ui-1.9.1.custom.js"></script>
 <script src="http://www.smartjava.org/examples/webaudio-filters/js/bootstrap.min.js"></script>
 <script src="http://www.smartjava.org/examples/webaudio-filters/js/chroma.js"></script>
 <script>

 // some globals
 var context = new webkitAudioContext();
 var audioBuffer;
 var sourceNode;
 var mediaStreamSource;



 var osc = context.createOscillator();

 var filter = context.createBiquadFilter();
 filter.type = 3;
 filter.frequency.value = 440;
 filter.Q.value = 0;
 filter.gain.value = 0;


 // state variables
 var micRunning = false;

 // setup a javascript node
 var javascriptNode = context.createJavaScriptNode(2048, 1, 1);

 // connect to destination, else it isn't called
 javascriptNode.connect(context.destination);
 // when the javascript node is called
 // we use information from the analyzer node
 // to draw the volume
 javascriptNode.onaudioprocess = function () {

    // get the average for the first channel
    var array = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(array);

    if (micRunning) {
      drawSpectrogram(array);

      var array2 = new Uint8Array(analyser.frequencyBinCount);
      analyser.getByteTimeDomainData(array2);
      drawWave(array2);
      drawWaveform(array2);
    }

 }

 // setup a analyzer
 var analyser = context.createAnalyser();
 analyser.smoothingTimeConstant = 0;
 analyser.fftSize = 512;

 // create a buffer source node
 filter.connect(analyser);
 analyser.connect(javascriptNode);

 // used for color distribution
 var hot = new chroma.ColorScale({
    colors:['#000000', '#ff0000', '#ffff00', '#ffffff'],
    positions:[0, .25, .75, 1],
    mode:'rgb',
    limits:[0, 350]
 });

 $(document).ready(function () {
    setupHandlers();
 });

 function setupHandlers() {
  $("#mic-start").click(function () {
      navigator.webkitGetUserMedia({audio:true},function(stream) {
          mediaStreamSource = context.createMediaStreamSource(stream);
          mediaStreamSource.connect(filter);

          micRunning = true;
          $("#mic-start").addClass("disabled");
          $("#mic-stop").removeClass("disabled");
      });
  });

  $("#mic-stop").click(function () {
      mediaStreamSource.disconnect(filter);
      micRunning = false;


      $("#mic-stop").addClass("disabled");
      $("#mic-start").removeClass("disabled");
  });
 }

 // log if an error occurs
 function onError(e) {
  console.log(e);
 }

 function drawWave(array) {
    var ctx = $("#wave").get()[0].getContext("2d");
    ctx.fillStyle = "#000000"
    ctx.clearRect(0, 0, 530, 100);

    for ( var i = 0; i < (array.length); i++ ){
      var value = array[i];
      // console.log("values: " + i + ", " + value);
      // ctx.fillRect(i+22,100-value,1,1);
      ctx.fillRect(i,190-value,1,1);
    }
 };

 function drawWaveform(array) {
  var ctx = $("#waveform").get()[0].getContext("2d");
  // create a temp canvas we use for copying
  var tempCanvas = document.createElement("canvas");
  tempCanvas.width = 460;
  tempCanvas.height = 300;
  var tempCtx = tempCanvas.getContext("2d");

  // copy the current canvas onto the temp canvas
  var canvas = document.getElementById("waveform");
  tempCtx.drawImage(canvas, 0, 0, 530, 100);

  for (var i = 0; i < array.length; i++) {
    // draw each pixel with the specific color
    var value = array[i];
    ctx.fillStyle = hot.getColor(value).hex();

    // draw the line at the right side of the canvas
    ctx.fillRect(300-1,190-value,1,1);
    ctx.translate(-1, 0);
  }

  // set translate on the canvas
  ctx.translate(-1, 0);

  // draw the copied image
  ctx.drawImage(waveform, 0, 0, 300, 256, 0, 0, 300, 256);

  // reset the transformation matrix
  // ctx.setTransform(1, 0, 0, 1, 0, 0);
 }


 function drawSpectrogram(array) {
  var ctx = $("#spectrogram").get()[0].getContext("2d");
  // create a temp canvas we use for copying
  var tempCanvas = document.createElement("canvas");
  tempCanvas.width = 460;
  tempCanvas.height = 300;
  var tempCtx = tempCanvas.getContext("2d");

  // copy the current canvas onto the temp canvas
  var canvas = document.getElementById("spectrogram");
  tempCtx.drawImage(canvas, 0, 0, 530, 100);

  // iterate over the elements from the array
  for (var i = 0; i < array.length; i++) {
    // draw each pixel with the specific color
    var value = array[i];
    ctx.fillStyle = hot.getColor(value).hex();

    // draw the line at the right side of the canvas
    ctx.fillRect(300 - 1, 256 - i, 1, 1);
  }

  // set translate on the canvas
  ctx.translate(-1, 0);
  // draw the copied image
  ctx.drawImage(spectrogram, 0, 0, 300, 256, 0, 0, 300, 256);

  // reset the transformation matrix
  ctx.setTransform(1, 0, 0, 1, 0, 0);
 }

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Web audio: Filter Playground</title>
	<link href="http://www.smartjava.org/examples/webaudio-filters/css/bootstrap.css" rel="stylesheet"/>
	</head>

	<body>
	<div class="container">
	<h1 class="pagination-centered">HTML5 Web audio</h1>

	<div class="span1">
	<span>Microphone:</span>
	</div>

	<div class="span2">
	<div class="btn-toolbar" style="margin-top: -7px; margin-left: 10px">
	<div class="btn-group">
	<a class="btn btn-primary" id="mic-start" href="#"><i id="mic-start-icon" class="icon-play icon-white"></i></a>
	<a class="btn btn-primary disabled" id="mic-stop" href="#"><i id="mic-stop-icon" class="icon-stop icon-white"></i></a>
	</div>
	</div>
	</div>
	</div>

	<div class="container">
	<div class="row">
	<div class="span4">
	Spectrogram:
	<canvas id="spectrogram" width="300" height="256" style="display: block; background-color: black ;"></canvas>
	</div>

	<div class="span4">
	Waveform:
	<canvas id="waveform" width="300" height="256" style="display: block; background-color: black ;"></canvas>
	</div>

	<div class="span4">
	Wave:
	<canvas id="wave" width="530" height="100" style="display: block; background-color: white ;"></canvas>
	</div>
	</div>
	</div>

	<script src="http://www.smartjava.org/examples/webaudio-filters/js/jquery-1.8.2.js"></script>
	<script src="http://www.smartjava.org/examples/webaudio-filters/js/jquery-ui-1.9.1.custom.js"></script>
	<script src="http://www.smartjava.org/examples/webaudio-filters/js/bootstrap.min.js"></script>
	<script src="http://www.smartjava.org/examples/webaudio-filters/js/chroma.js"></script>
	<script>

	// some globals
	var context = new webkitAudioContext();
	var audioBuffer;
	var sourceNode;
	var mediaStreamSource;



	var osc = context.createOscillator();

	var filter = context.createBiquadFilter();
	filter.type = 3;
	filter.frequency.value = 440;
	filter.Q.value = 0;
	filter.gain.value = 0;


	// state variables
	var micRunning = false;

	// setup a javascript node
	var javascriptNode = context.createJavaScriptNode(2048, 1, 1);

	// connect to destination, else it isn't called
	javascriptNode.connect(context.destination);
	// when the javascript node is called
	// we use information from the analyzer node
	// to draw the volume
	javascriptNode.onaudioprocess = function () {

	// get the average for the first channel
	var array = new Uint8Array(analyser.frequencyBinCount);
	analyser.getByteFrequencyData(array);

	if (micRunning) {
	drawSpectrogram(array);

	var array2 = new Uint8Array(analyser.frequencyBinCount);
	analyser.getByteTimeDomainData(array2);
	drawWave(array2);
	drawWaveform(array2);
	}

	}

	// setup a analyzer
	var analyser = context.createAnalyser();
	analyser.smoothingTimeConstant = 0;
	analyser.fftSize = 512;

	// create a buffer source node
	filter.connect(analyser);
	analyser.connect(javascriptNode);

	// used for color distribution
	var hot = new chroma.ColorScale({
	colors:['#000000', '#ff0000', '#ffff00', '#ffffff'],
	positions:[0, .25, .75, 1],
	mode:'rgb',
	limits:[0, 350]
	});

	$(document).ready(function () {
	setupHandlers();
	});

	function setupHandlers() {
	$("#mic-start").click(function () {
	navigator.webkitGetUserMedia({audio:true},function(stream) {
	mediaStreamSource = context.createMediaStreamSource(stream);
	mediaStreamSource.connect(filter);

	micRunning = true;
	$("#mic-start").addClass("disabled");
	$("#mic-stop").removeClass("disabled");
	});
	});

	$("#mic-stop").click(function () {
	mediaStreamSource.disconnect(filter);
	micRunning = false;


	$("#mic-stop").addClass("disabled");
	$("#mic-start").removeClass("disabled");
	});
	}

	// log if an error occurs
	function onError(e) {
	console.log(e);
	}

	function drawWave(array) {
	var ctx = $("#wave").get()[0].getContext("2d");
	ctx.fillStyle = "#000000"
	ctx.clearRect(0, 0, 530, 100);

	for ( var i = 0; i < (array.length); i++ ){
	var value = array[i];
	// console.log("values: " + i + ", " + value);
	// ctx.fillRect(i+22,100-value,1,1);
	ctx.fillRect(i,190-value,1,1);
	}
	};

	function drawWaveform(array) {
	var ctx = $("#waveform").get()[0].getContext("2d");
	// create a temp canvas we use for copying
	var tempCanvas = document.createElement("canvas");
	tempCanvas.width = 460;
	tempCanvas.height = 300;
	var tempCtx = tempCanvas.getContext("2d");

	// copy the current canvas onto the temp canvas
	var canvas = document.getElementById("waveform");
	tempCtx.drawImage(canvas, 0, 0, 530, 100);

	for (var i = 0; i < array.length; i++) {
	// draw each pixel with the specific color
	var value = array[i];
	ctx.fillStyle = hot.getColor(value).hex();

	// draw the line at the right side of the canvas
	ctx.fillRect(300-1,190-value,1,1);
	ctx.translate(-1, 0);
	}

	// set translate on the canvas
	ctx.translate(-1, 0);

	// draw the copied image
	ctx.drawImage(waveform, 0, 0, 300, 256, 0, 0, 300, 256);

	// reset the transformation matrix
	// ctx.setTransform(1, 0, 0, 1, 0, 0);
	}


	function drawSpectrogram(array) {
	var ctx = $("#spectrogram").get()[0].getContext("2d");
	// create a temp canvas we use for copying
	var tempCanvas = document.createElement("canvas");
	tempCanvas.width = 460;
	tempCanvas.height = 300;
	var tempCtx = tempCanvas.getContext("2d");

	// copy the current canvas onto the temp canvas
	var canvas = document.getElementById("spectrogram");
	tempCtx.drawImage(canvas, 0, 0, 530, 100);

	// iterate over the elements from the array
	for (var i = 0; i < array.length; i++) {
	// draw each pixel with the specific color
	var value = array[i];
	ctx.fillStyle = hot.getColor(value).hex();

	// draw the line at the right side of the canvas
	ctx.fillRect(300 - 1, 256 - i, 1, 1);
	}

	// set translate on the canvas
	ctx.translate(-1, 0);
	// draw the copied image
	ctx.drawImage(spectrogram, 0, 0, 300, 256, 0, 0, 300, 256);

	// reset the transformation matrix
	ctx.setTransform(1, 0, 0, 1, 0, 0);
	}

	</script>
	</body>
	</html>