Skip to content

Instantly share code, notes, and snippets.

@arjunmenon
Forked from kkoch986/basic-vis.html
Last active August 29, 2015 14:20
Show Gist options
  • Save arjunmenon/4c99fb02c1bd3991d4a6 to your computer and use it in GitHub Desktop.
Save arjunmenon/4c99fb02c1bd3991d4a6 to your computer and use it in GitHub Desktop.
<script type="text/javascript" src='http://code.jquery.com/jquery-2.1.3.min.js'></script>
<audio id="myAudio" src="http://sqr.bartekdrozdz.com/demo/soundviz/assets/spy.mp3" controls><p>Your browser does not support the audio element.</p></audio>
<!-- <audio id="myAudio" src="./a-little-something.mp3" controls><p>Your browser does not support the audio element.</p></audio> -->
<div id="visualization" style="width:100%; height:500px"></div>
<script type="text/javascript">
Number.prototype.map = function ( in_min , in_max , out_min , out_max ) {
return ( this - in_min ) * ( out_max - out_min ) / ( in_max - in_min ) + out_min;
}
window.AudioContext = window.AudioContext||window.webkitAudioContext;
var mainContainer = $("#visualization");
var barWidth = mainContainer.width() / 1024;
var unitHeight = mainContainer.height() / 255;
console.log(unitHeight);
var bars = [];
// create 1024 bars
for(var i = 0 ; i < 1024 ; i++) {
mainContainer.append("<div class='bar' />");
bars.push($(".bar:eq(" + i + ")", mainContainer));
bars[i].css({
"position":"absolute",
"left": i * barWidth,
"bottom": 0,
"height": 0, // i.map(0, 1024, 0, 255 * unitHeight),
"width":barWidth,
"background":"black"
});
}
$(function() {
var ctx = new AudioContext();
var audio = document.getElementById('myAudio');
var audioSrc = ctx.createMediaElementSource(audio);
audioSrc.connect(ctx.destination);
var analyser = ctx.createAnalyser();
// we have to connect the MediaElementSource with the analyser
audioSrc.connect(analyser);
// we could configure the analyser: e.g. analyser.fftSize (for further infos read the spec)
// frequencyBinCount tells you how many values you'll receive from the analyser
var frequencyData = new Uint8Array(analyser.frequencyBinCount);
// we're ready to receive some data!
// loop
function renderFrame() {
requestAnimationFrame(renderFrame);
// update data in frequencyData
analyser.getByteFrequencyData(frequencyData);
// render frame based on values in frequencyData
for(var f in frequencyData) {
bars[f].height(frequencyData[f] * unitHeight);
}
}
audio.play();
renderFrame();
});
</script>
<script type="text/javascript" src='http://code.jquery.com/jquery-2.1.3.min.js'></script>
<script type="text/javascript" src='perlin.js'></script>
<audio id="myAudio" src="http://sqr.bartekdrozdz.com/demo/soundviz/assets/spy.mp3" controls><p>Your browser does not support the audio element.</p></audio>
<!-- <audio id="myAudio" src="./pablo.mp3" controls><p>Your browser does not support the audio element.</p></audio> -->
<canvas id="visualization"></canvas>
<script type="text/javascript">
Number.prototype.map = function ( in_min , in_max , out_min , out_max ) {
return ( this - in_min ) * ( out_max - out_min ) / ( in_max - in_min ) + out_min;
}
window.AudioContext = window.AudioContext||window.webkitAudioContext;
$("#visualization").css({
"height":"100%",
"width":"100%",
"position":"fixed",
"top":"0",
"left":"0"
});
var modulous = 2;
var rscale = 500;
var mainContainer = $("#visualization");
mainContainer.attr("height", mainContainer.height());
mainContainer.attr("width", mainContainer.width());
var center = { x: mainContainer.width() / 2.0, y: mainContainer.height() / 2.0 };
var size = { width:mainContainer.width(), height: mainContainer.height() };
$(window).on("resize", function(){
mainContainer.attr("height", mainContainer.height());
mainContainer.attr("width", mainContainer.width());
center = { x: mainContainer.width() / 2.0, y: mainContainer.height() / 2.0 };
size = { width:mainContainer.width(), height: mainContainer.height() };
});
var canvas = document.getElementById("visualization");
var gctx = canvas.getContext("2d");
$(function() {
noise.seed(Math.random());
var ctx = new AudioContext();
var audio = document.getElementById('myAudio');
var audioSrc = ctx.createMediaElementSource(audio);
audioSrc.connect(ctx.destination);
var analyser = ctx.createAnalyser();
audioSrc.connect(analyser);
var frequencyData = new Uint8Array(analyser.frequencyBinCount);
// Animation loop
var time = 0;
function renderFrame() {
requestAnimationFrame(renderFrame);
time++;
// clear the screen
gctx.restore();
gctx.fillStyle = "rgb(0, 0, 0)";
gctx.fillRect(0,0, size.width, size.height);
// update data in frequencyData
analyser.getByteFrequencyData(frequencyData);
// render frame based on values in frequencyData
for(var f in frequencyData) {
gctx.save();
f = parseFloat(f);
if(f % modulous === 0) {
var width = f.map(0, 1024, 0, size.width);
var height = f.map(0, 1024, 0, size.height);
gctx.fillStyle = "rgba(0,0,0,0)";
var r = frequencyData[f].map( 0, 255, 0, 64);
var g = frequencyData[f].map( 0, 255, 255, 128);
var b = frequencyData[f].map( 0, 255, 255, 64);
var a = frequencyData[f].map( 0, 255, 0, 1);
var angle = Math.floor(f % 360);
gctx.translate( center.x, center.y );
var sv = time / rscale;
var nval = noise.simplex2( (time - (f*sv)) / rscale, 1 );
gctx.rotate(nval.map(0,1,0,45) * Math.PI/180);
gctx.strokeStyle = "rgba("+r.toFixed(0)+","+g.toFixed(0)+","+b.toFixed(0)+","+a+")";
gctx.strokeRect( -(width / 2.0), -(height / 2.0), width, height );
gctx.restore();
}
}
}
// play the audio and start the animation
audio.play();
renderFrame();
});
</script>
<script type="text/javascript" src='http://code.jquery.com/jquery-2.1.3.min.js'></script>
<audio id="myAudio" src="http://sqr.bartekdrozdz.com/demo/soundviz/assets/spy.mp3" controls><p>Your browser does not support the audio element.</p></audio>
<!-- <audio id="myAudio" src="./pablo.mp3" controls><p>Your browser does not support the audio element.</p></audio> -->
<canvas id="visualization"></canvas>
<script type="text/javascript">
Number.prototype.map = function ( in_min , in_max , out_min , out_max ) {
return ( this - in_min ) * ( out_max - out_min ) / ( in_max - in_min ) + out_min;
}
window.AudioContext = window.AudioContext||window.webkitAudioContext;
$("#visualization").css({
"height":"100%",
"width":"100%",
"position":"fixed",
"top":"0",
"left":"0"
});
var modulous = 2;
var mainContainer = $("#visualization");
mainContainer.attr("height", mainContainer.height());
mainContainer.attr("width", mainContainer.width());
var center = { x: mainContainer.width() / 2.0, y: mainContainer.height() / 2.0 };
var size = { width:mainContainer.width(), height: mainContainer.height() };
$(window).on("resize", function(){
mainContainer.attr("height", mainContainer.height());
mainContainer.attr("width", mainContainer.width());
center = { x: mainContainer.width() / 2.0, y: mainContainer.height() / 2.0 };
size = { width:mainContainer.width(), height: mainContainer.height() };
});
var canvas = document.getElementById("visualization");
var gctx = canvas.getContext("2d");
$(function() {
var ctx = new AudioContext();
var audio = document.getElementById('myAudio');
var audioSrc = ctx.createMediaElementSource(audio);
audioSrc.connect(ctx.destination);
var analyser = ctx.createAnalyser();
audioSrc.connect(analyser);
var frequencyData = new Uint8Array(analyser.frequencyBinCount);
// console.log(size, center);
// Animation loop
function renderFrame() {
requestAnimationFrame(renderFrame);
// clear the screen
gctx.rotate(0);
gctx.fillStyle = "rgb(0, 0, 0)";
gctx.fillRect(0,0,size.width, size.height);
// update data in frequencyData
analyser.getByteFrequencyData(frequencyData);
// render frame based on values in frequencyData
for(var f in frequencyData) {
f = parseFloat(f);
if(f % modulous === 0) {
var width = f.map(0, 1024, size.width, 0);
var height = f.map(0, 1024, size.height, 0);
gctx.fillStyle = "rgba(0,0,0,0)";
var r = frequencyData[f].map( 0, 255, 0, 128);
var g = frequencyData[f].map( 0, 255, 255, 128);
var b = frequencyData[f].map( 0, 255, 255, 128);
var a = frequencyData[f].map( 0, 255, 0, 1);
gctx.strokeStyle = "rgba("+r.toFixed(0)+","+g.toFixed(0)+","+b.toFixed(0)+","+a+")";
gctx.strokeRect( center.x - (width / 2.0), center.y - (height / 2.0), width, height );
}
}
}
// play the audio and start the animation
audio.play();
renderFrame();
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment