Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset=utf-8>
- <link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>
- <style>
- span.list {
- cursor : pointer;
- font-family: 'Audiowide', cursive;
- display : block;
- margin-top: 20px;
- margin-bottom : 10px;
- }
- span.active { color:blue; }
- #radiolist {}
- </style>
- </head>
- <body>
- <audio id="radio" autoplay="false" type="audio/mpeg">Обновите браузер</audio>
- <div id="radiolist"></div>
- <script>
- var radiolist=[
- { "label" : "Radio ROKS", "src" : "http://online-radioroks.tavrmedia.ua/RadioROKS" },
- { "label" : "Europa plus [ua]", "src" : "http://cast.europaplus.ua/europaplus" },
- { "label" : "Hit FM [ua]", "src" : "http://online-hitfm.tavrmedia.ua/HitFM" },
- { "label" : "Off", "src" : "" }
- ];
- (function (){ radiolist.forEach(function(e){
- var el = document.createElement('span');
- el.setAttribute('class','list');
- el.setAttribute('val',e.src);
- 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\': \'\'); } })();');
- if(document.all) { el.innerText = e.label; } else { el.textContent = e.label; }
- document.getElementById('radiolist').appendChild(el);
- });})();
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment