JQuery Sound Visualizer

Developer
WebSonick
Size
3,802 Kb
Views
48,576
  1. JQuery Sound Visualizer Previews
  2. JQuery Sound Visualizer HTML Codes
  3. JQuery Sound Visualizer CSS Codes
  4. JQuery Sound Visualizer JS Codes

How do I make an jquery sound visualizer?

Yiruma - Love Poem. What is a jquery sound visualizer? How do you make a jquery sound visualizer? This script and codes were developed by WebSonick on 15 October 2022, Saturday.

JQuery Sound Visualizer Previews
IQ Test

JQuery Sound Visualizer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery Sound Visualizer</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas></canvas>
<input type="range" min='0' max = '1' step = '0.1' value = '0.5' class='volume'/>
<div class="chooseYourDestiny" droppable> <h1>Yiruma - Love Poem</h1><br> <button class="vivaldi">Play</button> <span class="text">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;or load your music</span> <button class="cover">Browse</button> <input type="file" class="files" accept="audio/*"/>
</div>
<button class="close">STOP</button>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="js/index.js"></script>
</body>
</html>

JQuery Sound Visualizer - Script Codes CSS Codes

*{margin:0;padding:0;}
body{overflow:hidden}
canvas{background:#20221f; width:1600px; height:600px;}
input[type='range']{ position: absolute; top:10px; left:10px; background:none; -webkit-appearance: none; background-color: rgba(65,98,169,0.2); border-radius:10px;
}
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; background-color: #0072c5; width: 15px; height: 15px; border-radius:100%;
}
input[type='range']::-webkit-slider-thumb:hover{ background-color:#ee3b37; cursor:pointer;
}
button{ -webkit-appearance: none; border:none; background:rgba(69,151,209,0.2); padding:5px 20px; font-size:24px; color:#f5fcd0;
}
input[type='file']{ height:20px; width:115px;
}
.chooseYourDestiny{ width:405px; height:40px; position: absolute; top:40%; left:40%; color:#f5fcd0;
}
.text{margin:10px 0;}
.cover, input.files{ right:0; position: absolute;
}
input.files{ top:10px; cursor:pointer; opacity:0;
}
.close{ top:20px;; position: absolute; right:20px; display:none ;
}
.close:hover{ background:#000; color:#f1f1f1; cursor:pointer;
}
h1 { width:300px; text-align:center; margin:0 58px; border:solid 0px; background-color:rgba(69,151,209,0.2); -webkit-border-radius:50px 50px 50px 50px;
}

JQuery Sound Visualizer - Script Codes JS Codes

/** * Web Audio Api experiment #2 * @author Antonis Kamamis (@pixel_grid) */ var w = window.innerWidth, h = window.innerHeight, canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d') particles = [], particlesNum = 256 lineWidth = 0.5, spacing = w/particlesNum+5, colors = ['#408ebf','#6ddaf1','#c0d988','#047878','#ffb633','#f57337'];
//Init
(function (){ for(var i = 0; i < particlesNum; i++){ particles.push({ x:i*spacing, y:h/2, c:colors[Math.round(Math.random()*5)], freq:0 }); } canvas.width = w; canvas.height = h; ctx.lineWidth = 0.5;
})();
function loop(){ ctx.clearRect(0,0,w,h); ctx.strokeStyle = '#f1f1f1'; ctx.moveTo(0,h/2); ctx.lineTo(w,h/2); ctx.stroke(); for(var i = 0; i < particlesNum; i++){ //top half ctx.globalAlpha = 1; ctx.globalCompositeOperation = 'destination-over'; var temp = particles[i]; var rad = (temp.freq/20) * 4; ctx.fillStyle = ctx.strokeStyle = temp.c; ctx.beginPath(); ctx.arc(temp.x,temp.y,rad,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.arc(temp.x,temp.y,rad*1.5,0,Math.PI*2,true); ctx.closePath(); ctx.stroke(); //bottom half ctx.globalAlpha = 0.2; ctx.globalCompositeOperation = 'lighter'; ctx.beginPath(); ctx.arc(temp.x,h - temp.y,rad,0,Math.PI*2,true); ctx.closePath(); ctx.fill(); ctx.beginPath(); ctx.arc(temp.x,h - temp.y,rad*1.5,0,Math.PI*2,true); ctx.closePath(); ctx.stroke(); /*if(i%2 == 1 && i+1 < particlesNum){ ctx.moveTo(temp.x,temp.y); ctx.lineTo(temp.x,h - temp.y); ctx.stroke(); }*/ }
}
/*--------AUDIO---------*/
var context,source,soundBuffer,analyser,javascriptNode, url = 'http://mp3host.zz.mu/love.mp3',audio,gainNode;
$('.vivaldi').click(function(){ $('.chooseYourDestiny').fadeOut(); $('.close').fadeIn(); $('.volume').val(0.5); audio = new Audio(); audio.src = url; audio.addEventListener('canplay', setUpContext);
});
function setUpContext(){ context = new webkitAudioContext(); // setup a analyzer analyser = context.createAnalyser(); analyser.smoothingTimeConstant = 0.5; analyser.fftSize = 512; // setup a javascript node javascriptNode = context.createJavaScriptNode(2048, 1, 1); gainNode = context.createGainNode(); source = context.createMediaElementSource(audio); source.connect(analyser); source.connect(gainNode); analyser.connect(javascriptNode); javascriptNode.connect(context.destination); gainNode.connect(context.destination); gainNode.gain.value = 0.5; loadJsNodeEvent();
}
function loadJsNodeEvent(){ javascriptNode.onaudioprocess = function() { var array = new Uint8Array(analyser.frequencyBinCount); analyser.getByteFrequencyData(array); updatePosition(array); requestAnimFrame(loop); } document.querySelector('input').addEventListener('change',function(){ gainNode.gain.value = this.value; console.log(this.value); }); audio.addEventListener('ended',function(){ $('.close').fadeOut(); $('.chooseYourDestiny').fadeIn(); }); audio.play();
}
$('.files').change(function(evt){ $('.chooseYourDestiny').fadeOut(); $('.close').fadeIn(); $('.volume').val(0.5); var files = evt.target.files[0]; var reader = new FileReader(); reader.onload = function(){ audio = new Audio(); audio.src = this.result; audio.addEventListener('canplay', setUpContext); } reader.readAsDataURL(files);
});
function updatePosition(array) { var values = 0,average, length = array.length; // get all the frequency amplitudes for (var i = 0; i < length; i++) { particles[i].y = h/2 - array[i]; particles[i].freq = array[i]; }
}
window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };
})();
$('.close').click(function(){ audio.pause(); $('.chooseYourDestiny').fadeIn(); $(this).fadeOut();
});
JQuery Sound Visualizer - Script Codes
JQuery Sound Visualizer - Script Codes
Home Page Home
Developer WebSonick
Username WebSonick
Uploaded October 15, 2022
Rating 3
Size 3,802 Kb
Views 48,576
Do you need developer help for JQuery Sound Visualizer?

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!

WebSonick (WebSonick) Script Codes
Name
Snow
CSS Game - The Right Move
TinyMce Tetx Editor
In second lives - HTML5 CANVAS 3D demo
World Map Navigation
CSS3 Text Effect
Codepen on ge1doot.js
SpongeBob SquarePants CSS3
CSS3 Menus
Logo Hover effect
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!