Şarkı ve Lyrics Sistemi /* Genel Stiller - body etiketi için stil eklenmedi */ /* YouTube oynatıcı için responsive yapı */ #oynatici-alani { position: relative; padding-bottom: 56.25%; /* 16:9 oranı */ height: 0; overflow: hidden; max-width: 800px; margin: 20px auto; background-color: black; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } #oynatici { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Şarkı sözleri kapsayıcısı */ #sozler-kapsayici { max-width: 800px; margin: 20px auto; background-color: #ffffff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 20px; height: 400px; /* Sabit yükseklik */ overflow-y: auto; /* Dikey kaydırma */ transition: height 0.3s ease; /* Yükseklik geçişi */ } /* Şarkı sözleri satırları */ .sozler-satir { font-size: 18px; line-height: 1.5; color: #333; margin-bottom: 15px; word-break: break-word; cursor: pointer; font-weight: normal; transition: background-color 0.3s, color 0.3s; } /* Geçmiş satırlar */ .sozler-satir.passed { color: #9ca3af; } /* Mevcut satır */ .sozler-satir.current { background-color: #e0e7ff; color: #1f2937; font-weight: bold; } /* Türkçe anlam */ .sozler-anlam { font-size: 16px; color: #4b5563; margin-left: 20px; } /* Küçük ekranlar için */ @media (max-width: 768px){ #oynatici-alani { max-width: 100%; } #sozler-kapsayici { max-width: 100%; padding: 15px; height: 300px; /* Mobil cihazlarda daha iyi görünüm için */ } .sozler-satir { font-size: 16px; } .sozler-anlam { font-size: 14px; } } /* İkon stili */ .icon { font-size: 20px; cursor: pointer; margin: 5px; } /* İkon kapsayıcısı */ #icon-container { max-width: 800px; margin: 10px auto; text-align: center; } 📜 Tümünü Göster 🔄 Otomatiğe Al var oynatici; var sozler=[{"time":0,"text":"Let's dance in style, let's dance for a while","meaning":"Şık bir şekilde dans edelim, dans edelim bir süre daha"},{"time":20.8,"text":"Heaven can wait, we're only watching the skies","meaning":"Cennet bekleyebilir, biz sadece gökyüzünü izleyeceğiz"},{"time":24.5,"text":"Hoping for the best but expecting the worst","meaning":"En iyisini umuyoruz ama en kötüsünü bekliyoruz"},{"time":27.5,"text":"Are you gonna drop the bomb or not?","meaning":"Bombayı patlatacak mısın yoksa patlatmayacak mısın?"},{"time":31.2,"text":"Let us die young or let us live forever","meaning":"Genç mi ölelim yoksa sonsuza dek mi yaşayalım?"},{"time":34.2,"text":"We don't have the power but we never say never","meaning":"Gücümüz yok ama asla pes etmeyiz"},{"time":38.1,"text":"Sitting in a sandpit, life is a short trip","meaning":"Kumdan kaledeyiz, hayat kısa bir yolculuk"},{"time":42,"text":"The music's for the sad men","meaning":"Müzik ise hüzünlü insanlar için"},{"time":45.5,"text":"Can you imagine when this race is won","meaning":"Hayal edebiliyor musun bu yarışı kazandığımızda"},{"time":49,"text":"Turn our golden faces into the sun","meaning":"Altın yüzlerimizi güneşe çevireceğimizi"},{"time":52.2,"text":"Praising our leaders, we're getting in tune","meaning":"Liderlerimizi övüyor, eşlik ediyoruz"},{"time":55,"text":"The music's played by the, the mad man","meaning":"Deli adamın çaldığı müziğe"},{"time":59,"text":"Forever young, I want to be forever young","meaning":"Ömür boyu genç, ömür boyu genç olmak istiyorum"},{"time":66,"text":"Do you really want to live forever?","meaning":"Gerçekten sonsuza dek yaşamak mı istiyorsun?"},{"time":69,"text":"Forever, and ever","meaning":"Sonsuza dek, hiç durmadan"},{"time":73,"text":"Forever young, I want to be forever young","meaning":"Ömür boyu genç, ömür boyu genç olmak istiyorum"},{"time":80,"text":"Do you really want to live forever?","meaning":"Gerçekten sonsuza dek yaşamak mı istiyorsun?"},{"time":85,"text":"Forever young","meaning":"Ömür boyu genç"},{"time":91,"text":"Some are like water, some are like the heat","meaning":"Bazıları su gibidir, bazıları ateş"},{"time":94,"text":"Some are a melody and some are the beat","meaning":"Bazıları melodi gibidir, bazıları ritim"},{"time":98,"text":"Sooner or later, they all will be gone","meaning":"Er ya da geç, hepsi yok olacak"},{"time":101,"text":"Why don't they stay young?","meaning":"Neden genç kalmazlar?"},{"time":104,"text":"It's so hard to get old without a cause","meaning":"Bir sebep olmadan yaşlanmak zor"},{"time":108,"text":"I don't want to perish like a fading horse","meaning":"Gençliğimin solmasını istemiyorum"},{"time":112,"text":"Youth's like diamonds in the sun","meaning":"Gençlik, güneşteki elmaslar gibidir"},{"time":115,"text":"And diamonds are forever","meaning":"Sonsuza dek ışıldarlar"},{"time":118.2,"text":"So many adventures couldn't happen today","meaning":"Yaşayamadığımız pek çok macerayı"},{"time":121.8,"text":"So many songs we forgot to play","meaning":"Çalmayı unuttuğumuz nice şarkıyı"},{"time":125.2,"text":"So many dreams swinging out of the blue","meaning":"Birden beliren nice ilhamı"},{"time":129,"text":"We'll let 'em come true","meaning":"Gerçekleştireceğiz"},{"time":131.7,"text":"Forever young","meaning":"Ömür boyu genç"},{"time":134,"text":"I want to be forever young","meaning":"Ömür boyu genç olmak istiyorum"},{"time":138.8,"text":"Do you really want to live forever?","meaning":"Gerçekten sonsuza dek yaşamak istiyor musun?"},{"time":141.8,"text":"Forever, and ever","meaning":"Sonsuza dek, hiç durmadan"},{"time":146,"text":"Forever young","meaning":"Ömür boyu genç"},{"time":148.3,"text":"I want to be forever young","meaning":"Ömür boyu genç olmak istiyorum"},{"time":153,"text":"Do you really want to live forever?","meaning":"Gerçekten sonsuza dek yaşamak istiyor musun?"},{"time":156.4,"text":"Forever, and ever","meaning":"Sonsuza dek, hiç durmadan"},{"time":160,"text":"Forever young","meaning":"Ömür boyu genç"},{"time":162,"text":"I wanna be forever young","meaning":"Ömür boyu genç olmak istiyorum"},{"time":167,"text":"Do you really want to live forever? ","meaning":"Gerçekten sonsuza dek mi yaşamak istiyorsun?"}]; var mevcutSatir=-1; var lastMevcutSatir=-1; var sozlerGuncelleInterval; // Şarkı sözlerini oluşturma fonksiyonu sozlerOlustur(); // Tümünü göster ikonuna tıklama document.getElementById('show-all-icon').addEventListener('click', function(){ document.getElementById('sozler-kapsayici').style.height='auto'; document.getElementById('sozler-kapsayici').style.overflowY='visible'; this.style.display='none'; document.getElementById('scroll-icon').style.display='inline'; }); // Scroll moduna dön ikonuna tıklama document.getElementById('scroll-icon').addEventListener('click', function(){ document.getElementById('sozler-kapsayici').style.height='400px'; document.getElementById('sozler-kapsayici').style.overflowY='auto'; this.style.display='none'; document.getElementById('show-all-icon').style.display='inline'; }); function onYouTubeIframeAPIReady(){ oynatici=new YT.Player('oynatici', { height: '315', width: '560', videoId: 'oNjQXmoxiQ8', // Buraya YouTube video ID'sini girin playerVars: { autoplay: 0, controls: 1, mute: 0, disablekb: 0, rel: 0, showinfo: 0, modestbranding: 1 }, events: { 'onStateChange': oynaticiDurumDegisti } }); } function oynaticiDurumDegisti(event){ if(event.data==YT.PlayerState.PLAYING||event.data==YT.PlayerState.PAUSED||event.data==YT.PlayerState.BUFFERING){ if(!sozlerGuncelleInterval){ sozleriGuncelle(); sozlerGuncelleInterval=setInterval(sozleriGuncelle, 200); } }else{ clearInterval(sozlerGuncelleInterval); sozlerGuncelleInterval=null; } } function sozleriGuncelle(){ if(!oynatici||!oynatici.getCurrentTime) return; var currentTime=oynatici.getCurrentTime(); for (var i=0; i < sozler.length; i++){ if(currentTime >=sozler[i].time&&(!sozler[i + 1]||currentTime < sozler[i + 1].time)){ if(mevcutSatir!==i){ mevcutSatir=i; sozlerStilGuncelle(); } break; } } } function sozlerStilGuncelle(){ if(lastMevcutSatir >=0){ var lastLineEl=document.getElementById('soz-' + lastMevcutSatir); if(lastLineEl){ lastLineEl.classList.remove('current'); lastLineEl.classList.add('passed'); } } var currentLineEl=document.getElementById('soz-' + mevcutSatir); if(currentLineEl){ currentLineEl.classList.add('current'); currentLineEl.classList.remove('passed'); // Mevcut satırı ekranın ortasında göstermek için otomatik kaydırma var sozlerKapsayici=document.getElementById('sozler-kapsayici'); var containerHeight=sozlerKapsayici.clientHeight; var currentLineOffset=currentLineEl.offsetTop - sozlerKapsayici.offsetTop; var scrollPosition=currentLineOffset - (containerHeight / 2) + (currentLineEl.clientHeight / 2); // Yumuşak kaydırma için özel fonksiyon animateScroll(sozlerKapsayici, scrollPosition, 300); } lastMevcutSatir=mevcutSatir; } function animateScroll(element, to, duration){ var start=element.scrollTop; var change=to - start; var startTime=performance.now(); function animateScrollStep(currentTime){ var elapsedTime=currentTime - startTime; var progress=Math.min(elapsedTime / duration, 1); element.scrollTop=start + change * easeInOutQuad(progress); if(progress < 1){ requestAnimationFrame(animateScrollStep); } } requestAnimationFrame(animateScrollStep); } function easeInOutQuad(t){ return t < 0.5 ? 2*t*t:-1+(4-2*t)*t; } function sozlerOlustur(){ var sozlerKapsayici=document.getElementById('sozler-kapsayici'); sozlerKapsayici.innerHTML=''; for (var i=0; i < sozler.length; i++){ var lyricDiv=document.createElement('div'); lyricDiv.className='sozler-satir'; lyricDiv.id='soz-' + i; lyricDiv.setAttribute('data-time', sozler[i].time); var textDiv=document.createElement('div'); textDiv.textContent=sozler[i].text; var meaningDiv=document.createElement('div'); meaningDiv.className='sozler-anlam'; meaningDiv.textContent=sozler[i].meaning; lyricDiv.appendChild(textDiv); lyricDiv.appendChild(meaningDiv); lyricDiv.addEventListener('click', function(){ var time=parseFloat(this.getAttribute('data-time')); oynatici.seekTo(time, true); }); sozlerKapsayici.appendChild(lyricDiv); } }