Music Makes You Travel - OpenProcessing

sketch138877
xxxxxxxxxx
 
// check if the default naming is enabled, if not use the chrome one.
if (! window.AudioContext) {
    if (! window.webkitAudioContext) {
        alert('no audiocontext found');
    }
    window.AudioContext = window.webkitAudioContext; 
}
​
var audioContext, analyserNode, javascriptNode, sourceNode;
var frequencies = new Array();
var tracks = new Array();
var img = new Image();
var ctx;
var started = false;
​
​
int bufferSize = 512;
String musicUrl, artistName, musicName, info;
int Y = -100;
float sensib =1.5;
float echelle;
int step = 2;
​
void setup(){
    size(1200, 900, P2D);
    ctx = externals.context;
    console.log(ctx);
​
    background(0);
​
    //ctx.fillStyle = "rgba(144, 229, 209, .8)"; or "rgba(164, 249, 229, .8)"
    ctx.fillStyle = "rgba(75, 147, 210, .8)";
    //ctx.strokeStyle = "rgba(46, 171, 125, 0.05)";
    ctx.strokeStyle = "rgba(253, 245, 237, 0.07)";
    c = color('hsba(160, 100%, 30%, 0.5)');
fill(c);
    echelle = width/bufferSize;
    
​
    cursor(HAND);
}
​
void draw(){
    if(!started) {
      background(0);
      fill(255);
      ellipse(width/2, height/2, 150, 150);
      fill(0);
      triangle(
        width/2 - 40, height/2 - 60,
        width/2 - 40, height/2 + 60,
        width/2 + 60, height/2
      )
    }
    else if(frameCount%3==0){
        if(frameCount>6) ctx.drawImage(img, 0, -2);
​
        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 = document.getElementById("pjsCanvas").toDataURL("image/png");
        
        if (Y<height-300) {
            Y+=2;
        }
    }
}
​
void mousePressed() {
  if(!started) {
    setupAudioNodes();
    //loadSound("https://openprocessing.org/sketch/1583090/files/01%20What%20A%20Wonderful%20World.mp3");
    loadSound("https://openprocessing.org/sketch/1583090/files/01%20What%20A%20Wonderful%20World.mp3");
    background(0);
    started = true;
  }
}
​
void setupAudioNodes() {
    audioContext = new AudioContext();
​
    // setup a javascript node
    javascriptNode = audioContext.createScriptProcessor(2048, 1, 1);
    // connect to destination, else it isn't called
    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 = bufferSize * 2;
    
    // create a buffer source node
    sourceNode = audioContext.createBufferSource();
    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);
}