shustry icon

html5 favourite radios

shustry | PRO | 01/30/14 07:51:43 AM UTC | 0 ⭐ | 200 👁️ | Never ⏰ | []
HTML 5 |

0 B

|

None

|

0 👍

/

0 👎

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