Visualizer tests

Developer
Sladix
Size
3,361 Kb
Views
8,096
  1. Visualizer tests Previews
  2. Visualizer tests HTML Codes
  3. Visualizer tests CSS Codes
  4. Visualizer tests JS Codes

How do I make an visualizer tests?

What is a visualizer tests? How do you make a visualizer tests? This script and codes were developed by Sladix on 09 December 2022, Friday.

Visualizer tests Previews
IQ Test

Visualizer tests - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Visualizer tests</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas"></canvas>
<audio src="" controls id="player"></audio>
<p id="val"></p> <script src='http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Visualizer tests - Script Codes CSS Codes

body{ margin:0;
}
audio
{ display:block; margin: 0 auto;
}

Visualizer tests - Script Codes JS Codes

var Config = function(ctx){ this.numblocks = 50; this.message = "Drop a sound here"; this.drawingsMethod = ["draw1","draw2"]; this.selectedMethod = 0; this.context = ctx; this.beatIndex = 6; this.kickCap = 244; this.backgroundColor = "#FFF"; this.init = function(){ window.addEventListener('dragover', stopEvent, false); window.addEventListener('dragenter', stopEvent, false); window.addEventListener('drop', onDrop, false); } this.draw = function(){ this.context.fillStyle = conf.backgroundColor; this.context.fillRect(0,0,canvasElement.width,canvasElement.height); if(audioSource.player.played.length < 1) { this.context.font = "30px Arial"; this.context.fillStyle = "#AAA"; this.context.fillText(conf.message,(canvasElement.width/2-(conf.message.length*8)),(canvasElement.height/2)-15); } window[this.drawingsMethod[this.selectedMethod]](); }
}
var AudioSource = function(audioElement) { var player = document.getElementById(audioElement); var self = this; var analyser; var audioCtx = new (window.AudioContext || window.webkitAudioContext); // this is because it's not been standardised accross browsers yet. analyser = audioCtx.createAnalyser(); analyser.fftSize = 2048; // see - there is that 'fft' thing. var source = audioCtx.createMediaElementSource(player); // this is where we hook up the <audio> element source.connect(analyser); analyser.connect(audioCtx.destination); var sampleAudioStream = function() { analyser.getByteFrequencyData(self.streamData); var total = 0; for (var i = 0; i < 1024; i++) { // get the volume from the first 80 bins, else it gets too loud with treble total += self.streamData[i]; } self.volume = total; }; setInterval(sampleAudioStream, 20); // // public properties and methods this.volume = 0; this.streamData = new Uint8Array(1024); // This just means we will have 128 "bins" (always half the analyzer.fftsize value), each containing a number between 0 and 255. this.player = player; this.playStream = function(streamUrl) { // get the input stream from the audio element player.setAttribute('src', streamUrl); player.play(); }
};
var draw1 = function() { // you can then access all the frequency and volume data // and use it to draw whatever you like on your canvas var bin_size = Math.floor(audioSource.streamData.length / conf.numblocks); for (var i = 0; i < conf.numblocks; i += 1) { sum = 0; for (var j = 0; j < bin_size; j += 1) { sum += audioSource.streamData[(i * bin_size) + j]; } average = sum / bin_size; bar_width = canvasElement.width / conf.numblocks; scaled_average = (average / 256) * canvasElement.height; context.fillStyle = "rgb("+Math.floor(Math.sin(i)*127+128)+","+Math.floor(Math.cos(i)*127+128)+",50)"; context.fillRect(i * bar_width, canvasElement.height, bar_width-2, - scaled_average); }
};
var draw2 = function(){ var bin_size = Math.floor(audioSource.streamData.length / conf.numblocks); for (var i = 0; i < conf.numblocks; i += 1) { sum = 0; for (var j = 0; j < bin_size; j += 1) { sum += audioSource.streamData[(i * bin_size) + j]; } average = sum / bin_size; bar_width = canvasElement.width / conf.numblocks; var res = (i*bin_size); var r,g,b; r = (i <= conf.numblocks/3)?res+20:0; g = (i >= conf.numblocks/3)?res+20:0; b = (i >= (conf.numblocks/3)*2)?(res+20):0; scaled_average = (average / 256) * canvasElement.height; context.fillStyle = "rgb("+r+","+g+","+b+")"; context.fillRect(i * bar_width, canvasElement.height, bar_width-2, - scaled_average); } //Test kick background var c = (audioSource.streamData[conf.beatIndex] > conf.kickCap)?audioSource.streamData[conf.beatIndex]:0; document.getElementById("val").innerHTML = (c); conf.backgroundColor = "rgb("+(255-(Math.round(c)))+","+(255-Math.round(c))+","+(255-(Math.round(c)))+")";
}
function onDrop(event) { stopEvent(event); // Read data as URL audioSource.playStream(URL.createObjectURL(event.dataTransfer.files[0]));
}
function stopEvent (event) { event.preventDefault(); event.stopPropagation();
}
function animate()
{ conf.draw(); requestAnimationFrame(animate);
}
var audioSource = new AudioSource('player');
var canvasElement = document.getElementById('canvas');
canvasElement.width = window.innerWidth;
canvasElement.height = 300;
var context = canvasElement.getContext("2d");
var conf = new Config(context);
conf.init();
var tailleBlocks = Math.floor(canvasElement.height / conf.numblocks);
var stream = document.createElement('source');
var gui = new dat.GUI();
gui.addColor(conf,'backgroundColor').name('Background Color');
gui.add(conf,'numblocks',3,100).name('Things number');
gui.add(conf,'selectedMethod',{'Cos Sin':0,'Evolution':1}).name('Drawing Method');
gui.add(conf,'beatIndex',0,audioSource.streamData.length-1);
gui.add(conf,'kickCap',10,255);
animate();
Visualizer tests - Script Codes
Visualizer tests - Script Codes
Home Page Home
Developer Sladix
Username Sladix
Uploaded December 09, 2022
Rating 3
Size 3,361 Kb
Views 8,096
Do you need developer help for Visualizer tests?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sladix (Sladix) Script Codes
Name
Responsive Stack slider
Canvas snake animation random bezier curve looped
A Pen by Sladix
Agent Chaos
CSS Letter animations
Fibonacci color test
Text reveal test
HMD
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!