Initial import

2026-05-01 20:52:04 +03:00
commit ac168868ee
10028 changed files with 2337954 additions and 0 deletions
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="/src/page/layout/resources/js/amp-script.js" defer></script>
+    <style>
+        body {
+            background-color: #DBDBDB;
+        }
+
+        canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            z-index: -1;
+            pointer-events: none;
+        }
+
+        .grid {
+            display: grid;
+            grid-template-columns: auto min-content;
+            justify-content: center;
+            justify-items: end;
+            align-items: center;
+            gap: 5px 10px;
+        }
+
+        input {
+            margin: 0;
+        }
+    </style>
+    <script>
+        const volume = document.getElementById('volume')
+        const bass = document.getElementById('bass')
+        const mid = document.getElementById('mid')
+        const treble = document.getElementById('treble')
+        const visualizer = document.getElementById('visualizer')
+
+        const context = new AudioContext()
+        const analyserNode = new AnalyserNode(context, { fftSize: 256 })
+        const gainNode = new GainNode(context, { gain: volume.value})
+        const bassEQ = new BiquadFilterNode(context, {
+            type: 'lowshelf',
+            frequency: 500,
+            gain: bass.value
+        })
+        const midEQ = new BiquadFilterNode(context, {
+            type: 'peaking',
+            Q: Math.SQRT1_2,
+            frequency: 1500,
+            gain: mid.value
+        })
+        const trebleEQ = new BiquadFilterNode(context, {
+            type: 'highshelf',
+            frequency: 3000,
+            gain: treble.value
+        })
+
+        setupEventListeners()
+        setupContext()
+        resize()
+        drawVisualizer()
+
+        function setupEventListeners() {
+            window.addEventListener('resize', resize)
+
+            volume.addEventListener('input', e => {
+                const value = parseFloat(e.target.value)
+                gainNode.gain.setTargetAtTime(value, context.currentTime, .01)
+            })
+
+            bass.addEventListener('input', e => {
+                const value = parseInt(e.target.value)
+                bassEQ.gain.setTargetAtTime(value, context.currentTime, .01)
+            })
+
+            mid.addEventListener('input', e => {
+                const value = parseInt(e.target.value)
+                midEQ.gain.setTargetAtTime(value, context.currentTime, .01)
+            })
+
+            treble.addEventListener('input', e => {
+                const value = parseInt(e.target.value)
+                trebleEQ.gain.setTargetAtTime(value, context.currentTime, .01)
+            })
+        }
+
+        async function setupContext() {
+            const guitar = await getGuitar()
+            if (context.state === 'suspended') {
+                await context.resume()
+            }
+            const source = context.createMediaStreamSource(guitar)
+            source
+                .connect(bassEQ)
+                .connect(midEQ)
+                .connect(trebleEQ)
+                .connect(gainNode)
+                .connect(analyserNode)
+                .connect(context.destination)
+        }
+
+        function getGuitar() {
+            return navigator.mediaDevices.getUserMedia({
+                audio: {
+                    echoCancellation: false,
+                    autoGainControl: false,
+                    noiseSuppression: false,
+                    latency: 0
+                }
+            })
+        }
+
+        function drawVisualizer() {
+            requestAnimationFrame(drawVisualizer)
+
+            const bufferLength = analyserNode.frequencyBinCount
+            const dataArray = new Uint8Array(bufferLength)
+            analyserNode.getByteFrequencyData(dataArray)
+            const width = visualizer.width
+            const height = visualizer.height
+            const barWidth = width / bufferLength
+
+            const canvasContext = visualizer.getContext('2d')
+            canvasContext.clearRect(0, 0, width, height)
+
+            dataArray.forEach((item, index) => {
+                const y = item / 255 * height / 2
+                const x = barWidth * index
+
+                canvasContext.fillStyle = `hsl(${y / height * 400}, 100%, 50%)`
+                canvasContext.fillRect(x, height - y, barWidth, y)
+            })
+        }
+
+        function resize() {
+            visualizer.width = visualizer.clientWidth * window.devicePixelRatio
+            visualizer.height = visualizer.clientHeight * window.devicePixelRatio
+        }
+    </script>
+</head>
+<body>
+<canvas id="visualizer"></canvas>
+<div class="grid">
+    <label for="volume">Volume</label>
+    <input type="range" min="0" max="1" value=".5" step=".01" id="volume">
+    <label for="bass">Bass</label>
+    <input type="range" min="-10" max="10" value="0" id="bass">
+    <label for="mid">Mid</label>
+    <input type="range" min="-10" max="10" value="0" id="mid">
+    <label for="treble">Treble</label>
+    <input type="range" min="-10" max="10" value="0" id="treble">
+</div>
+</body>
+</html>