Interaktif Müzik Görselleştirici

<style>
.audio-visualizer {
  width: 100%;
  height: 300px;
  background-color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bars-container {
  display: flex;
  align-items: flex-end;
  height: 200px;
  width: 100%;
  max-width: 800px;
  padding: 0 20px;
}

.bar {
  flex: 1;
  margin: 0 2px;
  background: linear-gradient(to top, #4facfe 0%, #00f2fe 100%);
  transition: height 0.1s;
}

.controls {
  text-align: center;
  margin-top: 20px;
}

.play-btn {
  background-color: #4facfe;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}
</style>

<div class="audio-visualizer">
  <div class="bars-container" id="bars-container"></div>
</div>

<div class="controls">
  <button class="play-btn" id="play-btn">Müziği Başlat</button>
</div>

<script>
// Çubukları oluştur
const barsContainer = document.getElementById("bars-container");
const barsCount = 32;
const bars = [];

for (let i = 0; i < barsCount; i++) {
  const bar = document.createElement("div");
  bar.classList.add("bar");
  bar.style.height = "5px";
  barsContainer.appendChild(bar);
  bars.push(bar);
}

// Ses analizi için gerekli değişkenler
let audioContext;
let analyser;
let dataArray;
let source;
let animationId;

// Demo ses dosyası
const audioElement = new Audio("https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3");

audioElement.loop = true;

document.getElementById("play-btn").addEventListener("click", function() {
  if (audioContext) {
    if (audioElement.paused) {
      audioElement.play();
      this.textContent = "Duraklat";
      visualize();
    } else {
      audioElement.pause();
      this.textContent = "Müziği Başlat";
      cancelAnimationFrame(animationId);
    }
    return;
  }
  
  // AudioContext oluştur
  audioContext = new (window.AudioContext || window.webkitAudioContext)();
  analyser = audioContext.createAnalyser();
  
  // FFT boyutunu ayarla
  analyser.fftSize = 64;
  const bufferLength = analyser.frequencyBinCount;
  dataArray = new Uint8Array(bufferLength);
  
  // Ses kaynağını bağla
  source = audioContext.createMediaElementSource(audioElement);
  source.connect(analyser);
  analyser.connect(audioContext.destination);
  
  // Müziği başlat
  audioElement.play();
  this.textContent = "Duraklat";
  
  // Görselleştirmeyi başlat
  visualize();
});

function visualize() {
  analyser.getByteFrequencyData(dataArray);
  
  // Her çubuğun yüksekliğini güncelle
  for (let i = 0; i < bars.length; i++) {
    const value = dataArray[i] || 0;
    const height = (value / 255) * 200;
    bars[i].style.height = height + "px";
  }
  
  animationId = requestAnimationFrame(visualize);
}
</script>