cordQ text/html Mã4<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Dynamic Light Blue Music Visualizer</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<style>
body { margin: 0; overflow: hidden; background-color: #001a1a; font-family: 'Arial', sans-serif; }
#controls {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 1000;
flex-wrap: wrap;
justify-content: center;
width: 90%;
max-width: 400px;
}
#controls button, #controls label {
background-color: rgba(0, 255, 255, 0.2);
color: #00ffff;
border: 1px solid #00ffff;
padding: 10px 15px;
cursor: pointer;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
border-radius: 20px;
backdrop-filter: blur(5px);
flex-grow: 1;
text-align: center;
}
#controls button:hover, #controls label:hover {
background-color: rgba(0, 255, 255, 0.4);
}
#controls button:active, #controls label:active {
transform: scale(0.95);
}
#controls button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
#audioUpload { display: none; }
#fileInfo, #debug {
position: fixed;
color: #00ffff;
font-size: 12px;
background-color: rgba(0, 26, 26, 0.5);
padding: 5px 10px;
border-radius: 10px;
max-width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#fileInfo { top: 10px; left: 10px; }
#debug { bottom: 10px; right: 10px; }
@media (max-width: 768px) {
#controls { bottom: 10px; }
#controls button, #controls label {
font-size: 12px;
padding: 8px 12px;
}
#fileInfo, #debug { font-size: 10px; }
}
</style>
</head>
<body>
<div id="controls">
<label for="audioUpload">Choose File</label>
<input type="file" id="audioUpload" accept="audio/*">
<button id="playPause" disabled>Play/Pause</button>
</div>
<div id="fileInfo"></div>
<div id="debug"></div>
<script>
let scene, camera, renderer, visualizer, particles, analyser, dataArray;
const fftSize = 512;
let audioContext, source, audioBuffer;
let isPlaying = false;
let touchStartX, touchStartY, lastPinchDistance;
let targetZoom = 20;
let currentZoom = 20;
let time = 0;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.IcosahedronGeometry(5, 4);
const material = new THREE.ShaderMaterial({
uniforms: {
time: { value: 0 },
audioData: { value: new Float32Array(fftSize / 2) }
},
vertexShader: `
uniform float time;
uniform float audioData[${fftSize / 2}];
varying vec3 vNormal;
varying float vAudioValue;
void main() {
vNormal = normal;
vec3 pos = position;
float audioValue = audioData[int(uv.y * float(${fftSize / 2}))];
pos += normal * (sin(pos.x * 10.0 + time) * cos(pos.y * 10.0 + time) * cos(pos.z * 10.0 + time)) * audioValue * 2.0;
vAudioValue = audioValue;
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
`,
fragmentShader: `
uniform float time;
varying vec3 vNormal;
varying float vAudioValue;
void main() {
vec3 color = vec3(0.0, 0.8, 1.0); // Light blue color
float intensity = 0.5 + 0.5 * sin(vNormal.x * 10.0 + time * 3.0);
color *= intensity * (1.0 + vAudioValue);
gl_FragColor = vec4(color, 1.0);
}
`,
wireframe: true
});
visualizer = new THREE.Mesh(geometry, material);
scene.add(visualizer);
// Add particles
const particlesGeometry = new THREE.BufferGeometry();
const particlesCnt = 5000;
const posArray = new Float32Array(particlesCnt * 3);
for(let i = 0; i < particlesCnt * 3; i++) {
posArray[i] = (Math.random() - 0.5) * 30;
}
particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
const particlesMaterial = new THREE.PointsMaterial({
size: 0.05,
color: 0x00ffff,
transparent: true,
opacity: 0.8,
});
particles = new THREE.Points(particlesGeometry, particlesMaterial);
scene.add(particles);
camera.position.z = 20;
window.addEventListener('resize', onWindowResize, false);
renderer.domElement.addEventListener('mousemove', onMouseMove, false);
renderer.domElement.addEventListener('wheel', onMouseWheel, { passive: false });
renderer.domElement.addEventListener('touchstart', onTouchStart, { passive: false });
renderer.domElement.addEventListener('touchmove', onTouchMove, { passive: false });
renderer.domElement.addEventListener('touchend', onTouchEnd, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onMouseMove(event) {
rotateVisualizer(event.clientX, event.clientY);
}
function onMouseWheel(event) {
event.preventDefault();
zoomCamera(event.deltaY * 0.005);
}
function onTouchStart(event) {
event.preventDefault();
touchStartX = event.touches[0].clientX;
touchStartY = event.touches[0].clientY;
if (event.touches.length === 2) {
lastPinchDistance = getPinchDistance(event);
}
}
function onTouchMove(event) {
event.preventDefault();
if (event.touches.length === 1) {
rotateVisualizer(event.touches[0].clientX, event.touches[0].clientY);
} else if (event.touches.length === 2) {
const currentPinchDistance = getPinchDistance(event);
const pinchDelta = currentPinchDistance - lastPinchDistance;
zoomCamera(-pinchDelta * 0.05);
lastPinchDistance = currentPinchDistance;
}
}
function onTouchEnd(event) {
touchStartX = null;
touchStartY = null;
lastPinchDistance = null;
}
function getPinchDistance(event) {
return Math.hypot(
event.touches[0].clientX - event.touches[1].clientX,
event.touches[0].clientY - event.touches[1].clientY
);
}
function rotateVisualizer(clientX, clientY) {
const mouseX = (clientX / window.innerWidth) * 2 - 1;
const mouseY = -(clientY / window.innerHeight) * 2 + 1;
visualizer.rotation.y = mouseX * Math.PI;
visualizer.rotation.x = mouseY * Math.PI;
}
function zoomCamera(delta) {
targetZoom = Math.max(1, Math.min(50, targetZoom + delta));
}
function animate() {
requestAnimationFrame(animate);
time += 0.01;
visualizer.material.uniforms.time.value = time;
currentZoom += (targetZoom - currentZoom) * 0.1;
camera.position.z = currentZoom;
if (analyser && dataArray && isPlaying) {
analyser.getByteFrequencyData(dataArray);
updateVisualizer();
}
// Animate particles
const positions = particles.geometry.attributes.position.array;
for (let i = 0; i < positions.length; i += 3) {
positions[i] += (Math.random() - 0.5) * 0.1;
positions[i+1] += (Math.random() - 0.5) * 0.1;
positions[i+2] += (Math.random() - 0.5) * 0.1;
if (positions[i] < -15 || positions[i] > 15) positions[i] *= -1;
if (positions[i+1] < -15 || positions[i+1] > 15) positions[i+1] *= -1;
if (positions[i+2] < -15 || positions[i+2] > 15) positions[i+2] *= -1;
}
particles.geometry.attributes.position.needsUpdate = true;
// Adjust particle size based on zoom level
const zoomFactor = Math.max(0.1, Math.min(1, (currentZoom - 1) / 19));
particles.material.size = 0.05 * zoomFactor;
renderer.render(scene, camera);
}
function updateVisualizer() {
const audioData = new Float32Array(fftSize / 2);
for (let i = 0; i < fftSize / 2; i++) {
audioData[i] = dataArray[i] / 255;
}
visualizer.material.uniforms.audioData.value = audioData;
// Update particle size based on audio
const avgAudio = audioData.reduce((a, b) => a + b) / audioData.length;
particles.material.size = Math.max(0.05, 0.05 + avgAudio * 0.1) * (currentZoom / 20);
}
init();
animate();
const audioUpload = document.getElementById('audioUpload');
const playPauseButton = document.getElementById('playPause');
const debugElement = document.getElementById('debug');
const fileInfoElement = document.getElementById('fileInfo');
audioUpload.addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file) {
setDebugMessage('No file selected');
return;
}
fileInfoElement.textContent = `File: ${file.name}`;
const reader = new FileReader();
reader.onload = function(evt) {
const arrayBuffer = evt.target.result;
setupAudioContext(arrayBuffer);
};
reader.onerror = function(evt) {
setDebugMessage('File reading error: ' + evt.target.error.message);
};
reader.readAsArrayBuffer(file);
});
playPauseButton.addEventListener('click', togglePlayPause);
function togglePlayPause() {
if (!audioContext || !audioBuffer) {
setDebugMessage('No audio file loaded');
return;
}
if (!isPlaying) {
if (!source) {
source = audioContext.createBufferSource();
source.buffer = audioBuffer;
source.connect(analyser);
source.start(0);
} else {
audioContext.resume();
}
isPlaying = true;
setDebugMessage('Playing');
playPauseButton.textContent = 'Pause';
} else {
audioContext.suspend();
isPlaying = false;
setDebugMessage('Paused');
playPauseButton.textContent = 'Play';
}
}
function setupAudioContext(arrayBuffer) {
if (audioContext) {
audioContext.close();
}
audioContext = new (window.AudioContext || window.webkitAudioContext)();
analyser = audioContext.createAnalyser();
analyser.fftSize = fftSize;
analyser.connect(audioContext.destination);
dataArray = new Uint8Array(analyser.frequencyBinCount);
audioContext.decodeAudioData(arrayBuffer)
.then(function(buffer) {
audioBuffer = buffer;
setDebugMessage('Audio file loaded successfully');
playPauseButton.disabled = false;
})
.catch(function(e) {
setDebugMessage('Audio decoding error: Unable to decode the file. Please try a different audio file.');
});
}
function setDebugMessage(message) {
debugElement.textContent = message;
}
</script>
</body>
</html>hv©müK-mWvõ".Ká2n=dð¬
https://whatsonchain.com/tx/undefined