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.