[SOLUCIONADO] Botón de play/pause para poder aplicarles css

[Luisa29]

Hola amigos, tengo un botón en mi web que activa un audio en streaming. Antes de pulsar muestra una imagen de un play y al activar la reproducción el botón cambia a pause. Como el código js lo que hace es cambiar una imagen por otra me gustaría que en vez de imagen fuesen botones hechos desde cero con css tanto el play como el pause. ¿Cómo podría modificar el código para ello?


Código js:

Código:

<script type="text/javascript">
   var audio, playbtn, mutebtn, seek_bar;
function initAudioPlayer(){
	audio = new Audio();
	audio.src = "http://streaming-audio";
	audio.loop = true;
	audio.play();
	// Set object references
	playbtn = document.getElementById("playpausebtn");
	// Add Event Handling
	playbtn.addEventListener("click",playPause);
	// Functions
	function playPause(){
		if(audio.paused){
		    audio.play();
		    playbtn.style.background = "url(pausa.png) no-repeat";
	    } else {
		    audio.pause();
		    playbtn.style.background = "url(play.png) no-repeat";
	    }
	}

}
window.addEventListener("load", initAudioPlayer);


    </script>

Código css:

Código:

	button{ border:none; cursor:pointer; outline:none; }
button#playpausebtn{
	background:url(pausa.png) no-repeat;
	width:68px;
	height:68px;
}

HTML:

Código:

 <button id="playpausebtn"></button>

A ver si me podéis echar una manita, tengo poca idea de js.

[nilburcion]

Vale, yo lo que haría sería crear dos clases una para el button play y la otra para el button pause y luego las cambiaría en JS.

Primero de todo, crea dos classes en CSS una para play y otra para pause:

Código CSS:

.pause {
/*Aqui el css que quieres aplicar al boton en modo pause*/
}
 
.play {
/*Aqui el css que quieres aplicar al boton en modo play*/
}
 

Luego para conseguir cambiarlos con JS hazlo así:

Código Javascript:

...
    function playPause(){
        if(audio.paused){
            audio.play();
            playbtn.setAttribute("class", "pause");
        } else {
            audio.pause();
            playbtn.setAttribute("class", "play");
        }
    }
 
...
 

[Luisa29]

nilburcion muchísimas gracias. Ahora parece que hay un error, al abrir la página no se muestra el botón, pero al acercar el ratón y pinchar aparece y ya funciona correctamente.
Es muy raro, a ver si he puesto algo mal, aquí te paso como lo he puesto:

Código:

button{ border:none; cursor:pointer; outline:none; }

}

.pause {
	background:url(pausa-sobre.png) no-repeat;
	width:68px;
	height:68px;
	}
.play {
	background:url(play-sobre.png) no-repeat;
	width:68px;
	height:68px;
	
	}

Código:

<script type="text/javascript">
  var audio, playbtn, mutebtn, seek_bar;
function initAudioPlayer(){
    audio = new Audio();
    audio.src = "http://streaming-audio";
    audio.loop = true;
    audio.play();

    // Set object references
    playbtn = document.getElementById("playpausebtn");

    // if it's not playing after calling play(), show the other icon
    if(audio.paused) {
        playbtn.setAttribute("class", "pause");        
    }

    // Add Event Handling
    playbtn.addEventListener("click",playPause);
    // Functions
    function playPause(){
        if(audio.paused){
            audio.play();
            playbtn.setAttribute("class", "pause");
        } else {
            audio.pause();
            playbtn.setAttribute("class", "play");
        }
    }

}
window.addEventListener("load", initAudioPlayer);
    </script>

[nilburcion]

No se a mí me funciona bien en una Mac OSX 10.11 con Chrome v.43 lo puse en un JSFiddle cambié sólo una línea (la 12) fijate. Prueba a ver si te va con este código a mi desde luego si:

https://jsfiddle.net/r9pgj1sg/

Si te sigue sin funcionar que sistema operativo y que navegador usas?

Suerte

[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

[Luisa29]

Muchísimas gracias a ambos, perdón por haber tardado en contestar, ambas soluciones perfectas.