JSFiddle - React, Tailwind, and code Playground

HTML

<audio id="player" src="http://audio.micronemez.com:8000/micronemez-radio.ogg"> </audio>

<a id="button" title="button">play sound</a>

CSS

a {
    background: #ccc;
    cursor: pointer;
    border-top: solid 2px #eaeaea;
    border-left: solid 2px #eaeaea;
    border-bottom: solid 2px #777;
    border-right: solid 2px #777;
    padding: 5px 5px;           
    }

a.down {
    background: #bbb;
    border-top: solid 2px #777;
    border-left: solid 2px #777;
    border-bottom:solid 2px  #eaeaea;
    border-right: solid 2px #eaeaea;
    }

JavaScript

$(document).ready(function() {
    var playing = false;

    $('a#button').click(function() {
        $(this).toggleClass("down");

        if (playing == false) {
            document.getElementById('player').play();
            playing = true;
            $(this).text("stop sound");

        } else {
            document.getElementById('player').pause();
            playing = false;
            $(this).text("restart sound");
        }


    });
});