Есть две кнопки: пуск и пауза. Как объединить эти две кнопки в одну со сменой иконки?
То есть, нажали на пуск - аудио
запущен, а иконка сменилась на паузу. При нажатии на кнопку ещё раз поток останавливается, а иконка опять меняется на пуск?
<audio id='player' src='http://бла-бла-радиопоток.mp3' />
<div style='position:absolute; top:154px; left:0px; z-index:11; width:104px; line-height:98px;'>
<button onclick='document.getElementById('player').play()'><font size='+1'><i aria-hidden='true' class='fa fa-play'/></font></button>
<button onclick='document.getElementById('player').pause()'><font size='+1'><i aria-hidden='true' class='fa fa-pause'/></font></button>
<button onclick='document.getElementById('player').volume+=0.1'><font size='+2'><i aria-hidden='true' class='fa fa-volume-up'/></font></button>
<button onclick='document.getElementById("player").volume=Math.max(document.getElementById("player").volume - 0.1, 0)'><font size='+2'><i aria-hidden='true' class='fa fa-volume-down'/></font></button>
<script>
var myVid = document.getElementById( & #39;player&# 39;);
myVid.volume = 0.1;
</script>
</div>