Skip to content

Instantly share code, notes, and snippets.

@califat califat/index.html forked from anonymous/index.html
Created Aug 30, 2017

Embed
What would you like to do?
Music Makes You Travel
<a href="" target=""><canvas id="sketch"></canvas></a>
/*
* Music Makes You Travel by Lionel Radisson // Makio135 is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
* http://creativecommons.org/licenses/by-nc-sa/4.0/
*
* Based on my processing experiment at openprocessing.org/sketch/138877
*/
(function(d, w, u) {
// check if the default naming is enabled, if not use the chrome one.
if (!w.AudioContext) {
if (!w.webkitAudioContext) {
alert('no audiocontext found');
}
w.AudioContext = w.webkitAudioContext;
}
var canvas = d.getElementById("sketch"),
ctx = canvas.getContext("2d"),
width = w.innerWidth,
height = w.innerHeight;
var audioContext, analyserNode, javascriptNode, sourceNode,
bufferSize = 512,
frequencies = [];
var tracks = [],
musicUrl, artistName, musicName, info;
var frameCount = 0,
img = new Image(),
Y = -100,
echelle,
sensib = 1.5,
step = 2;
function setup() {
canvas.width = width;
canvas.height = height;
echelle = width / bufferSize;
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, width, height);
ctx.strokeStyle = "rgba( 255, 255, 255, 0.1 )";
setupAudio(bufferSize);
//loadSound("http://crossorigin.me/http://audio.ngfiles.com/152000/152047_ParagonX9___Chaoz_Impact.mp3");
loadSound("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/new_year_dubstep_minimix.ogg");
// loadSound("//katiebaca.com/tutorial/odd-look.mp3");
}
function draw() {
w.requestAnimationFrame(draw);
if (frameCount % 3 == 0) {
if (frameCount > 6) ctx.drawImage(img, 0, -2);
if (frameCount % 1200 == 0){
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, width, height);
}
ctx.fillStyle = "#000";
ctx.beginPath();
ctx.moveTo(0, Y + frequencies[0] * sensib);
for (var i = step; i < bufferSize; i += step) {
ctx.lineTo(i * echelle, Y + frequencies[i] * sensib);
}
ctx.lineTo(width, Y + 400);
ctx.lineTo(0, Y + 400);
ctx.closePath();
ctx.fill();
for (var i = 1; i < bufferSize - step; i += step) {
ctx.beginPath();
ctx.moveTo(i * echelle, Y + frequencies[i] * sensib);
ctx.lineTo(i + step, Y + frequencies[i + step] * sensib);
ctx.stroke();
}
img.src = d.getElementById("sketch").toDataURL("image/jpeg", 0.95);
if (info != undefined) {
ctx.fillStyle = "rgba(0, 0, 0, 0.4)";
ctx.fillRect(5, height - 30, width - 10, 20);
ctx.fillStyle = "rgba(150, 150, 150, 1)";
ctx.fillText(info, 10, height - 15);
}
if (Y < height - 300) {
Y += 2;
}
}
frameCount++;
}
function setupAudio(buffSize) {
audioContext = new AudioContext();
javascriptNode = audioContext.createScriptProcessor(2048, 1, 1);
javascriptNode.connect(audioContext.destination);
javascriptNode.onaudioprocess = function() {
var array = new Uint8Array(analyserNode.frequencyBinCount);
analyserNode.getByteTimeDomainData(array);
frequencies = array;
}
analyserNode = audioContext.createAnalyser();
analyserNode.smoothingTimeConstant = 0.3;
analyserNode.fftSize = buffSize * 2;
// create a buffer source node
sourceNode = audioContext.createBufferSource();
sourceNode.onended = setup;
sourceNode.connect(analyserNode);
analyserNode.connect(javascriptNode);
sourceNode.connect(audioContext.destination);
}
// load the specified sound
function loadSound(url) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';
// When loaded decode the data
request.onload = function() {
// decode the data
audioContext.decodeAudioData(request.response, function(buffer) {
// when the audio is decoded play the sound
playSound(buffer);
}, onError);
}
request.send();
}
function playSound(buffer) {
sourceNode.buffer = buffer;
sourceNode.start(0);
}
// log if an error occurs
function onError(e) {
console.log(e);
}
setup();
draw();
})(document, window, undefined);
canvas{
background: #000;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.