JSFiddle - React, Tailwind, and code Playground

HTML

<style>#myPlayer{padding:0;list-style-type:none;width:20em}
#myPlayer li{margin:.4em;padding:1em 0 1em 3.5em;background:#fff;border:solid 2px #ddd;font-weight:bold;position:relative}
#myPlayer li:before{content:'';position:absolute;top:.3em;left:.3em;display:inline-block;width:35px;height:40px;background:url(http://i.imgur.com/fqtrebq.png) -37px 0 no-repeat}
#myPlayer .a{background:#ffe}
#myPlayer .a:before{background-position:2px 0}
</style><ul id="myPlayer">
  <li data-m="http://stream-dc1.radioparadise.com/ogg-96m">Radio Paradise</li>
  <li data-m="http://radio.goha.ru:8000/grind.fm">Grind FM</li>
  <li data-m="http://radio.eve-play.ru:8000/ruseveradio">RusEVERadio</li>
</ul><script>
(d=>{var s=myPlayer,q='querySelector',c='className';a=p=d.createElement('audio'),
l=t=>{a[c]=0;if(t===a)p.pause();else{a=t;t[c]='a';p.src=t.dataset.m;p.play()}}
s.appendChild(p);p.volume=0.4;l(s[q]('li'));[].map.call(s[q+'All']('li'),
t=>t.addEventListener('click',e=>l(e.target)))})(document)</script>