Kolegij Računalna Grafika
Branimir Štivić

Glazbene vizualizacije su elektronički generirani oblici i slike bazirane na zvučnom zapisu, a omogućavaju slušatelju da „vidi” glazbu koju sluša. Slikovni zapis se u većini slučajeva generira i renderira u realnom vremenu uz sinkronizaciju sa zvučnim zapisom Sastavni dio većine komercijalnih aplikacija za slušanje glazbe. Ulaz su promjene u glasnoći i frekvenciji, a izlaz su različite vizualne kompozicije koje reagiraju na ulazne paramtere. Za svaki zvučni zapis vizualizacija je jedinstvena.

Povijest

Atari Video Music, 1976. godina

Korištena tehnologija

WebGL - „...cross-platform, royalty-free API used to create 3D graphics in a Web browser, based on OpenGL ES 2.0, runs in the HTML5 Canvas element...”

THREE.js – „...a lightweight cross-browser JavaScript library/API used to create and display animated 3D computer graphics on a Web browser.”

Web Audio API – „...specification describes a high-level JavaScript API for processing and synthesizing audio in web applications. The primary paradigm is of an audio routing graph”

Web Audio API

Modular routing

- omogućuje proizvoljne konekcije između različitih AudioNode objekata.
- svaki čvor može imati ulaze i izlaze
- ishodišni nema ulaze, odredišni nema izlazne
- sve se automatski odvija na nižoj razini bez potrebne interakcije: „the right thing just happens”


//PRIMJER 1

var context = new AudioContext();

function playSound() {
var source = context.createBufferSource();
source.buffer = dogBarkingBuffer;
source.connect(context.destination);
source.start(0);
}

Primjer Spectar

/*
*
* ||||||||||||||||||||||||||||||||
*-******** WEBGL CONTEXT*********
*||||||||||||||||||||||||||||||||
*
*/
function initWebglContext() {
$(window).resize(onWindowResize);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// Lights
camera.position.z = 500;

scene.add(new THREE.AmbientLight(0x111111));
renderer = new THREE.WebGLRenderer({antialias: true});

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x030000, 1);
renderer.sortObjects = false;
document.body.appendChild(renderer.domElement);


stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);

}

Inicijalizacija Web Audio API Contexta

/*
*
* ||||||||||||||||||||||||||||||||
* ******** WEB AUDIO API*********
* ||||||||||||||||||||||||||||||||
*
*/

/*
* Audio Context
* @type AudioContext
*/
function loadAudioFile() {

var audioElement = document.getElementById("player");
audioElement.play();
$("#player").bind('canplay', function () {
//uzimamo player
source = audioCcontext.createMediaElementSource(this);
//prespajamo analyser na izvor zvuka
source.connect(analyser);
//prespajamo iz analysera prema odredištu zvuka/zvučnoj kartici
analyser.connect(audioCcontext.destination);
analyser.fftSize = 64;
frequencyData = new Uint8Array(analyser.frequencyBinCount);

updateAnalyser();
render();
});

}

Dohvaćanje podataka analize

function updateAnalyser() {
requestAnimationFrame(updateAnalyser);
analyser.getByteFrequencyData(frequencyData);

}

Cijeli projekt moguće je preuzeti ovdje:

bstivic_projekt.zip

Primjeri u WebGL-u:

Spectar
Sphere
Particles

Prezentaciju moguće je preuzeti ovdje:

prezentacija

Korisničku dokumentaciju moguće je preuzeti ovdje:

dokumentacija