Skip to content

Instantly share code, notes, and snippets.

@zarazum

zarazum/index.html

Created November 21, 2014 08:10
Show Gist options
  • Save zarazum/b52e4209f6b8557edf22 to your computer and use it in GitHub Desktop.
Save zarazum/b52e4209f6b8557edf22 to your computer and use it in GitHub Desktop.
Download ZIP
Bytebeat meets Canvas // source http://jsbin.com/neguwe
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Bytebeat meets Canvas" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<button id="play">Play</button>
<button id="stop">Stop</button>
<script id="jsbin-javascript">
!function( window, document, AudioContext ) {
'use strict';
var
body = document.getElementsByTagName('body')[0],
canvas = document.createElement('canvas'),
playBtn = document.getElementById('play'),
stopBtn = document.getElementById('stop'),
// Audio
context = new AudioContext(),
bufferSize = 16384,
byteBeat = context.createScriptProcessor(bufferSize, 2, 2),
analyzer = context.createAnalyser(),
// Canvas
ctx = canvas.getContext('2d'),
iID = null,
time = 0,
play = function() {
byteBeat.connect(analyzer);
//iID = window.setInterval(getAnalyzer, 30);
},
reSample = function( now ) {
return Math.floor(now * 8000 / 44100);
},
stop = function() {
byteBeat.disconnect();
clearInterval(iID);
time = 0;
},
getAnalyzer = function() {
var
freqSize = new Uint8Array(analyzer.frequencyBinCount),
height,
value,
barWidth,
i;
// end of vars
analyzer.getByteFrequencyData(freqSize);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'black';
for ( i = 0; i < analyzer.frequencyBinCount; i++ ) {
value = freqSize[i];
height = canvas.height - value;
barWidth = canvas.width/analyzer.frequencyBinCount;
ctx.fillRect(i * barWidth, 256 - height, barWidth, height);
}
};
// end of vars
byteBeat.onaudioprocess = function( event ) {
var
outputLeft = event.outputBuffer.getChannelData(0),
outputRight = event.outputBuffer.getChannelData(1),
//bytes = new Uint8ClampedArray(bufferSize),
pixels = ctx.createImageData(64,64),
i;
// end of vars
for ( i = 0; i < bufferSize; i++ ) {
pixels.data[i] = ((function(t) {
// return t*((t>>9|t>>13)&25&t>>6);
//return t;//&t>>8;
//return ((t*(t>>8|t>>9)&46&t>>8))^(t&t>>13|t>>6);
return ((t<<1)^((t<<1)+(t>>7)&t>>12))|t>>(4-(1^7&(t>>19)))|t>>7;
}(reSample(time++))) & 255);
outputLeft[i] = pixels.data[i] / 127 - 1;
outputRight[i] = outputLeft[i];
/*
outputRight[i] = ((function(t) {
// return t*((t>>9|t>>13)&25&t>>6);
return ((t*(t>>8|t>>9)&46&t>>8))^(t&t>>13|t>>6);
// return ((t<<1)^((t<<1)+(t>>7)&t>>12))|t>>(4-(1^7&(t>>19)))|t>>7;
}(reSample(time))) & 255) / 127 - 1;
*/
}
ctx.putImageData(pixels,0,0);
};
analyzer.connect(context.destination);
playBtn.addEventListener('click', play);
stopBtn.addEventListener('click', stop);
canvas.width = 256;
canvas.height = 256;
canvas.style.width = '1024px';
// canvas.style.height = '480px';
//ctx.scale(4,4);
// context.transform(2,2,0,0,0,0);
body.appendChild(canvas);
}(
this,
this.document,
this.AudioContext || this.webkitAudioContext
);
</script>
<script id="jsbin-source-javascript" type="text/javascript">!function( window, document, AudioContext ) {
'use strict';
var
body = document.getElementsByTagName('body')[0],
canvas = document.createElement('canvas'),
playBtn = document.getElementById('play'),
stopBtn = document.getElementById('stop'),
// Audio
context = new AudioContext(),
bufferSize = 16384,
byteBeat = context.createScriptProcessor(bufferSize, 2, 2),
analyzer = context.createAnalyser(),
// Canvas
ctx = canvas.getContext('2d'),
iID = null,
time = 0,
play = function() {
byteBeat.connect(analyzer);
//iID = window.setInterval(getAnalyzer, 30);
},
reSample = function( now ) {
return Math.floor(now * 8000 / 44100);
},
stop = function() {
byteBeat.disconnect();
clearInterval(iID);
time = 0;
},
getAnalyzer = function() {
var
freqSize = new Uint8Array(analyzer.frequencyBinCount),
height,
value,
barWidth,
i;
// end of vars
analyzer.getByteFrequencyData(freqSize);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'black';
for ( i = 0; i < analyzer.frequencyBinCount; i++ ) {
value = freqSize[i];
height = canvas.height - value;
barWidth = canvas.width/analyzer.frequencyBinCount;
ctx.fillRect(i * barWidth, 256 - height, barWidth, height);
}
};
// end of vars
byteBeat.onaudioprocess = function( event ) {
var
outputLeft = event.outputBuffer.getChannelData(0),
outputRight = event.outputBuffer.getChannelData(1),
//bytes = new Uint8ClampedArray(bufferSize),
pixels = ctx.createImageData(64,64),
i;
// end of vars
for ( i = 0; i < bufferSize; i++ ) {
pixels.data[i] = ((function(t) {
// return t*((t>>9|t>>13)&25&t>>6);
//return t;//&t>>8;
//return ((t*(t>>8|t>>9)&46&t>>8))^(t&t>>13|t>>6);
return ((t<<1)^((t<<1)+(t>>7)&t>>12))|t>>(4-(1^7&(t>>19)))|t>>7;
}(reSample(time++))) & 255);
outputLeft[i] = pixels.data[i] / 127 - 1;
outputRight[i] = outputLeft[i];
/*
outputRight[i] = ((function(t) {
// return t*((t>>9|t>>13)&25&t>>6);
return ((t*(t>>8|t>>9)&46&t>>8))^(t&t>>13|t>>6);
// return ((t<<1)^((t<<1)+(t>>7)&t>>12))|t>>(4-(1^7&(t>>19)))|t>>7;
}(reSample(time))) & 255) / 127 - 1;
*/
}
ctx.putImageData(pixels,0,0);
};
analyzer.connect(context.destination);
playBtn.addEventListener('click', play);
stopBtn.addEventListener('click', stop);
canvas.width = 256;
canvas.height = 256;
canvas.style.width = '1024px';
// canvas.style.height = '480px';
//ctx.scale(4,4);
// context.transform(2,2,0,0,0,0);
body.appendChild(canvas);
}(
this,
this.document,
this.AudioContext || this.webkitAudioContext
);</script></body>
</html>
Raw
jsbin.neguwe.js
!function( window, document, AudioContext ) {
'use strict';
var
body = document.getElementsByTagName('body')[0],
canvas = document.createElement('canvas'),
playBtn = document.getElementById('play'),
stopBtn = document.getElementById('stop'),
// Audio
context = new AudioContext(),
bufferSize = 16384,
byteBeat = context.createScriptProcessor(bufferSize, 2, 2),
analyzer = context.createAnalyser(),
// Canvas
ctx = canvas.getContext('2d'),
iID = null,
time = 0,
play = function() {
byteBeat.connect(analyzer);
//iID = window.setInterval(getAnalyzer, 30);
},
reSample = function( now ) {
return Math.floor(now * 8000 / 44100);
},
stop = function() {
byteBeat.disconnect();
clearInterval(iID);
time = 0;
},
getAnalyzer = function() {
var
freqSize = new Uint8Array(analyzer.frequencyBinCount),
height,
value,
barWidth,
i;
// end of vars
analyzer.getByteFrequencyData(freqSize);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'black';
for ( i = 0; i < analyzer.frequencyBinCount; i++ ) {
value = freqSize[i];
height = canvas.height - value;
barWidth = canvas.width/analyzer.frequencyBinCount;
ctx.fillRect(i * barWidth, 256 - height, barWidth, height);
}
};
// end of vars
byteBeat.onaudioprocess = function( event ) {
var
outputLeft = event.outputBuffer.getChannelData(0),
outputRight = event.outputBuffer.getChannelData(1),
//bytes = new Uint8ClampedArray(bufferSize),
pixels = ctx.createImageData(64,64),
i;
// end of vars
for ( i = 0; i < bufferSize; i++ ) {
pixels.data[i] = ((function(t) {
// return t*((t>>9|t>>13)&25&t>>6);
//return t;//&t>>8;
//return ((t*(t>>8|t>>9)&46&t>>8))^(t&t>>13|t>>6);
return ((t<<1)^((t<<1)+(t>>7)&t>>12))|t>>(4-(1^7&(t>>19)))|t>>7;
}(reSample(time++))) & 255);
outputLeft[i] = pixels.data[i] / 127 - 1;
outputRight[i] = outputLeft[i];
/*
outputRight[i] = ((function(t) {
// return t*((t>>9|t>>13)&25&t>>6);
return ((t*(t>>8|t>>9)&46&t>>8))^(t&t>>13|t>>6);
// return ((t<<1)^((t<<1)+(t>>7)&t>>12))|t>>(4-(1^7&(t>>19)))|t>>7;
}(reSample(time))) & 255) / 127 - 1;
*/
}
ctx.putImageData(pixels,0,0);
};
analyzer.connect(context.destination);
playBtn.addEventListener('click', play);
stopBtn.addEventListener('click', stop);
canvas.width = 256;
canvas.height = 256;
canvas.style.width = '1024px';
// canvas.style.height = '480px';
//ctx.scale(4,4);
// context.transform(2,2,0,0,0,0);
body.appendChild(canvas);
}(
this,
this.document,
this.AudioContext || this.webkitAudioContext
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment