shustry

html5 favourite radios

Jan 30th, 2014
285
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 1.68 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset=utf-8>
  5.     <link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>
  6.     <style>
  7.         span.list {
  8.             cursor : pointer;
  9.             font-family: 'Audiowide', cursive;
  10.             display : block;
  11.             margin-top: 20px;
  12.             margin-bottom : 10px;
  13.         }
  14.         span.active { color:blue; }
  15.         #radiolist {}
  16.     </style>
  17. </head>
  18. <body>
  19.     <audio id="radio" autoplay="false" type="audio/mpeg">Обновите браузер</audio>
  20.     <div id="radiolist"></div>
  21.     <script>
  22.         var radiolist=[
  23.             { "label" : "Radio ROKS", "src" : "http://online-radioroks.tavrmedia.ua/RadioROKS" },
  24.             { "label" : "Europa plus [ua]", "src" : "http://cast.europaplus.ua/europaplus" },
  25.             { "label" : "Hit FM [ua]", "src" : "http://online-hitfm.tavrmedia.ua/HitFM" },
  26.             { "label" : "Off", "src" : "" }
  27.     ];
  28.         (function (){ radiolist.forEach(function(e){
  29.             var el = document.createElement('span');
  30.             el.setAttribute('class','list');
  31.             el.setAttribute('val',e.src);
  32.             el.setAttribute('onclick', '(function(){ var radio = document.getElementById(\'radio\'); radio.setAttribute(\'src\',\''+e.src+'\'); l = document.getElementsByClassName(\'list\'); for (var i = 0; i < l.length; i ++) { l[i].className = \'list\' + (l[i].getAttribute(\'val\') == \''+e.src+'\' ? \' active\': \'\'); }  })();');
  33.            if(document.all) { el.innerText = e.label; } else { el.textContent = e.label; }
  34.            document.getElementById('radiolist').appendChild(el);
  35.        });})();
  36.    </script>
  37. </body>
  38. </html>
Advertisement
Add Comment
Please, Sign In to add comment