🌊 WaveSurfer.js Örnekleri

Muzibu player için hazırlanan interaktif WaveSurfer.js örnekleri. Her örneği açıp canlı olarak test edebilirsiniz.

🌊
1. Temel Waveform
Temel Görsel
Gerçek zamanlı dalga formu görselleştirme. Tıklayarak istediğiniz yere atlayın, yeşil barlar çalınan kısmı gösterir.
Örneği Aç →
⚡
2. Pre-Generated JSON
İleri Seviye Performans
Backend'de önceden oluşturulmuş waveform JSON'u. 10-20x daha hızlı yükleme, anında görünüm!
Örneği Aç →
🎵
3. Region Markers
İleri Seviye Görsel
Şarkının intro, verse, chorus kısımlarını renkli bölgelerle işaretleyin. Müzik analizi için ideal.
Örneği Aç →
🗺️
4. Minimap Plugin
İleri Seviye Görsel
Tüm şarkıyı küçük bir preview'da görün. Zoom yapınca minimap nerede olduğunuzu gösterir.
Örneği Aç →
🌈
5. Spektrogram
İleri Seviye Görsel
Waveform yerine frekans analizi. Renkler bass/mid/treble frekansları gösterir. Prodüksiyon için ideal.
Örneği Aç →

📚 Bu Örnekler Hakkında

Her örnek canlı, çalışır durumda ve interaktiftir. Örnekleri açıp kendiniz test edebilir, kodları inceleyebilirsiniz. Tüm örnekler yerel WaveSurfer.js kütüphanesi ile çalışır (CDN bağımlılığı yok).

🎯 Hangi Örneği Kullanmalıyım?

Temel kullanım: Örnek 1 (Basic Waveform) yeterli.
Performans önemli: Örnek 2 (Pre-Generated JSON) kullanın.
Müzik analizi: Örnek 3 (Region Markers) ideal.
Uzun şarkılar: Örnek 4 (Minimap) navigasyon kolaylaştırır.
Prodüksiyon/Eğitim: Örnek 5 (Spektrogram) frekans gösterir.

⚠️ Önemli Notlar

• Tüm örnekler test amaçlıdır, production'a hazır değildir.
• Gerçek implementasyon sırasında Howler.js entegrasyonu gereklidir.
• Pre-Generated JSON için backend implementasyonu yapılmalıdır.
• Region Markers için AI veya manuel analiz sistemi kurulmalıdır.