Vusic

Developer
Julien Dargelos
Size
4,178 Kb
Views
8,096
  1. Vusic Previews
  2. Vusic HTML Codes
  3. Vusic CSS Codes
  4. Vusic JS Codes

How do I make an vusic?

What is a vusic? How do you make a vusic? This script and codes were developed by Julien Dargelos on 29 November 2022, Tuesday.

Vusic Previews
IQ Test

Vusic - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vusic</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="header" class="demo">	<div id="title">	<h1>Vusic</h1>	<h2>Music Visualizer</h2>	</div>	<div id="fileWrapper">	<label for="uploadedFile">Sélectionnez une musique</label>	<span id="filename"></span>	<input type="file" id="uploadedFile"></input>	</div>	</div>	<canvas id='canvas'></canvas>	<script type="text/javascript" src="visualizer.js"></script>	<script type="text/javascript" src="uh.js"></script> <script src="js/index.js"></script>
</body>
</html>

Vusic - Script Codes CSS Codes

body {	background:#000;	margin:0;	overflow:hidden;
}
#header {	width:200px;	height:100px;	position:absolute;	-webkit-perspective:1000px;	-moz-perspective:1000px;	-ms-perspective:1000px;	-o-perspective:1000px;	perspective:1000px;
}
#title {	width:200px;	top:10px;	left:10px;	position:absolute;	-webkit-transition:0.3s;	-moz-transition:0.3s;	-ms-transition:0.3s;	-o-transition:0.3s;	transition:0.3s;
}
#title h1 {	margin:0;	padding:0;	font-family:Georgia,Times;	font-size:50px;	font-weight:normal;	font-style:italic;	color:#fff;	text-align:center;
}
#title h2 {	margin:0;	padding:0;	font-family:Helvetica,Arial;	font-size:10px;	font-weight:normal;	color:#fff;	text-align:center;	text-transform:uppercase;	letter-spacing:2px;
}
#header:hover #title, #header.hover #title {	-webkit-transform-origin:50% 100%;	-moz-transform-origin:50% 100%;	-ms-transform-origin:50% 100%;	-o-transform-origin:50% 100%;	transform-origin:50% 100%;	-webkit-transform:rotateX(90deg) translateY(-250%);	-moz-transform:rotateX(90deg) translateY(-250%);	-ms-transform:rotateX(90deg) translateY(-250%);	-o-transform:rotateX(90deg) translateY(-250%);	transform:rotateX(90deg) translateY(-250%);	opacity:0;
}
#fileWrapper {	background:#fff;	top:10px;	left:10px;	width:200px;	border-radius:4px;	opacity:0;	position:absolute;	font-family:Helvetica,Arial;	font-size:14px;	color:rgb(130,130,130);	-webkit-transform-origin:50% 80px;	-moz-transform-origin:50% 80px;	-ms-transform-origin:50% 80px;	-o-transform-origin:50% 80px;	transform-origin:50% 80px;	-webkit-transform:rotateX(-90deg);	-moz-transform:rotateX(-90deg);	-ms-transform:rotateX(-90deg);	-o-transform:rotateX(-90deg);	transform:rotateX(-90deg);	-webkit-transition:0.3s;	-moz-transition:0.3s;	-ms-transition:0.3s;	-o-transition:0.3s;	transition:0.3s;
}
#header:hover #fileWrapper:active, #header.hover #fileWrapper:active {	opacity:0.5;	-webkit-transition:0;	-moz-transition:0;	-ms-transition:0;	-o-transition:0;	transition:0;
}
#fileWrapper label {	padding:10px;	cursor:pointer;	display:block;	text-align:center;
}
#fileWrapper span {	border-top:1px solid rgb(180,180,180);	padding:10px;	display:block;	text-align:center;	display:none;
}
#fileWrapper span.file {display:block;}
#fileWrapper #uploadedFile {display:none;}
#header:hover #fileWrapper, #header.hover #fileWrapper {	-webkit-transform-origin:50% 80px;	-moz-transform-origin:50% 80px;	-ms-transform-origin:50% 80px;	-o-transform-origin:50% 80px;	transform-origin:50% 80px;	-webkit-transform:rotateX(0);	-moz-transform:rotateX(0);	-ms-transform:rotateX(0);	-o-transform:rotateX(0);	transform:rotateX(0);	opacity:1;
}

Vusic - Script Codes JS Codes

function canvasSizeAdjust() {	document.getElementById('canvas').width=window.innerWidth;	document.getElementById('canvas').height=window.innerHeight;	console.log(document.getElementById('canvas').width);
}
canvasSizeAdjust();
window.onresize=canvasSizeAdjust;
var Visualizer=function() {	this.file=null;	this.fileName=null;	this.audioContext=null;	this.source=null;	this.animationId=null;	this.status=0;	this.forceStop=false;
}
Visualizer.prototype={	ini:function() {	this.prepareAPI();	this.addEventListner();	},	prepareAPI:function() {	window.AudioContext=window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;	window.requestAnimationFrame=window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;	window.cancelAnimationFrame=window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.msCancelAnimationFrame;	try{this.audioContext=new AudioContext();}	catch(e){console.log(e);}	},	addEventListner:function() {	var that=this;	var audioInput=document.getElementById('uploadedFile');	var dropContainer=document.getElementsByTagName("canvas")[0];	audioInput.onchange=function() {	if(audioInput.files.length!==0) {	that.file=audioInput.files[0];	that.fileName=that.file.name;	document.getElementById('filename').innerHTML=that.fileName;	document.getElementById('filename').className='file';	if(that.status===1) that.forceStop=true;	that.start();	}	}	},	start:function() {	var that=this,	file=this.file,	fr=new FileReader();	fr.onload=function(e) {	var fileResult=e.target.result;	var audioContext=that.audioContext;	if(audioContext===null) return;	audioContext.decodeAudioData(fileResult,function(buffer){that.visualize(audioContext,buffer);},function(e){console.log(e);});	}	fr.onerror=function(e){console.log(e);};	fr.readAsArrayBuffer(file);	},	visualize:function(audioContext,buffer) {	var audioBufferSouceNode=audioContext.createBufferSource();	var analyser=audioContext.createAnalyser();	var that=this;	audioBufferSouceNode.connect(analyser);	analyser.connect(audioContext.destination);	audioBufferSouceNode.buffer=buffer;	if(!audioBufferSouceNode.start) {	audioBufferSouceNode.start=audioBufferSouceNode.noteOn;	audioBufferSouceNode.stop=audioBufferSouceNode.noteOff;	}	if(this.animationId!==null) cancelAnimationFrame(this.animationId);	if(this.source!==null) this.source.stop(0);	audioBufferSouceNode.start(0);	this.status=1;	this.source=audioBufferSouceNode;	audioBufferSouceNode.onended=function(){that.audioEnd(that);};	this.drawSpectrum(analyser);	},	drawComputer:{	data:[],	qMin:0.05,	qMax:1,	q:100,	mColor:64,	background:'#000',	get nf() {return window.innerWidth/20},	get d() {return 100/this.nf;},	m:function(array) {	var m=0;	for(var i=0; i<array.length; i++) m+=array[i]*(i>0.95*array.length ? 3 : 1);	return m/array.length;	},	pushData(array) {	this.data.push(this.m(array));	this.data.slice(0,this.data.length-1-this.nf*2);	},	gfContrast:function() {	var n=2*this.m(this.data);	return new Function("y","return y*("+((4*(1-this.qMin))/Math.pow(n,2))+"*Math.pow(y,2)-"+((4*(1-this.qMin))/n)+"*y+"+this.qMax+")");	}	},	drawSpectrum:function(analyser) {	var that=this;	var canvas=document.getElementById('canvas');	var context=canvas.getContext('2d');	context.fillStyle=that.drawComputer.background;	var drawMeter=function() {	var array=new Uint8Array(analyser.frequencyBinCount);	analyser.getByteFrequencyData(array);	if(that.status===0) cancelAnimationFrame(that.animationId);	that.drawComputer.pushData(array);	var data=that.drawComputer.data;	var currentData=data.length-1;	var fContrast=that.drawComputer.gfContrast();	var q=that.drawComputer.q;	var nf=that.drawComputer.nf;	var d=that.drawComputer.d;	var mColor=that.drawComputer.mColor;	var color={	r:Math.round(data[currentData]/(2*q)*255+mColor),	g:Math.round(data[currentData>100 ? currentData-100 : 0]/(2*q)*255+mColor),	b:Math.round(data[currentData>200 ? currentData-200 : 0]/(2*q)*255+mColor)	};	color={r:color.r>255 ? 255 : color.r,g:color.g>255 ? 255 : color.g,b:color.b>255 ? 255 : color.b};	context.strokeStyle='rgb('+color.r+','+color.g+','+color.b+')';	context.fillRect(0,0,canvas.width,canvas.height);	context.lineWidth=fContrast(5*data[currentData]/q);	context.beginPath();	for(var i=0; i<nf && i<data.length-1; i++) {	var x1=canvas.width/2-i*2*(canvas.width/nf);	var y1=((canvas.height-fContrast(data[data.length-1-i])/2*canvas.height+canvas.height/2))/((i*i*i+nf)*d)+canvas.height/2;	var x2=canvas.width/2-(i*2+1)*(canvas.width/nf);	var y2=((fContrast(data[data.length-1-i])/2*canvas.height+canvas.height/2))/((i*i*i+1+nf)*d)+canvas.height/2;	if(i==0) context.moveTo(x1,y1);	else {	var ly=((fContrast(data[data.length-i])/2*canvas.height+canvas.height/2))/(((i-1)*(i-1)*(i-1)+1+nf)*d)+canvas.height/2;	context.bezierCurveTo(x1+canvas.width/(nf*2),ly,x1+canvas.width/(nf*2),y1,x1,y1);	}	context.bezierCurveTo(x1-canvas.width/(nf*2),y1,x1-canvas.width/(nf*2),y2,x2,y2);	}	context.stroke();	context.closePath();	context.beginPath();	for(var i=0; i<nf && i<data.length-1; i++) {	var x1=canvas.width/2+i*2*(canvas.width/nf);	var y1=((canvas.height-fContrast(data[data.length-1-i])/2*canvas.height+canvas.height/2))/((i*i*i+nf)*d)+canvas.height/2;	var x2=canvas.width/2+(i*2+1)*(canvas.width/nf);	var y2=((fContrast(data[data.length-1-i])/2*canvas.height+canvas.height/2))/((i*i*i+1+nf)*d)+canvas.height/2;	if(i==0) context.moveTo(x1,y1);	else {	var ly=((fContrast(data[data.length-i])/2*canvas.height+canvas.height/2))/(((i-1)*(i-1)*(i-1)+1+nf)*d)+canvas.height/2;	context.bezierCurveTo(x1-canvas.width/(nf*2),ly,x1-canvas.width/(nf*2),y1,x1,y1);	}	context.bezierCurveTo(x1+canvas.width/(nf*2),y1,x1+canvas.width/(nf*2),y2,x2,y2);	}	context.stroke();	context.closePath();	that.animationId=requestAnimationFrame(drawMeter);	}	this.animationId=requestAnimationFrame(drawMeter);	},	audioEnd:function(instance) {	if(this.forceStop) {	this.forceStop=false;	this.status=1;	return;	}	this.status=0;	document.getElementById('uploadedFile').value='';	document.getElementById('filename').className='';	},
}
window.onload=function() {	new Visualizer().ini();
}
var s=setTimeout(function() {	document.getElementById('header').className='hover';	document.getElementById('header').onmouseout=function() {	document.getElementById('header').className='';	document.getElementById('header').onmouseout=function(){};	}
},2000);
document.getElementById('header').onmouseover=function() {clearTimeout(s);};
Vusic - Script Codes
Vusic - Script Codes
Home Page Home
Developer Julien Dargelos
Username juliendargelos
Uploaded November 29, 2022
Rating 3
Size 4,178 Kb
Views 8,096
Do you need developer help for Vusic?

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!

Julien Dargelos (juliendargelos) Script Codes
Name
A Pen by Julien Dargelos
Grapher
Calculator
SmartPass
InfoGrid
Scroll snap points carousel
Tags Input
Skateboard tricks
Js-ScrollBar
Pure CSS Torch Light
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!