Animal Animation Visualizer Based on Audio Waveform

Yanıt:

Ses kaydının dalgasına göre hayvanlı bir animasyon ekolayzır oluşturmak için HTML, CSS ve JavaScript kullanarak basit bir örnek yapabiliriz. Bu örnekte, ses kaydını analiz etmek için Web Audio API kullanacağız ve ses dalgasına göre hayvan figürlerini animasyonlu bir şekilde göstereceğiz.

Aşağıda, temel bir örnek kodu bulabilirsiniz:

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ses Ekolayzır Animasyonu</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Ses Ekolayzır Animasyonu</h1>
    <input type="file" id="audioFile" accept="audio/*">
    <canvas id="canvas"></canvas>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #282c34;
    color: white;
    font-family: Arial, sans-serif;
}

canvas {
    border: 1px solid white;
    margin-top: 20px;
}

.animal {
    position: absolute;
    width: 50px;
    height: 50px;
    background-size: cover;
    transition: transform 0.1s;
}

JavaScript (script.js)

const audioFileInput = document.getElementById('audioFile');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = 300;

let audioContext;
let analyser;
let source;
let animalDivs = [];

audioFileInput.addEventListener('change', handleFileSelect);

function handleFileSelect(event) {
    const file = event.target.files[0];
    if (file) {
        const audioURL = URL.createObjectURL(file);
        playAudio(audioURL);
    }
}

function playAudio(audioURL) {
    audioContext = new (window.AudioContext || window.webkitAudioContext)();
    analyser = audioContext.createAnalyser();
    const audioElement = new Audio(audioURL);
    source = audioContext.createMediaElementSource(audioElement);
    source.connect(analyser);
    analyser.connect(audioContext.destination);
    
    audioElement.play();
    visualize();
}

function visualize() {
    const bufferLength = analyser.frequencyBinCount;
    const dataArray = new Uint8Array(bufferLength);

    function draw() {
        requestAnimationFrame(draw);
        analyser.getByteFrequencyData(dataArray);
        ctx.fillStyle = 'rgba(40, 44, 52, 0.5)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        const barWidth = (canvas.width / bufferLength) * 2.5;
        let barHeight;
        let x = 0;

        for (let i = 0; i < bufferLength; i++) {
            barHeight = dataArray[i];
            ctx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
            ctx.fillRect(x, canvas.height - barHeight / 2, barWidth, barHeight / 2);
            x += barWidth + 1;

            // Hayvan animasyonu
            if (barHeight > 100) {
                createAnimal(x - barWidth);
            }
        }
    }
    draw();
}

function createAnimal(x) {
    const animalDiv = document.createElement('div');
    animalDiv.className = 'animal';
    animalDiv.style.backgroundImage = 'url("https://example.com/animal.png")'; // Hayvan resmi URL'si
    animalDiv.style.left = `${x}px`;
    animalDiv.style.bottom = '0px';
    document.body.appendChild(animalDiv);
    animalDivs.push(animalDiv);

    // Hayvanı yukarı hareket ettir
    setTimeout(() => {
        animalDiv.style.transform = 'translateY(-50px)';
    }, 0);

    // Hayvanı kaldır
    setTimeout(() => {
        animalDiv.remove();
    }, 1000);
}

Açıklamalar:

HTML: Ses dosyasını yüklemek için bir dosya girişi ve bir canvas öğesi oluşturduk.
CSS: Sayfanın stilini ve hayvanların görünümünü ayarladık.
JavaScript:
- Ses dosyasını yükleyip çalmak için Web Audio API kullanıyoruz.
- Ses dalga verilerini analiz ederek, belirli bir yükseklikten sonra hayvan animasyonları oluşturuyoruz.
- Hayvanlar, ses dalgasının yüksekliğine göre yukarı doğru hareket ediyor.

Notlar: