Modern muzik player'lardan ilham — Pill-bar uyumlu oneriler
Volume (ses seviyesi) kontrolu, bir muzik calarin en cok kullanilan parcalarindan biridir. Dogru tasarlandiginda kimse fark etmez — yanlis tasarlandiginda herkes sikayet eder.
Bu raporda, Spotify, Apple Music, YouTube Music, SoundCloud, Tidal ve Deezer gibi buyuk platformlarin volume kontrolunu nasil tasarladigini inceledik. Amac: Muzibu'nun rounded-pill (yuvarlak hap) seklindeki player bar'ina dogal olarak uyan bir volume kontrolu bulmak.
Neden onemli? Muzibu kullanicilari gunde 10-15 saat muzik dinliyor. Volume kontrolu gunluk onlarca kez kullaniliyor. Eger slider cok kucuk, hassas degil veya mobilde zor kullaniliyorsa — kullanici deneyimi dogrudan zarar gorur.
Mevcut durum: Su anda Muzibu player'da sadece bir mute/unmute butonu var (ses ac/kapa). Gercek bir volume slider'i yok. Bu eksiklik giderilmeli.
Canli Demo (hover edin):
Canli Demo:
Canli Demo (dikey popup):
Her ikisi de Spotify'a cok benzer yatay slider kullanir. Farklar minimal:
| Platform | Tip | Yon | Thumb | Hover Efekt | Mobil | Scroll | Egri |
|---|---|---|---|---|---|---|---|
| Spotify | Inline yatay | Yatay | Gizli → hover | Renk + kalinlik | Yok | Var | Logaritmik |
| Apple Music | Popup / Inline | Yatay | Her zaman gorunur | Minimal | Yok | Yok | Lineer |
| YouTube Music | Dikey popup | Dikey | Kucuk, gorunur | Popup acar | Yok | Var | Lineer |
| SoundCloud | Inline yatay | Yatay | Gorunur | Minimal | Yok | Yok | Lineer |
| Tidal | Inline yatay | Yatay | Gizli → hover | Renk degisimi | Yok | Var | Lineer |
Not: Hic bir buyuk platform mobilde in-player volume slider sunmuyor. Hepsi cihaz volume butonuna yonlendiriyor.
En yaygin desen — Spotify, Tidal, SoundCloud
Ikon + ince yatay cizgi + yuvarlak thumb. Track 4px, hover'da 6px'e buyur. Dolu kisim accent renkte, bos kisim koyu gri.
Tikla = o noktaya git. Surukle = surekli. Hover = thumb gorunur + renk degisir. Scroll = hassas ayar.
Desktop: Mukemmel. Tablet: Iyi (yeterli genislik varsa). Mobil: Slider gizlenmeli veya daraltilmali.
Pill-bar uyumu:
Ikon hover'inda slider acilir — YouTube Music varyanti
Normalde sadece speaker ikonu gorunur. Hover/focus olunca yatay slider sola dogru kaydirarak acilir (CSS transition, ~0.3s). Kapatilinca geri cekilir.
Hover ikonu = slider acar. Ikon tik = mute. Slider surukle = volume ayarla. Mouse-leave = slider geri kapanir (300ms gecikme ile).
Desktop: Mukemmel (hover dogal). Tablet: Iyi (touch = hover tetikler). Mobil: Ikon'a tap ile acilir (toggle modu).
Canli Demo (hover edin):
↑ Speaker ikonuna hover edin — slider kayarak acilir
Ikon ustune dikey slider popup — YouTube Music / VLC
Speaker ikonunun ustune dikey, dar, yuvarlak kose (pill) popup cizar. Icinde dikey slider: bos kisim ustte, dolu kisim altta.
Hover veya tap ile popup acar. Yukariya surukle = sesi artir. Asagiya surukle = sesi azalt. Disari tikla = kapat.
Desktop: Iyi ama yatay bar'da dikey popup garip durabilir. Tablet/Mobil: Yer kaplamaz ama popup konum sorunu olabilir.
Slider yok, sadece mute toggle — Spotify Mobile, Apple Music Mobile
Sadece speaker ikonu. Sesi acik/kapali gosterir. Baska gorsel element yok.
Tek tik = mute/unmute. Volume ayari = cihaz fiziksel butonlari ile.
Tum ekranlarda calisir. Ama masaustunde yetersiz — kullanici in-app volume bekler.
Dikey cubuklar siralanir — VU meter ilhami
10-15 adet dikey cubuk, soldan saga yukselen. Aktif olanlar accent renk, pasifler koyu gri. Her cubuk bir seviye (ornegin 10 cubuk = %10 artis).
Bir cubuga tikla = o seviyeye git. Surukleme ile cubuklar uzerinden gecis. Hover'da cubuk parlak olur.
Desktop: Gorsel olarak guclu. Tablet: Orta (touch target kucuk olabilir). Mobil: Zor (cubuklar cok kucuk).
Canli Demo:
SVG ring/arc uzerinde dondurme — Analog ilhami
SVG daire, dolu kisim arc seklinde ilerler (270 derece). Ortada ikon veya sayi. Daire ustunde surukle ile dondurme.
Daire uzerinde surukle (angular drag). Veya tik ile preset: %25, %50, %75, %100. Scroll ile de donebilir.
Desktop: Dikkat cekici ama alisik olunmayan. Tablet: Touch ile dondurme zor. Mobil: Pratik degil.
Canli Demo (statik):
Ekranda kaydirarak ses ayarlama — VLC, Gesture uygulamalari
Gorsel bir slider yok. Kullanici ekranin belirli bir bolgesinde yukari/asagi kaydirarak sesi ayarlar. Gecici overlay gostergesi belirir.
Sol yari: volume. Sag yari: parlaklik (VLC modeli). Veya player alani uzerinde 2-parmak swipe.
Desktop: Uygulanamaz. Tablet: Mumkun (buyuk ekran). Mobil: Dogal ama ogrenme egrisi var.
y = x^4 (60dB aralik)if(x < 0.1) amp *= x*10<input type="range"> kullan (yerlesik ARIA)aria-label="Volume" ekle/* Reset */
input[type="range"] {
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
width: 100%;
height: 44px; /* Touch target, gorsel olarak degil! */
}
/* Track - Webkit (Chrome, Safari, Edge) */
input[type="range"]::-webkit-slider-runnable-track {
height: 4px;
background: #334155;
border-radius: 2px;
transition: height 0.15s;
}
input[type="range"]:hover::-webkit-slider-runnable-track {
height: 6px;
}
/* Track - Firefox */
input[type="range"]::-moz-range-track {
height: 4px;
background: #334155;
border-radius: 2px;
border: none;
}
/* Fill (dolu kisim) - Firefox'ta yerlesik */
input[type="range"]::-moz-range-progress {
background: #60a5fa;
border-radius: 2px;
height: 4px;
}
/* Thumb - Webkit */
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
margin-top: -4px;
opacity: 0;
transition: opacity 0.15s;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
input[type="range"]:hover::-webkit-slider-thumb {
opacity: 1;
}
/* Thumb - Firefox */
input[type="range"]::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
border: none;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}// Webkit'te ::-moz-range-progress yok
// JS ile gradient background kullan
function updateSliderFill(input) {
const pct = (input.value - input.min) / (input.max - input.min) * 100;
input.style.background = `linear-gradient(
to right,
#60a5fa 0%, #60a5fa ${pct}%,
#334155 ${pct}%, #334155 100%
)`;
}
// Muted durumda gri yap
function updateSliderMuted(input, isMuted) {
if (isMuted) {
input.style.background = '#334155';
} else {
updateSliderFill(input);
}
}// Slider pozisyonu [0, 1] -> Gercek amplitude [0, 1]
// x^4 yaklasimi (~60dB dynamic range)
function sliderToAmplitude(x) {
// x = slider pozisyonu (0.0 - 1.0)
if (x <= 0) return 0;
if (x >= 1) return 1;
// Sifir yakini icin lineer roll-off
if (x < 0.1) return x * 10 * Math.pow(0.1, 4);
return Math.pow(x, 4);
}
// Gercek amplitude -> Slider pozisyonu (ters)
function amplitudeToSlider(amp) {
if (amp <= 0) return 0;
if (amp >= 1) return 1;
return Math.pow(amp, 0.25); // 4. kök
}
// Kullanim:
// slider 50% = sliderToAmplitude(0.5) = 0.0625 (cok sessiz)
// slider 80% = sliderToAmplitude(0.8) = 0.4096 (orta)
// slider 100% = sliderToAmplitude(1.0) = 1.0 (tam)Kaynak: dr-lex.be/volumecontrols — Insan kulagi %50 slider pozisyonunu "yarim ses" olarak algilamaz (lineer'de ~%13 algilar). x^4 egrisi bu algiya yaklasir.
<!-- Alpine.js ile -->
<div class="flex items-center"
x-data="{ showSlider: false }"
@mouseenter="showSlider = true"
@mouseleave="setTimeout(() => showSlider = false, 300)">
<!-- Speaker Ikonu -->
<button @click="$store.player.toggleMute()"
class="w-9 h-9 flex items-center justify-center
text-white/60 hover:text-white transition-colors">
<i class="fas"
:class="{
'fa-volume-mute': $store.player.isMuted,
'fa-volume-off': !$store.player.isMuted && $store.player.volume < 30,
'fa-volume-down': !$store.player.isMuted && $store.player.volume >= 30 && $store.player.volume < 70,
'fa-volume-up': !$store.player.isMuted && $store.player.volume >= 70
}"></i>
</button>
<!-- Kaydirarak Acilan Slider -->
<div class="overflow-hidden transition-all duration-300 ease-out"
:style="showSlider ? 'width: 100px; opacity: 1' : 'width: 0; opacity: 0'">
<input type="range"
min="0" max="100" step="1"
:value="$store.player.volume"
@input="$store.player.updateVolume($event.target.value)"
@wheel.prevent="$store.player.updateVolume(
Math.max(0, Math.min(100, $store.player.volume + ($event.deltaY < 0 ? 5 : -5)))
)"
aria-label="Volume"
class="volume-slider w-[88px] mx-1.5" />
</div>
</div>Player Blade
resources/views/themes/muzibu/components/player.blade.php
Player JS
public/themes/muzibu/js/player/core/player-core.js
Volume State
Alpine.store('player').volume (0-100)
Mevcut Volume
Satir 288-292: Sadece mute/unmute butonu (slider yok!)
updateVolume()
player-core.js satir 2735 (mevcut, calisiyor)
setVolume()
player-core.js satir 2776 (event-based, mevcut)
Spotify'in inline slider'i + YouTube Music'in hover-show mantigi = En iyi kombinasyon.
-webkit-slider-thumb margin-top dikkatli ayarlaFinal Mockup — Pill Bar icinde Volume Kontrolu
Desktop (hover edin):
Mobil (slider gizli):
Mevcut mute butonunu hover-expand pattern ile degistir. input[type="range"] + Alpine x-data ile slider state.
Cross-browser range input stili. Webkit + Firefox + Safari thumb/track. Hover animasyonu. Dark theme renkleri.
4 seviye: muted, low (<30), medium (30-70), high (>70). Mevcut 2 seviye yetersiz.
Volume container uzerinde wheel event dinle. +5/-5 adim. preventDefault ile sayfa scroll onleme.
player-core.js icinde updateVolume()'a x^4 egrisi. Oncesi/sonrasi karsilastirmasi ile karar ver.
<768px: slider gizli, sadece ikon. ≥768px: hover-expand. ≥1024px: her zaman gorunur (opsiyonel).
Puppeteer ile basic test. Manuel Safari iPad test. Memory leak kontrolu (15 saat oturum).