1

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>

3 respuestas 3

3

Cuando registras el click en el pause aun no existe ningún elemento en el DOM con ese selector por eso no te funciona. Dicho selector existe cuando se clica sobre el play.

Si quieres que te funcione tu código tal cual lo tienes ahora deberías descomentar el icono de pause y ocultarlo con display: none. Y luego en el play mostrar el pause y ocular el play.

Algo así.

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).hide();
    $('.fa-pause-circle').removeClass('hide')
    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;
  });



});
.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>

1

Como respuesta adicional a lo que expone @hawks, existe una manera de vincular eventos a elementos que aun no se encuentran en el DOM:

JQuery:

 $(document).on('click', '.fa-pause-circle', function () {
   audio.pause();
   tiempo = audio.currentTime;
   console.log("Tiempo: " + tiempo);
 });

Usando de esta manera la función on(), conseguimos que el evento lo tenga el document (a efectos prácticos toda la página) y como este si existe en el DOM, a través del segundo parámetro de la función on() conseguimos que el evento lo dispare el descendiente de document que tenga la clase .fa-pause-circle

Parámetro opcional "selector" de la función on()

Type: String
A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

Referencia: on()

0

Puedes pasar el resultado que te da esta linea => php echo("audio_".$single->id) porque tu le estas diciendo que te seleccione el id "audio" pero creo que esa linea te devuelve un valor que no es igual a "audio" (let audio = document.querySelector('#audio'); audio.volume = 0.3;) y por eso el error te dice que no puede pillar la propiedad de algo que esta null porque no existe.

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.