Как вытащить из видео аудио, что бы можно было использовать в визуализаторе, просто я хочу сделать сайт похожий на этот
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>
