ibanez270dx
7/13/2013 - 6:50 PM
HTML5 Web Audio Example
HTML5 Web Audio Example
<!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>