Audio Visualiser

Developer
Thepheer
Size
6,237 Kb
Views
40,480
  1. Audio Visualiser Previews
  2. Audio Visualiser HTML Codes
  3. Audio Visualiser CSS Codes
  4. Audio Visualiser JS Codes

How do I make an audio visualiser?

Messing around with AudioContext. You can also drop your own music.. What is a audio visualiser? How do you make a audio visualiser? This script and codes were developed by Thepheer on 13 September 2022, Tuesday.

Audio Visualiser Previews
IQ Test

Audio Visualiser - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Audio Visualiser</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='js/gmkfa.js'></script> <script src="js/index.js"></script>
</body>
</html>

Audio Visualiser - Script Codes CSS Codes

html { background: #000; overflow: hidden;
}
audio { position: absolute; bottom: 1em; left: 50%; width: 500px; margin: 0 -250px;
}
canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

Audio Visualiser - Script Codes JS Codes

(function () { 'use strict'; window.addEventListener('load', function () { var Analyser = this.Analyser = function (context, fft, smoothing) { var AudioContext = window.AudioContext || window.webkitAudioContext; this.context = context || new AudioContext(); this.analyser = this.context.createAnalyser(); this.analyser.fftSize = fft || 2048; this.analyser.smoothingTimeConstant = smoothing || 0; this.analyser.connect(this.context.destination); this.wave = new Uint8Array(this.analyser.frequencyBinCount * 2); this.freq = new Uint8Array(this.analyser.frequencyBinCount); } Analyser.prototype.audio = function (audio) { if(this.source) this.source.disconnect(); this._audio = audio || new Audio(); this.source = this.context.createMediaElementSource(this._audio); this.source.connect(this.analyser); return this; }; Analyser.prototype.stream = function (stream) { if(this.source) this.source.disconnect(); this._stream = stream; this.source = this.context.createMediaStreamSource(this._stream); this.source.connect(this.analyser); return this; }; Analyser.prototype.update = function () { this.analyser.getByteFrequencyData(this.freq); this.analyser.getByteTimeDomainData(this.wave); return this; }; Analyser.prototype.amplitude = function (hz) { var l = hz/this.context.sampleRate * this.freq.length | 0; for(var sum = 0, i = 0; i < l;) sum += this.freq[i++]; return sum / l / 255; }; var C = util.tag('canvas', null, document.body); var $ = C.getContext('2d'), W, H; (window.onresize = function () { W = C.width = C.clientWidth; H = C.height = C.clientHeight; })(); var audio = util.tag('audio', { crossOrigin: true, controls: true, autoplay: true, loop: true, src: location.hash ? location.hash.slice(1) : 'https://dl.dropboxusercontent.com/u/3116587/audio/01%20-%20Introduction.ogg' }, document.body); var analyser = new Analyser(null, 2048, 0.5).audio(audio); var colors = [[ [0/1, [0.2, 0.5, 1.0]], [1/1, [1.0, 0.2, 1.0]] ], [ [0/4, [0.0, 0.0, 0.0]], [1/4, [0.0, 0.0, 1.0]], [2/4, [1.0, 0.0, 0.0]], [3/4, [1.0, 1.0, 0.0]], [4/4, [1.0, 1.0, 1.0]] ]]; util.loop(function (f, t, dt) { analyser.update(); var amp = analyser._audio.duration ? Math.min(1, Math.pow(1.25 * analyser.amplitude(10e3), 2)) : 0.5 - 0.25 * Math.cos(t / 1000); var s = 1.01 + 0.09 * amp; $.setTransform(s, 0, 0, s, W/2, H/2); $.drawImage(C, -W/2, -H/2); $.fillStyle = util.color.rgba(0, 0, 0, 0.05); $.fillRect(-W/2, -H/2, W, H); $.setTransform(1, 0, 0, 1, W/2, H/2); $.beginPath(); for(var a, r, i = 0, j = analyser.wave.length; i < j; i++) { a = i/j * 2 * Math.PI; r = amp * 256 * (0.5 + analyser.wave[i]/255); $.lineTo(r * Math.sin(a), r * Math.cos(a)); } var c = util.gradient(colors[0], amp); $.fillStyle = util.color.rgba(c[0], c[1], c[2], amp / 2); $.strokeStyle = util.color.rgba(c[0], c[1], c[2], amp); $.lineWidth = 4 * amp; $.fill(); $.stroke(); }); window.addEventListener('dragover', function (e) { e.preventDefault(); e.stopPropagation(); }); window.addEventListener('drop', function (e) { e.preventDefault(); e.stopPropagation(); var file = e.dataTransfer.files[0]; if(file) { URL.revokeObjectURL(analyser._audio.src); analyser._audio.src = URL.createObjectURL(file); } }); }, false);
}).call(this);
Audio Visualiser - Script Codes
Audio Visualiser - Script Codes
Home Page Home
Developer Thepheer
Username thepheer
Uploaded September 13, 2022
Rating 3.5
Size 6,237 Kb
Views 40,480
Do you need developer help for Audio Visualiser?

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!

Thepheer (thepheer) Script Codes
Name
Cylinder
WebGL shader video processing
Magnetic Field
Fluid Cube
Emoji Clock
Braille
100 000 particles
Flight Control
SVG Animation
Color Wheel
Create amazing marketing copy 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!