Back to site
Since 2004, our University project has become the Internet's most widespread web hosting directory. Here we like to talk a lot about web servers, web development, networking and security services. It is, after all, our expertise. To make things better we've launched this science section with the free access to educational resources and important scientific material translated to different languages.

Vizualizovanje <audio> elemenata sa Web Audio API

Za novi projekat na kojem radim hteo bih da kreiram audio-reaktivnu vizualizaciju koristeći analizu muzike koja svira. Novi web audio API omogućava vam da uradite ovo veoma jednostavno u pretraživaču (u ovom trenutku samo WebKit).

Objavljujem ovde svoj dokumentovani kod s objašnjenjem za svakoga ko želi lak savet za kretanje putem vizualizacije. Možete ovde da vidite demonstraciju a ovde da preuzmete izvorni kod .

Glavni koncept Web Audio API jeste da spojite gomilu modula. Izlaz iz jednog modula ide u ulaz drugog modula. Da biste ovo izveli sa <audio> elementom, morate da kreirate Web Audio izvor s njim, da privežete to na analizator, a onda da privežete analizator na svoje zvučnike (da biste ponovo mogli da čujete <audio>).

Kod za sve to izgleda otprilike ovako:

var audio = document.getElementById('music');
var audioContext = new webkitAudioContext();
analyser = audioContext.createAnalyser();
var source = audioContext.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioContext.destination);

Kada ste to uradili, analizator sada osluškuje bilo kakav izlaz iz <audio> i imaće za vas spremne podatke kad god da ih zatražite.

Kada ste podesili <audio> da svira, možete u svako doba da izvršite upit u analizator i da proverite koji su trenutni podaci frekvencije zvuka. Ako stavimo tu analizu u jednostavan crtež krivulje, onda možemo da napravimo grafikon kako zvuk u stvari izgleda:

function draw() {
	// Setup the next frame of the drawing
	webkitRequestAnimationFrame(draw);
	
	// Create a new array that we can copy the frequency data into
	var freqByteData = new Uint8Array(analyser.frequencyBinCount);
	// Copy the frequency data into our new array
	analyser.getByteFrequencyData(freqByteData);

	// Clear the drawing display
	canvasContext.clearRect(0, 0, canvas.width, canvas.height);

	// For each "bucket" in the frequency data, draw a line corresponding to its magnitude
	for (var i = 0; i < freqByteData.length; i++) {
		canvasContext.fillRect(i, canvas.height - freqByteData[i], 1, canvas.height);
	}
}

Možete da vidite demonstraciju ovoga u odeljku s mojim eksperimentima . Upravo sam uradio veoma jednostavni render podataka frekvencije, ali vaša mašta je granica. Preuzmite izvorni kod i vidite šta možete da uradite s njim!

Budite u pripravnosti za lepotu koju sam zapravo planirao za ovaj kod.





Published (Last edited): 16-04-2013 , source: http://www.themaninblue.com/writing/perspective/2012/09/18/