0

Muy buenas a todos. En una web en la que estoy trabajando tengo un pequeño botón play/pause cuyo objetivo es que al hacer click la música comience a sonar y el "icono" se convierta en pause. A su vez, cuando la música esté sonando, si vuelves a pulsar en el, la música se pare y el botón vuelva a su estado "icono play". Este es mi código

<audio preload="none" id="myAudio1" src="audio/vienen-a-robar.mp3" type="audio/mpeg"></audio>

css

.play-btn{
 background-color: green;
 background-image: url(url/play.png);
 background-repeat: no-repeat;
 height: 23px;
 width: 23px;
}
.pause-btn{
 background-image: url(url/pause.png);
 background-repeat: no-repeat;
 height: 23px;
 width: 23px;
 background-color: red;
}

Javascript

var currentsound;
function play_pause(player) {
var myAudio = document.getElementById(player);
    if(myAudio.paused) {
    myAudio.play();
    } else{
    myAudio.pause();
    }
if ("play-btn"){
$( ".play-btn" ).addClass( "pause-btn" );
} else {
$( ".play-btn" ).removeClass( "pause-btn" );
}

Con este código consigo que el "Botón de play" se convierte en pause, pero no viceversa. ¿Alguien podría ayudarme? Muchas gracias de antemano.

Un saludo.

1 respuesta 1

3

Al parecer solo necesitas hacer unas modificaciones al código y listo

var currentsound;
function play_pause(player) {
   var myAudio = document.getElementById(player);
   if(myAudio.paused) {
       myAudio.play();
       $( ".play-btn" ).removeClass( "pause-btn" );
       $( ".play-btn" ).addClass( "play-btn" ); 
   } else{
       myAudio.pause();
       $( ".play-btn" ).removeClass( "play-btn" );
       $( ".play-btn" ).addClass( "pause-btn" ); 
   }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.