HTML5 Listeli Radyo Çalar

HTML5 Audio etiketi ile listeli radyo oynatıcı yapımı.Daha önce HTML5 Radyo Çalar ile basitçe bir radyo oynatıcı eklemiştik. Şimdi radyo listesi oluşturup ziyaretçiye bizde mevcut olanlar dahilinde dilediği radyoyu dinleme imkanı verelim. Bitince bu olacak:



Öncelikle html5-radyo-calar adlı bir klasör oluşturup buraya liste.js dosyası açıp aşağıdaki kodlarlar ile radyolarıma ait adresleri ekliyorum.

Yukarıda radyolarımı radlis değişkenine dizi şeklinde ekledim ki radyolarım için menü koyarken buradan rahatça çekip ekleyebileyim.

Şimdi de radyoyu siteme eklemek için kullanacağım index.js dosyası açıp yazmaya başlıyorum. Önce tasarımda kullanacağım style dosyasını ekliyorum. (isteyen bu dosyaya da yazabilir)

Radyom için divler ile bir çerçeve yapı oluşturuyorum, style kodları ile özelleştireceğim.

Radyomu otomatik başlayacak şekilde ayarladım, istemezsem 5. satırdaki autoplay ifadesini silerim. Başlangıçta bar bar bağırıp ziyaretçi kulağımı çınlatmasın diye sesini kısığa alıyorum.

Farkettiyseniz audio etiketinde adres yok. Sayfayı yenilemeden, radyolarmenu divine radyolar menüsü ekleyip oradan onclick ile adres alıp aşağıdaki kod ile oynatacağım.

Chrome kullanıyorum, audio etiketine koyduğum autoplay yetiyor, ama yine de javascript içine 19. satırı ekledim. Her tarayıcıyı deneyemiyorum, çalarsa ekime kadar.  Ve şimdi radyolarmenu divine radyolar menüsünü ekliyorum.

Açıldığında çalmasını istersem radyoya başlangıçta bir radyo tanımlıyorum.

Javascript kısmı bitti. Bundan sonra klasörümde style.css dosyası açıp içine aşağıdaki kodları ekliyorum.

Listeli radyo çalarım bitti.

Bu yaptığım uygulamada radyo linkine tıklandığında o link seçili kalsın istedim. Aklıma gelen bir yöntem linkleri forma ait gizlenmiş radio elemanları ile yapıp seçili olanları css ile boyamak. Bense burada javascript ile yaptım. Önce bütün linkleri kendime göre default yapıp arkasındaki komut ile seçileni boyadım. Öyle yapmak isterseniz index.js dosyasında 20. satırdan sonra aşağıdaki kodları ekleyebilirsiniz.

Radyomu eklemek istediğm yere aşağıdaki kodu ekleyerek işlemimi bitiriyorum.

Kaynak kodları ile uğraşmayın diye çeşitli örneklerin css ve js dosyalarının adreslerini demo altlarına ekledim.

Değişik örnekler için demolar sayfama bakabilirsiniz.
Hazır dosyaları indirmek isterseniz :
Dosyalar üyelere özeldir: Giriş Yap
Yeni misin? Kayıt ol

You may also like...

1 Response

  1. 23 Eylül 2022

    […] bir radyo listesi ile yapmak istersek HTML5 Listeli Radyo Çalar çalışmasını […]

Bir cevap yazın