Spaces:
Sleeping
Sleeping
File size: 5,726 Bytes
bd6c0c0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
</head>
<body style="background-color: black; color: white;">
<div id="svg-container"></div>
<button id="play-button">play</button>
<main>
<p>Current status: listening</p>
</main>
</body>
<script>
// Load the SVG
const svgContainer = document.getElementById('svg-container');
const svgContent = `
<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<ellipse id="left-eye" cx="340" cy="200" rx="20" ry="20" fill="white"/>
<circle id="left-pupil" cx="340" cy="200" r="8" fill="black"/>
<ellipse id="right-eye" cx="460" cy="200" rx="20" ry="20" fill="white"/>
<circle id="right-pupil" cx="460" cy="200" r="8" fill="black"/>
<path id="upper-lip" d="M 300 300 C 350 284, 450 284, 500 300" stroke="white" stroke-width="10" fill="none"/>
<path id="lower-lip" d="M 300 300 C 350 316, 450 316, 500 300" stroke="white" stroke-width="10" fill="none"/>
</svg>`;
svgContainer.innerHTML = svgContent;
// Set up audio context
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioContext.createAnalyser();
analyser.fftSize = 256;
// Load audio file
const audio = new Audio('/heath_ledger.mp3');
const source = audioContext.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioContext.destination);
// Animation variables
let isAudioPlaying = false;
let lastBlinkTime = 0;
let eyeMovementOffset = { x: 0, y: 0 };
// Idle eye animation function
function animateIdleEyes(timestamp) {
const leftEye = document.getElementById('left-eye');
const rightEye = document.getElementById('right-eye');
const leftPupil = document.getElementById('left-pupil');
const rightPupil = document.getElementById('right-pupil');
const baseEyeX = { left: 340, right: 460 };
const baseEyeY = 200;
// Blink effect
const blinkInterval = 4000 + Math.random() * 2000; // Random blink interval between 4-6 seconds
if (timestamp - lastBlinkTime > blinkInterval) {
leftEye.setAttribute('ry', '2');
rightEye.setAttribute('ry', '2');
leftPupil.setAttribute('ry', '0.8');
rightPupil.setAttribute('ry', '0.8');
setTimeout(() => {
leftEye.setAttribute('ry', '20');
rightEye.setAttribute('ry', '20');
leftPupil.setAttribute('ry', '8');
rightPupil.setAttribute('ry', '8');
}, 150);
lastBlinkTime = timestamp;
}
// Subtle eye movement
const movementSpeed = 0.001;
eyeMovementOffset.x = Math.sin(timestamp * movementSpeed) * 6;
eyeMovementOffset.y = Math.cos(timestamp * movementSpeed * 1.3) * 1; // Reduced vertical movement
leftEye.setAttribute('cx', baseEyeX.left + eyeMovementOffset.x);
leftEye.setAttribute('cy', baseEyeY + eyeMovementOffset.y);
rightEye.setAttribute('cx', baseEyeX.right + eyeMovementOffset.x);
rightEye.setAttribute('cy', baseEyeY + eyeMovementOffset.y);
leftPupil.setAttribute('cx', baseEyeX.left + eyeMovementOffset.x);
leftPupil.setAttribute('cy', baseEyeY + eyeMovementOffset.y);
rightPupil.setAttribute('cx', baseEyeX.right + eyeMovementOffset.x);
rightPupil.setAttribute('cy', baseEyeY + eyeMovementOffset.y);
}
// Main animation function
function animate(timestamp) {
if (isAudioPlaying) {
const dataArray = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(dataArray);
// Calculate the average amplitude in the speech frequency range
const speechRange = dataArray.slice(5, 80); // Adjust based on your needs
const averageAmplitude = speechRange.reduce((a, b) => a + b) / speechRange.length;
// Normalize the amplitude (0-1 range)
const normalizedAmplitude = averageAmplitude / 255;
// Animate mouth
const upperLip = document.getElementById('upper-lip');
const lowerLip = document.getElementById('lower-lip');
const baseY = 300;
const maxMovement = 60;
const newUpperY = baseY - normalizedAmplitude * maxMovement;
const newLowerY = baseY + normalizedAmplitude * maxMovement;
// Adjust control points for more natural movement
const upperControlY1 = newUpperY - 8;
const upperControlY2 = newUpperY - 8;
const lowerControlY1 = newLowerY + 8;
const lowerControlY2 = newLowerY + 8;
upperLip.setAttribute('d', `M 300 ${baseY} C 350 ${upperControlY1}, 450 ${upperControlY2}, 500 ${baseY}`);
lowerLip.setAttribute('d', `M 300 ${baseY} C 350 ${lowerControlY1}, 450 ${lowerControlY2}, 500 ${baseY}`);
// Animate eyes
const leftEye = document.getElementById('left-eye');
const rightEye = document.getElementById('right-eye');
const leftPupil = document.getElementById('left-pupil');
const rightPupil = document.getElementById('right-pupil');
const baseEyeY = 200;
const maxEyeMovement = 10;
const newEyeY = baseEyeY - normalizedAmplitude * maxEyeMovement;
leftEye.setAttribute('cy', newEyeY);
rightEye.setAttribute('cy', newEyeY);
leftPupil.setAttribute('cy', newEyeY);
rightPupil.setAttribute('cy', newEyeY);
} else {
animateIdleEyes(timestamp);
}
requestAnimationFrame(animate);
}
// Start animation
animate();
// Handle audio play/pause
audio.addEventListener('play', () => {
isAudioPlaying = true;
audioContext.resume();
});
audio.addEventListener('pause', () => {
isAudioPlaying = false;
});
audio.addEventListener('ended', () => {
isAudioPlaying = false;
});
// Play audio (you might want to trigger this with a user interaction)
document.getElementById('play-button').addEventListener('click', () => {
audio.play();
});
</script>
</html>
|