JSFiddle - React, Tailwind, and code Playground

HTML

<audio id="player" src="http://upload.wikimedia.org/wikipedia/commons/f/f2/Median_test.ogg"> </audio>

<a id="button" title="button">Reproducir Sonido</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("Parar Sonido");

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


    });
});