Konu Başlıkları Gizle
Herkese selamlar,
Bugün sizlere üzerinde çalıştığım, tamamen Vanilla JS ve Web Audio API kullanarak sıfırdan geliştirdiğim "Audio Engine" projesini tanıtacağım.
Piyasada web tabanlı birçok ses aracı var ancak çoğu ya ses dosyanızı kendi sunucusuna yükleyerek sizi dakikalarca bekletir ya da arayüzü reklam doludur. Ben istedim ki dışarıdan hiçbir sunucu bağlantısına ihtiyaç duymayan, internet kesilse bile tarayıcıda yerel olarak çalışabilen ve gücünü doğrudan sizin işlemcinizden alan gerçek zamanlı bir miks motoru olsun.
Aşağıya bıraktığım tek bir .html dosyası ile tarayıcınızı tam teşekküllü bir DJ masasına çevirebilirsiniz. Gelin bu sistemin altyapısına ve modüllerine yakından bakalım.
Bugün sizlere üzerinde çalıştığım, tamamen Vanilla JS ve Web Audio API kullanarak sıfırdan geliştirdiğim "Audio Engine" projesini tanıtacağım.
Piyasada web tabanlı birçok ses aracı var ancak çoğu ya ses dosyanızı kendi sunucusuna yükleyerek sizi dakikalarca bekletir ya da arayüzü reklam doludur. Ben istedim ki dışarıdan hiçbir sunucu bağlantısına ihtiyaç duymayan, internet kesilse bile tarayıcıda yerel olarak çalışabilen ve gücünü doğrudan sizin işlemcinizden alan gerçek zamanlı bir miks motoru olsun.
Aşağıya bıraktığım tek bir .html dosyası ile tarayıcınızı tam teşekküllü bir DJ masasına çevirebilirsiniz. Gelin bu sistemin altyapısına ve modüllerine yakından bakalım.
Sistemin Çekirdek Özellikleri ve Teknolojisi
1. Sunucusuz Auto Mix Assist (Saf Matematik):
Sistemin en iddialı özelliği bu. Butona bastığınızda araç; şarkının enerjisini, spektral ağırlık merkezini ve notasını (Key) tarayıcı içinde yerel olarak analiz ediyor. Arka planda Autocorrelation ve Krumhansl-Schmuckler algoritmalarını çalıştırarak iki şarkının hızını (BPM) tespit edip, vokalin hızını altyapıya göre otomatik olarak eşitliyor.
2. Web Worker ile Donmasız MP3 Export:
Tarayıcıda canlı sesi kaydedip dışa aktarmak sayfayı dondurur veya RAM'i şişirir. Bu sorunu çözmek için lame.min.js kütüphanesini bir Web Worker içine entegre ettim. Siz kaydı bitirdiğinizde tarayıcınızın ana iş parçacığı (Main Thread) meşgul edilmiyor; arka planda sessizce 320kbps MP3 render alınıyor.
3. Stüdyo Hilesi: Karaoke Modu (Faz Çevirme):
Tarayıcıyı ağır yapay zeka modelleriyle yorup vokal silmek yerine, deck B'deki Karaoke tuşuna basınca sistem, sol kanalın fazını (-1) ters çevirip sağ kanalla birleştiriyor. Eğer kullandığınız altyapıdaki vokal merkezdeyse (Center Pan), anında iptal ediliyor ve geriye enstrümanlar kalıyor.
Sistemin en iddialı özelliği bu. Butona bastığınızda araç; şarkının enerjisini, spektral ağırlık merkezini ve notasını (Key) tarayıcı içinde yerel olarak analiz ediyor. Arka planda Autocorrelation ve Krumhansl-Schmuckler algoritmalarını çalıştırarak iki şarkının hızını (BPM) tespit edip, vokalin hızını altyapıya göre otomatik olarak eşitliyor.
2. Web Worker ile Donmasız MP3 Export:
Tarayıcıda canlı sesi kaydedip dışa aktarmak sayfayı dondurur veya RAM'i şişirir. Bu sorunu çözmek için lame.min.js kütüphanesini bir Web Worker içine entegre ettim. Siz kaydı bitirdiğinizde tarayıcınızın ana iş parçacığı (Main Thread) meşgul edilmiyor; arka planda sessizce 320kbps MP3 render alınıyor.
3. Stüdyo Hilesi: Karaoke Modu (Faz Çevirme):
Tarayıcıyı ağır yapay zeka modelleriyle yorup vokal silmek yerine, deck B'deki Karaoke tuşuna basınca sistem, sol kanalın fazını (-1) ters çevirip sağ kanalla birleştiriyor. Eğer kullandığınız altyapıdaki vokal merkezdeyse (Center Pan), anında iptal ediliyor ve geriye enstrümanlar kalıyor.
Araçtaki Modüller ve Kullanım Rehberi
Sistemi kullanırken en iyi verimi almanız için arayüzdeki modülleri detaylandırayım:
- Deck A ve Deck B (Yükleme İstasyonları): Sistemi iki kanallı bir mikser gibi düşünün. Temiz sonuç için Deck A'ya saf vokalinizi (Acapella), Deck B'ye ise altyapıyı (Beat) yüklemelisiniz.
- Pitch / Speed Kontrolü: Parçaların oynatma hızını gerçek zamanlı olarak değiştirir. Auto Mix kullanmak istemezseniz buradan manuel BPM eşitlemesi yapabilirsiniz.
- Time, Cue ve Loop Modülleri: Şarkının belirli bir saniyesine (Cue) işaret koyabilir ve tek tıkla o noktaya dönebilirsiniz. Loop (Döngü) butonları ile altyapının güzel bir kısmını seçip sonsuz döngüye sokarak üzerine vokal bindirebilirsiniz.
- 3-Band Biquad EQ ve Master Gain: Her iki kanala ve ana çıkışa bağlı filtrelerdir. Altyapının baslarını (Low) kısıp, vokalin tizlerini (High) açarak seslerin birbirine girmesini (frekans çakışmasını) engelleyebilirsiniz.
- Crossfader (Geçiş Çubuğu): Deck A ve Deck B arasındaki ses dengesini sağlar. Vokal çok bağırıyorsa fader'ı hafifçe Deck B'ye (Beat'e) doğru kaydırarak mükemmel miks dengesini bulabilirsiniz.
- Canlı Drill Soundboard (FX Pads): Ekranda gördüğünüz Siren, Gunshot, Riser ve Sub Drop gibi seslerin hiçbiri dışarıdan yüklenen .mp3 dosyaları değildir. Tümü o an Web Audio API'nin OscillatorNode özelliğiyle sentezlenen, sıfır gecikmeli (zero-latency) saf matematiksel sinyallerdir.
- Tek Tıkla "Hoodtrap" ve "Nightcore" Hazır Ayarları (Makrolar):Herkesin saatlerce EQ ve Pitch ayarı yapmakla uğraşmak istemediğini biliyorum. Bu yüzden araca tek tıkla çalışan iki adet agresif stüdyo makrosu (Preset) ekledim:
- Hoodtrap / Drill Modu: Bu butona bastığınızda makine, parçanın bas frekanslarını (Low EQ) göğüs kafesinizi titretecek seviyeye çeker, Karanlık beatler yapmak isteyenler için birebir.
- Nightcore Modu: İnternet kültürünün vazgeçilmezi olan meşhur Nightcore (hızlı ve ince ses) efektini tek tuşa bağladım. Bastığınız an sistem, şarkının BPM'ini ve Pitch (Ton) değerini matematiksel olarak kusursuz bir oranda yukarı çeker. Arabesk bir parçayı bile saniyeler içinde zıplayan bir elektronik kulüp parçasına dönüştürebilirsiniz. Ayarları bozarsanız diye bir de "Reset" butonu koydum, tek tıkla her şey fabrika ayarına döner.
Profesyonel Sonuç Almak İsteyenlere Tavsiyeler
- İstihbarat Yapın: İki parçayı birleştirmeden önce Tunebat veya SongBPM gibi sitelerden şarkıların orijinal BPM ve Key (Ton) değerlerini öğrenin. Rastgele iki parçayı birleştirmek her zaman detone ile sonuçlanır.
- Temiz Vokal Kullanın: Profesyonel miks için internetteki kalitesiz vokal sökücü siteler yerine, bilgisayarınıza UVR5 (Ultimate Vocal Remover) kurun. Oradan çıkaracağınız cam gibi Acapella'yı benim aracıma yükleyin.
- %5 Hız Kuralı: Sistemdeki Pitch çubuğu hızı değiştirirken vokalin sesini de inceltip kalınlaştırır. 90 BPM bir vokali en fazla 95 BPM bir beate uydurmalısınız. Aradaki fark açılırsa seste "Alvin ve Sincaplar" efekti oluşur.
Eksiklerimiz ve Geliştirici İtirafları
Açık kaynak paylaştığım için darboğazları da şeffafça belirteyim:
- Time-Stretching Eksikliği: Hız değiştiğinde sesin incelmesini önleyecek (Pitch Koruması) WSOLA gibi algoritmalar Vanilla JS ile tek dosyada inanılmaz CPU tüketiyor. Performansı ve mobil uyumluluğu korumak adına bu özelliği eklemedim.
- Neden WAV Değil MP3? Sesi kayıpsız .wav olarak almak stüdyo kalitesi verir ancak uzun set kayıtlarında tarayıcı RAM'ini sömürerek çökmeye neden olur. Stabilite için MP3 sıkıştırması kullandım.
Masaüstü Sürümü (.EXE) Hakkında Önemli Not
Proje şu an her tarayıcıda çalışan tek bir HTML dosyası formatında. Ancak eğer konuya yeterli ilgi ve talep gelirse, bu sistemi Electron.js altyapısıyla, daha fazla RAM kullanabilen, WAV render alabilen bağımsız bir masaüstü uygulaması (.exe) haline getirip sizlerle paylaşabilirim.
Kodu geliştirmek isteyen yazılımcı arkadaşlar inceleyip kendi eklentilerini yapabilirler. Yorumlarınızı, eleştirilerinizi ve varsa bu araçla yaptığınız denemeleri bekliyorum.
ARAÇ GÖRÜNTÜSÜ:
İNDİRME BAĞLANTISI:
Pass: Aksoy
VT SONUCU:
BAZI ÖRNEKLER:
(Profesyonel şekilde yapılmadı, örnek açısından hızlıca oluşturuldu.)
Tamamen eğlence amaçlı oluşturulmuş bir proje. Yaptığınız mixleri konu altına atabilirsiniz. Herkese iyi kullanımlar, iyi forumlar dilerim.
Kodu geliştirmek isteyen yazılımcı arkadaşlar inceleyip kendi eklentilerini yapabilirler. Yorumlarınızı, eleştirilerinizi ve varsa bu araçla yaptığınız denemeleri bekliyorum.
ARAÇ GÖRÜNTÜSÜ:
İNDİRME BAĞLANTISI:
Pass: Aksoy
VT SONUCU:
BAZI ÖRNEKLER:
(Profesyonel şekilde yapılmadı, örnek açısından hızlıca oluşturuldu.)
Tamamen eğlence amaçlı oluşturulmuş bir proje. Yaptığınız mixleri konu altına atabilirsiniz. Herkese iyi kullanımlar, iyi forumlar dilerim.
