Botón de play/pause para poder aplicarles css

[Alexis88]

También puedes usar solo CSS para la elaboración y control visual del botón. Por ejemplo, los elementos <input> pueden ser marcados y desmarcados (checkbox, los radio button solo pueden ser marcados) o tomar el enfoque (text) cuando se da un clic en un elemento <label> cuyo atributo for posee como valor el id del <input> en cuestión.

Sabiendo esto, puedes usar un <label> como botón y un <input> de tipo checkbox para dos cosas: Determinar cuál será el texto que se mostrará en el botón y qué acción se ejecutará; si reproducir el sonido o pausarlo. Para el control del texto del botón, puedes usar el pseudo-elemento :before y la propiedad content, mientras que para la ejecución de la instrucción en JavaScript, puedes delegar una función al checkbox cuando este sea marcado o desmarcado, produciéndose el evento change.

Un pequeño ejemplo:

Código HTML:

<input type = "checkbox" id = "audio" />
<label id = "boton" for = "audio"></label>
 

Código CSS:

#audio{
    display: none;
}
 
#boton{
    padding: 2.5% 5%;
    background: limegreen;
    color: snow;
    font-size: 1.25rem;
    border: .1rem #FAFAD2 solid;
    border-radius: .75rem;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    transition: .5s;
}
 
#boton:active, #audio:checked ~ #boton{
    background: lightcoral;
}
 
#boton:before{
    content: "Play"
}
 
#audio:checked ~ #boton:before{
    content: "Pause";
}
 

Código Javascript:

var play = function(){
        console.log("El sonido se está reproduciendo");
        /* Aquí irá el script para reproducir el sonido */
    }, 
    pause = function(){
        console.log("El sonido ha sido pausado");
        /* Aquí irá el script para pausar el sonido */
    };
 
document.querySelector("#audio").addEventListener("change", function(){
    if (this.checked){
        play();
    }
    else{
        pause();
    }
}, false);
 

Como verás, oculto al checkbox y le aplico estilos al <label> para que tome una forma similar a la de un botón de forma rectangular. Mediante la pseudo-clase :checked, puedo trabajar con el checkbox cuando esté marcado y cuando esto suceda, afecto al botón, modificando su texto que previamente establecí mediante el pseudo-elemento :before y la propiedad content.

En cuando al script de JavaScript, defino las funciones que ejecutarán la reproducción y pausado del sonido, luego, tomo al checkbox y cuando se produzca un "cambio" en él, ejecuto una función en la cual verifico si está marcado o no y de acuerdo a eso ejecuto una función u otra.

DEMO

Saludos