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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
/* ibrahimay.net İBRAHİM AY */ let radlis = [ ["90lar" , "//37.247.98.8/stream/166/"], ["Alem FM" , "//turkmedya.radyotvonline.net/alemfmaac?"], ["Best FM" , "//best.canli-radyo.biz/;stream.mp3"], ["Bizim iller Radyo" , "//yayin2.yayindakiler.com:4078/stream"], ["CNN Türk" , "https://radyo.duhnet.tv/ak_dtvh_cnnturk?/"], ["Can Radyo" , "https://ip132.ozelip.com:7040/;"], ["Çağrı Fm" , "//yayin1.canliyayin.org:8202/stream"], ["Dersim Munzur Radyo" , "//yayin1.yayindakiler.com:3002/stream"], ["Doğan 21 FM" , "//yayin1.yayindakiler.com:3024/stream"], ["Dost Radyo" , "//yayin1.yayindakiler.com:3156/stream"], ["Efkar" , "//20863.live.streamtheworld.com/SC008_SO1_SC"], ["Flash FM" , "//yayin1.yayindakiler.com:3006/stream"], ["Gözde FM" , "//yayin1.yayindakiler.com:3056/stream"], ["Hayatmix FM" , "//marmarafm.canliyayinda.com:8008/stream"], ["İmbat FM" , "//38.96.148.39:8788/;"], ["Joy FM" , "//22183.live.streamtheworld.com/JOY_FM2_SC"], ["Kardelen FM" , "//dinle.kardelenfm.com:2000/stream"], ["Keskin FM" , "//yayin1.canliyayin.org:8286/stream"], ["Kordon FM" , "//38.96.148.39:8588/;"], ["Kral POP" , "//dygedge.radyotvonline.net/kralpop/playlist.m3u8"], ["Kuzey FM" , "//yayin1.yayindakiler.com:3028/stream"], ["Max FM" , "//live2.Radyotvonline.com:8025/stream"], ["Magic FM" , "//yayin1.yayindakiler.com:3032/stream"], ["Mamas FM" , "//mamasfm.com:8000/stream"], ["Meteorolojinin Sesi R." , "//radyomgm.canliyayinda.com/;stream.mp3"], ["Power Türk" , "//live.powerapp.com.tr/powerturk/mpeg/icecast.audio?/;stream.mp3"], ["Radyo 13" , "//yayin1.yayindakiler.com:3050/stream"], ["Radyo 2000" , "//yayin1.yayindakiler.com:3030/stream"], ["Radyo 7 Meal" , "//37.247.98.8/stream/33/"], ["Radyo Ak" , "//Radyoak.canliyayinda.com:8026/stream"], ["Radyo Alaturka" , "//yayin.jumboserver.net:9110/stream"], ["Radyo Erkan" , "//sunucu2.radyolarburada.com:8095/radio.mp3"], ["Radyo D" , "https://radyo.duhnet.tv/ak_dtvh_radyod"], ["Radyo Damar" , "//yayin.damarfm.com:8080/;stream/1"], ["Radyo Dem" , "//yayin.damarfm.com:8000/stream"], ["Radyo Denge" , "//yayin1.canliyayin.org:8278/stream"], ["Radyo Ender" , "//marmarafm.canliyayinda.com:80/stream"], ["Radyo Kafses" , "//radyo1.radyo-dinle.tc/8072/stream"], ["Radyo Kordelya" , "//38.96.148.39:8488/;"], ["Radyo Mola" , "//yayin1.yayindakiler.com:2018/stream"], ["Radyo Sevda Rüzgarı" , "//Radyo.sevdaruzgari.net:6386/stream"], ["Radyo Seymen" , "//yayin.radyoseymen.com.tr:1070/stream?/;stream.mp3"], ["Radyo Spor" , "//s12.canli-radyo.biz/stream/70/"], ["Sivas FM" , "//yayin1.canliyayin.org:8180/stream"], ["Süper FM" , "//25443.live.streamtheworld.com/SUPER_FM_SC?/;stream.mp3"], ["TRT FM" , "//nmicenotrt.mediatriple.net/trt_fm.aac"], ["Ulusal Radyo" , "//stream.guventechnology.com:2020/stream/ulusalradyo"], ["U.Arabesk" , "//stream.guventechnology.com:2020/stream/ulusalradyoarabesk"], ["U.Blues" , "//stream.guventechnology.com:2020/stream/ulusalradyoblues"], ["U.Caz" , "//stream.guventechnology.com:2020/stream/ulusalradyocaz"], ["U.Dünya" , "//stream.guventechnology.com:2020/stream/ulusalradyodunya"], ["U.Klasik" , "//stream.guventechnology.com:2020/stream/ulusalradyoklasik"], ["U.Latin" , "//stream.guventechnology.com:2020/stream/ulusalradyolatin"], ["U.Lounge" , "//stream.guventechnology.com:2020/stream/ulusalradyolounge"], ["U.Nostalji" , "//stream.guventechnology.com:2020/stream/ulusalradyonostalji"], ["U.Pop" , "//stream.guventechnology.com:2020/stream/ulusalradyopop"], ["U.Retro" , "//stream.guventechnology.com:2020/stream/ulusalradyoretro"], ["U.Rock" , "//stream.guventechnology.com:2020/stream/ulusalradyorock"], ["U.Sanat" , "//stream.guventechnology.com:2020/stream/ulusalradyosanat%20"], ["U.Slow" , "//stream.guventechnology.com:2020/stream/ulusalradyoslow"], ["U.Türkçe Rock" , "//stream.guventechnology.com:2020/stream/ulusalradyoturkcerock"], ["U.Türkçe Slow" , "//stream.guventechnology.com:2020/stream/ulusalradyoturkceslow"], ["U.Türkü" , "//stream.guventechnology.com:2020/stream/ulusalradyoturku"], ["Umut FM" , "//yayin1.canliyayin.org:8888/stream"], ["Vuslat FM" , "//yayin1.canliyayin.org:8282/stream"], ]; |
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)
|
1 2 |
/* ibrahimay.net İBRAHİM AY */ document.getElementById('radyoanadiv').innerHTML += `<link href="//domain/html5-radyo-calar/style.css" rel="stylesheet" />`; |
Radyom için divler ile bir çerçeve yapı oluşturuyorum, style kodları ile özelleştireceğim.
|
3 4 5 6 7 8 9 10 11 12 13 |
document.getElementById('radyoanadiv').innerHTML += `<div id="radyotablo"> <div id="radyosatir"> <div id="radyohucre"> <div id="radyobilgi"> <a id="radyobaslik"></a><a id="radyolink">©</a><br> <audio autoplay controls id="radyoplayer" preload="none" type="audio/mpeg">Your browser does not support the audio element.</audio> <div id="radyolarmenu"></div> </div> </div> </div> </div>`; |
Radyomu otomatik başlayacak şekilde ayarladım, istemezsem 7. 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.
|
14 15 |
var vid = document.getElementById("radyoplayer"); vid.volume = 0.2; |
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.
|
16 17 18 19 20 21 |
function radyom(radip,radyoplayerad,styver){ radyoplayer.setAttribute('src', radip); document.getElementById('radyoplayer').title = radyoplayerad; document.getElementById("radyoplayer").autoplay; document.getElementById('radyobaslik').innerHTML = radyoplayerad; } |
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.
|
22 23 24 |
for (let i = 0; i < radlis.length; i++) { document.getElementById('radyolarmenu').innerHTML += `<a onclick="radyom(\'`+radlis[i][1]+`\' , \'`+radlis[i][0]+`\' ,this);">`+radlis[i][0]+`</a>\n`; } |
Açıldığında çalmasını istersem radyoya başlangıçta bir radyo tanımlıyorum.
|
25 |
setTimeout(radyom('https://radyo.duhnet.tv/ak_dtvh_cnnturk?/' , 'CNN Türk'),1000); |
Javascript kısmı bitti. Bundan sonra klasörümde style.css dosyası açıp içine aşağıdaki kodları ekliyorum.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
:root { --anarenk: #fff; --rdywdth: 15em; --yaziboyut: 1em; --yazirenk: #2b1b0e; --yaziaile: monospace; } /*#radyoanadiv {display: grid; justify-content: center; color:var(--yazirenk);}*/ /* filter: invert(100%);*/ #radyotablo {display:table; width:var(--rdywdth); margin:10px; border: 1px dotted black; border-radius:20px;} #radyosatir {display:table-row;} #radyohucre {display:table-cell; padding:3px 10px;} #radyolink, #radyobaslik {text-decoration:none; font-size:var(--yaziboyut); color:var(--yazirenk);} #radyobaslik {} #radyolink {float:right;} #radyoplayer::-webkit-media-controls-panel{background-color:var(--anarenk);} #radyoplayer {margin:0 auto; width:var(--rdywdth); background-color:var(--anarenk);} #radyobilgi {cursor:pointer; background-color:var(--anarenk); color:var(--yazirenk); border:none; font-family:var(--yaziaile);} #radyolarmenu {background-color:var(--anarenk); width:var(--rdywdth);} #radyolarmenu a {display:block; text-decoration:none; font-family:var(--yaziaile); color:var(--yazirenk); font-size:var(--yaziboyut);} #radyolarmenu {height:15em; overflow-y:scroll;} /* Add the ability to scroll */ #radyolarmenu::-webkit-scrollbar {display:none;}/* Hide scrollbar for Chrome, Safari and Opera */ #radyolarmenu {-ms-overflow-style:none; scrollbar-width:none;}/* Hide scrollbar for IE, Edge and Firefox */ #radyolarmenu a:hover {background-color:#ddd; transition: 0.5s; font-size:calc(var(--yaziboyut)*1.2); filter: invert(100%);} |
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.
|
19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/* ibrahimay.net İBRAHİM AY */ const element = document.getElementById("radyolarmenu"); const nodes = element.getElementsByTagName("a"); if (!styver) {} else { for (let i = 0; i < nodes.length; i++) { nodes[i].style.backgroundColor = '#fff'; nodes[i].style.color = '#000'; nodes[i].style.fontSize = '1.2em'; } styver.style.fontSize = '1.5em'; styver.style.backgroundColor = '#000'; styver.style.color = '#fff'; styver.style.filter = ''; } |
Radyomu eklemek istediğm yere aşağıdaki kodu ekleyerek işlemimi bitiriyorum.
|
1 2 3 |
<script type="text/javascript" src="/html5-radyo-calar/liste.js"></script> <div id="radyoanadiv"></div> <script type="text/javascript" src="/html5-radyo-calar/index.js"></script> |
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
1 Response
[…] bir radyo listesi ile yapmak istersek HTML5 Listeli Radyo Çalar çalışmasını […]