Youtube videolarını ses oynatıcısı olarak kullanalım


Youtube videosunun sesini sayfamıza gömelim

Bir youtube videosunun ses dosyasını sayfamızda çalmak istersek belkide herkesin ilk aklına gelecek şey ; youtube videosunu Mp3 şekline çevirmek (ki birçok onlike converter mevcut) ve Soundcloud gibi bir audio hosting

sitesine upload etmektir sonrasında tek yapmamız gereken şey sayfamıza kodlarını ekleyeceğimiz bir Mp3 player bulmaktır (googlede aratırsanız bolca mevcut) lakin bu yaklaşımın en sakıncalı tarafı yüksek olasılıkla telif hakkı sebebi ile google ile davalık olmamızdır. Oysa bu işi yapmanın çok daha yasal ve kolay bir yolu var , bu yaklaşımda Youtubenin resmi API sini kullanacağız ve herhangi bir dönüştürme işlemi yapmayacağız , bu yöntemde istediğimiz herhangi bir youtube videosunun kodlarını web sayfamıza ekleyebilir ve kullanıcının bir tıkla ses dosyasını (Video değil) oynatmasına veya durdurmasına izin verebiliriz , ilaveten bu teknikle youtube videosunun ses dosyasını arka fon müziği olarak ta kullanabilir ve bunu bir döngü (Loop) ile çalabiliriz.

Youtube ses dosyasını web sayfasına eklemek

İşlem oldukça basit olup tek adımdan oluşmaktadır , sayfamızda ses dosyasını oynatmak istediğimiz youtube videosunun ID sini bir kenara not alalım (genelde 11 karakterden oluşur)

youtube id

Sonraki adımda Aşağıdaki kodları web sayfamızın istediğimiz bir yerine ekleyelim

<div data-video="VIDEO_ID"  
         data-autoplay="0"         
         data-loop="1"             
         id="youtube-audio">
  </div>
  <script src="https://www.youtube.com/iframe_api"></script>
  <script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>

Üstte Not aldığımız bu ID yi kodlarda “VIDEO_ID” kısmına yazalım , bunun dışında ihtiyaçlarımıza göre düzenleyebileceğimiz birkaç parametre daha mavcuttur mesela:
data-autoplay değerini 1 yaparsak sayfa açılır açılmaz youtubenin ses dosyası oynamaya başlayacaktır.
data-loop değerini 1 yaparsak şarkı (Ses dosyası) elle durdurulana kadar sürekli tekrar edecektir. Bu yaklaşımda Youtube videosu bir IFRAME oynatıcı tarafından Render edilerek hem mobil hemde masaüstünde sorunsuz çalması sağlanmaktadır slında yapılan şey son derece basittir youtube video boyutu “0” pixel olarak ayarlanıp , kullanıcı oynatma butonuna tıkladığında arka planda video başlamaktadır. Kodların kullanıldığı örnek uygulama için tıklayınız

NOT: Üstteki örnek kodlarda bulunan JavaScript dosyaları Github serverinde bulunmaktadır , gerekli dosyaları ve javascript dosyasını Buradan indirebilirsiniz.



Yorum Ekle

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

CAPTCHA