kolaslab/Audio-Visualizer

1<!DOCTYPE html>2<html lang="ru">3<head>4    <meta charset="UTF-8">5    <meta name="viewport" content="width=device-width, initial-scale=1.0">6    <title>Audio Visualizer</title>7    <style>8        * {9            margin: 0;10            padding: 0;11            box-sizing: border-box;12        }13 14        body {15            background: #0f0f1a;16            color: #fff;17            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;18            overflow-x: hidden;19        }20 21        .container {22            width: 100%;23            min-height: 100vh;24            padding: 20px;25            position: relative;26        }27 28        header {29            text-align: center;30            padding: 40px 0;31            animation: fadeIn 1s ease-in;32        }33 34        h1 {35            font-size: 3em;36            margin-bottom: 20px;37            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);38            -webkit-background-clip: text;39            -webkit-text-fill-color: transparent;40        }41 42        .visualizer-container {43            width: 100%;44            height: calc(100vh - 200px);45            margin: 0 auto;46            background: rgba(255, 255, 255, 0.05);47            border-radius: 15px;48            padding: 20px;49            position: relative;50        }51 52        canvas {53            width: 100%;54            height: 100%;55            border-radius: 10px;56            background: rgba(0, 0, 0, 0.3);57        }58 59        .controls {60            position: fixed;61            bottom: 20px;62            left: 50%;63            transform: translateX(-50%);64            display: flex;65            gap: 10px;66            flex-wrap: wrap;67            justify-content: center;68            z-index: 100;69        }70 71        button {72            padding: 10px 20px;73            border: none;74            border-radius: 25px;75            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);76            color: white;77            cursor: pointer;78            transition: transform 0.2s;79        }80 81        button:hover {82            transform: scale(1.05);83        }84 85        input[type="file"] {86            display: none;87        }88 89        .visualization-styles {90            position: fixed;91            top: 20px;92            right: 20px;93            display: flex;94            gap: 10px;95            flex-direction: column;96            z-index: 100;97        }98 99        .style-option {100            padding: 8px 15px;101            border-radius: 15px;102            background: rgba(255, 255, 255, 0.1);103            cursor: pointer;104            transition: background 0.3s;105        }106 107        .style-option:hover {108            background: rgba(255, 255, 255, 0.2);109        }110 111        .center-image {112            position: absolute;113            top: 50%;114            left: 50%;115            transform: translate(-50%, -50%);116            max-width: 200px;117            max-height: 200px;118            z-index: 10;119        }120 121        .background-image {122            position: absolute;123            top: 0;124            left: 0;125            width: 100%;126            height: 100%;127            object-fit: cover;128            opacity: 0.3;129            z-index: 1;130        }131 132        .fullscreen-btn {133            position: fixed;134            top: 20px;135            left: 20px;136            z-index: 100;137        }138 139        .credit {140            position: fixed;141            bottom: 10px;142            right: 20px;143            font-size: 14px;144            opacity: 0.7;145            z-index: 100;146        }147 148        @keyframes fadeIn {149            from {150                opacity: 0;151                transform: translateY(-20px);152            }153            to {154                opacity: 1;155                transform: translateY(0);156            }157        }158 159        @media (max-width: 768px) {160            .visualizer-container {161                padding: 10px;162            }163 164            h1 {165                font-size: 2em;166            }167        }168    </style>169</head>170<body>171    <div class="container">172        <header>173            <h1>Audio Visualizer</h1>174        </header>175 176        <div class="visualizer-container" id="visualizer-container">177            <canvas id="visualizer"></canvas>178            <img id="centerImage" class="center-image" style="display: none;">179            <img id="backgroundImage" class="background-image" style="display: none;">180        </div>181 182        <div class="controls">183            <button onclick="document.getElementById('audioInput').click()">Upload Audio</button>184            <button onclick="document.getElementById('imageInput').click()">Upload Center Image</button>185            <button onclick="document.getElementById('bgImageInput').click()">Upload Background</button>186            <button id="playPause">Play</button>187            <input type="file" id="audioInput" accept="audio/*">188            <input type="file" id="imageInput" accept="image/*,video/gif">189            <input type="file" id="bgImageInput" accept="image/*,video/gif">190        </div>191 192        <button class="fullscreen-btn" onclick="toggleFullscreen()">Fullscreen</button>193 194        <div class="visualization-styles">195            <div class="style-option" data-style="bars">Bars</div>196            <div class="style-option" data-style="wave">Wave</div>197            <div class="style-option" data-style="circle">Circle</div>198        </div>199 200        <div class="credit">by Софронов Артемий</div>201    </div>202 203    <script>204        let audioContext, analyser, source;205        const canvas = document.getElementById('visualizer');206        const ctx = canvas.getContext('2d');207        let animationId;208        let currentStyle = 'bars';209        let centerImage = document.getElementById('centerImage');210        let backgroundImage = document.getElementById('backgroundImage');211        let bassValue = 0;212 213        function resizeCanvas() {214            canvas.width = canvas.clientWidth * window.devicePixelRatio;215            canvas.height = canvas.clientHeight * window.devicePixelRatio;216        }217        resizeCanvas();218        window.addEventListener('resize', resizeCanvas);219 220        document.getElementById('audioInput').addEventListener('change', function(e) {221            const file = e.target.files[0];222            const audio = new Audio();223            audio.src = URL.createObjectURL(file);224            setupAudioContext(audio);225        });226 227        document.getElementById('imageInput').addEventListener('change', function(e) {228            const file = e.target.files[0];229            centerImage.src = URL.createObjectURL(file);230            centerImage.style.display = 'block';231        });232 233        document.getElementById('bgImageInput').addEventListener('change', function(e) {234            const file = e.target.files[0];235            backgroundImage.src = URL.createObjectURL(file);236            backgroundImage.style.display = 'block';237        });238 239        function setupAudioContext(audio) {240            if (audioContext) audioContext.close();241            242            audioContext = new (window.AudioContext || window.webkitAudioContext)();243            analyser = audioContext.createAnalyser();244            source = audioContext.createMediaElementSource(audio);245            246            source.connect(analyser);247            analyser.connect(audioContext.destination);248            249            analyser.fftSize = 256;250            251            audio.play();252            draw();253        }254 255        function draw() {256            const bufferLength = analyser.frequencyBinCount;257            const dataArray = new Uint8Array(bufferLength);258            259            function animate() {260                animationId = requestAnimationFrame(animate);261                analyser.getByteFrequencyData(dataArray);262                263                ctx.fillStyle = 'rgba(15, 15, 26, 0.2)';264                ctx.fillRect(0, 0, canvas.width, canvas.height);265                266                // Get bass value for image animation267                bassValue = dataArray.slice(0, 10).reduce((a, b) => a + b) / 10;268                269                if (centerImage.style.display !== 'none') {270                    const scale = 1 + (bassValue / 255) * 0.2;271                    centerImage.style.transform = `translate(-50%, -50%) scale(${scale})`;272                }273                274                switch(currentStyle) {275                    case 'bars':276                        drawBars(dataArray, bufferLength);277                        break;278                    case 'wave':279                        drawWave(dataArray, bufferLength);280                        break;281                    case 'circle':282                        drawCircle(dataArray, bufferLength);283                        break;284                }285            }286            287            animate();288        }289 290        function drawBars(dataArray, bufferLength) {291            const barWidth = canvas.width / bufferLength;292            293            for(let i = 0; i < bufferLength; i++) {294                const barHeight = dataArray[i] * canvas.height / 255;295                296                const gradient = ctx.createLinearGradient(0, canvas.height, 0, 0);297                gradient.addColorStop(0, '#ff6b6b');298                gradient.addColorStop(1, '#4ecdc4');299                300                ctx.fillStyle = gradient;301                ctx.fillRect(i * barWidth, canvas.height - barHeight, barWidth - 1, barHeight);302            }303        }304 305        function drawWave(dataArray, bufferLength) {306            ctx.beginPath();307            ctx.strokeStyle = '#4ecdc4';308            ctx.lineWidth = 2;309            310            for(let i = 0; i < bufferLength; i++) {311                const x = i * (canvas.width / bufferLength);312                const y = (dataArray[i] / 128.0) * (canvas.height / 2);313                314                if(i === 0) {315                    ctx.moveTo(x, y);316                } else {317                    ctx.lineTo(x, y);318                }319            }320            321            ctx.stroke();322        }323 324        function drawCircle(dataArray, bufferLength) {325            const centerX = canvas.width / 2;326            const centerY = canvas.height / 2;327            const radius = Math.min(centerX, centerY) - 50;328            329            ctx.beginPath();330            ctx.strokeStyle = '#ff6b6b';331            ctx.lineWidth = 2;332 333            for(let i = 0; i < bufferLength; i++) {334                const angle = i * 2 * Math.PI / bufferLength;335                const amplitude = (dataArray[i] * radius / 255) + radius;336                337                const x = centerX + amplitude * Math.cos(angle);338                const y = centerY + amplitude * Math.sin(angle);339                340                if(i === 0) {341                    ctx.moveTo(x, y);342                } else {343                    ctx.lineTo(x, y);344                }345            }346            347            ctx.closePath();348            ctx.stroke();349 350            // Draw base circle351            ctx.beginPath();352            ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);353            ctx.strokeStyle = 'rgba(255, 107, 107, 0.3)';354            ctx.stroke();355        }356 357        document.querySelectorAll('.style-option').forEach(option => {358            option.addEventListener('click', function() {359                currentStyle = this.dataset.style;360            });361        });362 363        function toggleFullscreen() {364            if (!document.fullscreenElement) {365                document.documentElement.requestFullscreen();366            } else {367                document.exitFullscreen();368            }369        }370    </script>371</body>372</html>