Estoy intentando crear un reproductor de música en HTML,JS,CSS pero cuándo se ejecuta el evento onclick del play hago una manipulación de las clases con removeClass() y addClass() para la parte visual del HTML y así conseguir el típico play y pause en la misma etiqueta, pero cuándo intento ejecutar el evento onclick del pause no funciona. ¿Alguna sugerencia?
let audio = document.querySelector('#audio');
audio.volume = 0.3;
let tiempo;
let audio_id;
$(document).ready(function () {
//Iniciar la reproducción de una canción
$('.fa-play-circle').on('click', function () {
let cancion = $(this).siblings('input:hidden');
audio.src = cancion.val();
$(this).removeClass('fa-play-circle').addClass('fa-pause-circle');
audio.play();
});
//Pausa la reproducción de una canción
$('.fa-pause-circle').on('click', function () {
audio.pause();
tiempo = audio.currentTime;
console.log("Tiempo: " + tiempo);
});
//Parar la reproducción de una canción
$('.fa-stop-circle').on('click', function () {
audio.pause();
audio.src = "";
tiempo = 0;
});
});
<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="container-fluid">
<div class="row mx-auto" id="playlist">
<?php while($single = $singles->fetch_object()): ?>
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 border-top destacados text-center pt-2 pb-3">
<span class="float-left"><?php echo($single->titulo);?></span>
<a href="<?=base_url?><?php echo($single->archivo_musical)?>"></a>
<span class="float-right">
<i class="far fa-play-circle"></i>
<!-- <i class="far fa-pause-circle"></i>
<i class="far fa-stop-circle"></i> -->
<input type="hidden" name="audio" id="<?php echo("audio_".$single->id)?>" value="<?=base_url?><?php echo($single->archivo_musical)?>">
<!--<i class="far fa-pause-circle"></i>-->
</span>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
Después de mirar vuestras respuestas, se me ocurrió una manera muy parecida a lo respondido por vosotros y a la pregunta. La dejo por aquí para cualquier persona que lo necesite y para el futuro. Muchas gracias a todo aquel que me ha echado una mano.
let audio = new Audio();
audio.volume = 0.3;
let tiempo;
let audio_id = -1;
$(document).ready(function () {
//Iniciar la reproducción de una canción
$('.fa-play-circle').on('click', function () {
let cancion = $(this).siblings('input:hidden');
console.log(cancion.attr('id'));
if (audio_id == -1) {
audio.src = cancion.val();
audio_id = cancion.attr('id');
audio.play();
$(this).addClass('hide');
$(this).siblings('.fa-pause-circle').removeClass('hide')
}
else {
if (audio_id == cancion.attr('id')) {
audio.currentTime = tiempo;
tiempo = 0;
audio.play();
$(this).addClass('hide');
$(this).siblings('.fa-pause-circle').removeClass('hide')
}
else {
console.log("distintos");
audio_id = cancion.attr('id');
tiempo = 0;
audio.currentTime = 0.0;
audio.src = cancion.val();
audio.play();
$('.fa-pause-circle').addClass('hide');
$('.fa-play-circle').removeClass('hide');
$(this).addClass('hide');
$(this).siblings('.fa-pause-circle').removeClass('hide')
}
}
});
//Pausa la reproducción de una canción
$('.fa-pause-circle').on('click', function () {
let cancion = $(this).siblings('input:hidden');
audio_id = cancion.attr('id');
tiempo = audio.currentTime;
audio.pause();
$(this).addClass('hide');
$(this).siblings('.fa-play-circle').removeClass('hide')
console.log("Tiempo: " + tiempo + " y el audio_id es " + audio_id);
});
//Parar la reproducción de una canción
$('.fa-stop-circle').on('click', function () {
audio.pause();
audio.src = "";
tiempo = 0;
});
//Volver todo al inicio en el momento que se acabe una canción
$(audio).on('ended', function () {
audio_id = -1;
audio.currentTime = 0.0;
tiempo = 0;
$('.fa-pause-circle').addClass('hide');
$('.fa-play-circle').removeClass('hide');
});
});
.hide{
display: none;
}
<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="container-fluid">
<div class="row mx-auto" id="playlist">
<?php while($single = $singles->fetch_object()): ?>
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 border-top destacados text-center pt-2 pb-3">
<span class="float-left"><?php echo($single->titulo);?></span>
<a href="<?=base_url?><?php echo($single->archivo_musical)?>"></a>
<span class="float-right">
<i class="far fa-play-circle" ></i>
<i class="hide far fa-pause-circle"></i>
<!-- <i class="far fa-stop-circle"></i> -->
<input type="hidden" name="audio" id="<?php echo("audio_".$single->id)?>" value="<?=base_url?><?php echo($single->archivo_musical)?>">
<!--<i class="far fa-pause-circle"></i>-->
</span>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
</div>