<!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>
Comments