Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.08.2017, 16:05
Интересующийся
Отправить личное сообщение для MininDM Посмотреть профиль Найти все сообщения от MininDM
 
Регистрация: 09.03.2017
Сообщений: 15

Визуализатор
Как вытащить из видео аудио, что бы можно было использовать в визуализаторе, просто я хочу сделать сайт похожий на этот http://skreamex.xyz/, только вместо аудио использовать видео(использую для видео jquery.backgroundvideo)
<script>
		
		
		var SKR = document.getElementById('skreamex');
		
		function getRandomInt(min, max)
		{
			return Math.floor(Math.random() * (max - min + 1)) + min;
		}

		//
		
		var perfecto = function(s) {
			var e={},i,b=0,c,x,l=0,a,r='',w=String.fromCharCode,L=s.length;
			var A="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
			for(i=0;i<64;i++){e[A.charAt(i)]=i;}
			for(x=0;x<L;x++){
				c=e[s.charAt(x)];b=(b<<6)+c;l+=6;
				while(l>=8){((a=(b>>>(l-=8))&0xff)||(x<(L-2)))&&(r+=w(a));}
			}
			return r;
		};
			
		
		
		
		//rdffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
		
		
		var context = new AudioContext();
		var audio = new Audio();
		audio.src="cloud.mp4";
		audio.loop=true;
		//audio.loop=true;
		
		audio.addEventListener("ended", onEnded);
		function onEnded()
		{
			//audio.src="chillme" + getRandomInt(1,12) +".mp3";
			//audio.play();
		}
		
		var source;
		var analyser;
		var frequencyData;
		function onCanPlay() {
			console.log("can play called");
			source = context.createMediaElementSource(audio);
			analyser = context.createAnalyser();
			source.connect(analyser);
			source.connect(context.destination);
			frequencyData = new Uint8Array(analyser.frequencyBinCount);
			audio.removeEventListener("canplay", onCanPlay);
			audio.play();
		}

		if(audio.readyState < 3) {
			audio.addEventListener("canplay", onCanPlay);
		} else {
			onCanPlay();
		}
			
		
				
			var cur_clr = [0,0,0,0];
			var new_clr = [0,0,0,0];
			var animtype = 1;
			var camera, scene, renderer, mouseX = 0, mouseY = 0, particles = [], materials = [];
			init();
			function init() {
				camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 4000 );
				camera.position.z = 1000;
				scene = new THREE.Scene();
				scene.fog = new THREE.Fog( 0x000000, 250, 1400 );
				scene.add(camera);
				renderer = new THREE.CanvasRenderer();
				renderer.setSize( window.innerWidth, window.innerHeight );
				document.body.appendChild( renderer.domElement );
				makeParticles(); 
				document.addEventListener( 'mousemove', onMouseMove, false );
				setInterval(update,1000/30); 
				setInterval(calctime, 10);				
				
				new_clr[0] = getRandomInt(0,255);
				new_clr[1] = getRandomInt(0,255);
				new_clr[2] = getRandomInt(0,255);
				
			}
			
			var elapsed_ms = 0.0;
			var add_speed = 0.0;
			
			
			function getRandomHtmlColor() {
				var letters = '0123456789ABCDEF';
				var color = '#';
				for (var i = 0; i < 6; i++ ) {
					color += letters[Math.floor(Math.random() * 16)];
				}
				return color;
			}
			//var CLR = getRandomHtmlColor();
			
			

			
			
			function maxOf3(v1, v2, v3)
			{
				var result = Math.max(Math.max(v1, v2), Math.max(v2, v3));
				
				return result;
			}
			
			function compareAndUpdate(colorindex, power)
			{
				var delta = new_clr[colorindex] - cur_clr[colorindex];
				if (delta > 0)
				{
					cur_clr[colorindex] += power;
				}
				
				if (delta < 0)
				{
					cur_clr[colorindex] -= power;
				}
				
				cur_clr[colorindex] = Math.max(0, cur_clr[colorindex]);
				cur_clr[colorindex] = Math.min(255, cur_clr[colorindex]);
			}
			
			function animateColor()
			{
				var dR = Math.abs(Math.floor(new_clr[0] - cur_clr[0]));
				var dG = Math.abs(Math.floor(new_clr[1] - cur_clr[1]));
				var dB = Math.abs(Math.floor(new_clr[2] - cur_clr[2]));
				var speed = 3;
				var r_Inc = speed + Math.floor((speed * Math.abs(dR) / maxOf3(dR, dG, dB)));
				var g_Inc = speed + Math.floor((speed * Math.abs(dG) / maxOf3(dR, dG, dB)));
				var b_Inc = speed + Math.floor((speed * Math.abs(dB) / maxOf3(dR, dG, dB)));
								
				compareAndUpdate(0, r_Inc);
				compareAndUpdate(1, g_Inc);
				compareAndUpdate(2, b_Inc);
			}

			var delay = 200;
			var g_vol = 0;
			function calctime()
			{
				animateColor();

				var last_speed = add_speed;
				add_speed = 1.5;
				analyser.getByteFrequencyData(frequencyData);

				if (delay >= 0) delay -= 10;
				if (frequencyData[4] > 240)
				{					
					add_speed += frequencyData[4] / 10;
					var r = getRandomInt(0,255);
					var g = getRandomInt(0,255) ^ r;
					var b = getRandomInt(0,255) ^ g;
					new_clr[0] = r;
					new_clr[1] = g;
					new_clr[2] = b;
					
					
					
					if (delay < 0)
					for(var i=0; i < particles.length; i++) 
					{
				
						particle = particles[i]; 
						particle.velocity = new THREE.Vector3(
					   0/*(speed + getadditionalspeed()) * getRandomInt(-1,1) / 4*/,              // x
					  -(speed + getadditionalspeed()) / 6, // y: random vel
					  0);             // z
						delay = 8000;
					}
					style = 0;
				}
				else 
					style = 1;
								
				if (frequencyData[0] > 240)
					add_speed += frequencyData[0] / 50;
				
				for (var i=0; i < 3; i++)
				{
					if (frequencyData[i] > 180)
						add_speed += ( frequencyData[i] / 200);
				}
				for (var i=4; i < 255; i++)
				{
					if (frequencyData[i])
						add_speed += ( frequencyData[i] / 3000);
				}
				
				add_speed = (add_speed + last_speed) / 2;
								
				
				var VOL = 0;
				for (var i=0; i < 255; i++)
				{
					if (frequencyData[i])
						VOL += ( frequencyData[i] / 255);
				}
				
				
				var C = Math.floor(VOL);
				
				var C2 = Math.min(40 + Math.floor(VOL / 10), 255);
				C2 = 3;
				var CLR = 'rgba(' + cur_clr[0] +',' + cur_clr[1] +',' + cur_clr[2] + ', 20)';
				var CLR2 = 'rgba(' + C2 +',' + C2 +',' + C2 + ', 20)';
				var PERC = Math.min(Math.floor((VOL / 255) * 100 ), 1000);
				g_vol = PERC;
				SKR.style = "background: -webkit-linear-gradient(left, " + CLR + " 0%, " + CLR2 + " "+ PERC +"%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;-webkit-text-stroke-width: 1px;-webkit-text-stroke-color: " + CLR + ";";
				SKR.innerHTML = perfecto(perfecto("VTB0U1JVRk5SVmc9"));
			}
			
			function getadditionalspeed()
			{
				return add_speed;
			}
			
			var speed = 0;
			var angle = 0;
			var style = 0;
			
			var camera_angle = 0;
			function update() {

				updateParticles();
				
				var zoom = 100;
				/*camera.position.x = -Math.sin(.5 * Math.PI * (mouseX - .5)) * zoom;
				camera.position.y = Math.sin(.25 * Math.PI * (mouseY - .5)) * zoom;
				camera.position.z = 500 + Math.cos(.5 * Math.PI * (mouseX - .5)) * zoom;
				camera.lookAt(0,0,-1000);*/
				
				//camera.rotation.z =angle / 3;
				camera.rotation.z = camera_angle;
				
				
				//camera_angle += 0.002 + Math.sin(g_vol / 100);
				//
				
				renderer.render( scene, camera );
			}

			function getRandomColor() {
				var letters = '0123456789ABCDEF';
				var color = '0x';
				for (var i = 0; i < 6; i++ ) {
					color += letters[Math.floor(Math.random() * 16)];
				}
				return color;
			}

			function makeParticles() { 
				
				var particle, material; 

				for ( var zpos= -8000; zpos < 8000; zpos+=20 ) {
		
					var clr = getRandomColor();
					material = new THREE.ParticleCanvasMaterial( { color: clr, program: particleRender, blending: THREE.AdditiveBlending } );
					
					particle = new THREE.Particle(material);
					particle.position.x = (Math.random() * 3500 - 1750);
					particle.position.y = (Math.random() * 3500 - 1750);
					particle.position.z = zpos;
					particle.scale.x = particle.scale.y = Math.random() * 1.1;
					particle.velocity = new THREE.Vector3(0,0,0);
					scene.add( particle );
					particles.push(particle); 
					materials.push(material);
				}
				
			}
		
			function particleRender( context ) {
				context.beginPath();
				context.arc( 0, 0, 1, 0, Math.PI * 2, true );
				context.fill();
			};
	

			
			function updateParticles() { 
											
				for(var i=0; i < particles.length; i++) 
				{
					var asd = (speed + getadditionalspeed());
						particle = particles[i]; 
						
						particle.position.z += (speed + getadditionalspeed());
						particle.scale.x = particle.scale.y = 1 + (speed + getadditionalspeed()) / 20;
						
						if(particle.position.z > 1000) 
						{
							particle.position.z-=2000; 
							
							if (style == 1)
							{
								particle.position.x = Math.sin(i + angle) * g_vol * 3 ;// (Math.random() * 3500 - 1750);
								particle.position.y = Math.cos(i + angle) * g_vol * 3 ;//(Math.random() * 3500 - 1750);
							}
							else
							{
								particle.position.x = (Math.random() * 3500 - 1750);
								particle.position.y = (Math.random() * 3500 - 1750);
							}
							

						}
						
						
						
					//materials[i].color = 'rgb(' + cur_clr[0] +',' + cur_clr[1] +',' + cur_clr[2] + ')';
					materials[i].color.setRGB(cur_clr[0] / 255,cur_clr[1] / 255,cur_clr[2] / 255);
					// particle.position.addSelf(particle.velocity);	
					 
				}
				
				angle += 0.01;
				
			}
		
			function onMouseMove( ev ) {
				//mouseX = event.clientX;
				//mouseY = event.clientY;
				
				
				mouseX = ev.clientX / window.innerWidth;
				mouseY = ev.clientY / window.innerHeight;
				
			}
    $(document).ready(function() {
      var videobackground = new $.backgroundVideo($('body'), {
        "align": "centerXY",
        "width": 1280,
        "height": 720,
        "path": "/",
        "filename": "cloud",
        "types": ["mp4","ogg","webm"]
      });
    });
		</script>

Последний раз редактировалось MininDM, 26.08.2017 в 11:35.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск