Skip to main content
se añadieron 339 caracteres en el cuerpo
Origen Enlace
jachguate
  • 32.1k
  • 8
  • 41
  • 69
  • Cada vez que se llama a playMusic() intentas crear un nuevo elemento de audio. Si esto funcionara, no solo terminarías con múltiples elementos creados a la vez, sino que nunca vas a pausar uno de los creados anteriormente, pues no guardas ninguna referencia a ellos ni haces búsquedas.

  • El elemento de audio, luego de su creación, toma algún tiempo para poder comenzar a reproducir el audio, básicamente el tiempo necesario para descargar los primeros segundos del stream que va a reproducir, por lo que la llamada a play() podría fallar y definitivamente no tendría sentido llamar a pause() sobre un objeto que no se está reproduciendo.

    Los elementos que heredan de HTMLMediaElement, como el HTMLAudioElement creado al llamar a Audio(), tienen una serie de propiedades con las que puedes evaluar su estado actual, si se está reproduciendo, etc. No me baso en ellas para la solución a tu pregunta, para no complicar las cosas, sino que dejaré el mecanismo de la variable click (terrible nombre para una variable por cierto), solo para mantener esto lo más simple posible.

  • Olvidaste poner los paréntesis en la llamada a new Audio();

  • Te falta el ; en la línea donde asignas la propiedad src del nuevo audio.

  • La lógica del if está incompleta, pues siempre llamas al método play() y, cuando click tiene valor 2, inmediatamente llamas a pause() (sobre el mismo audio al que acabas de llamar al método play(). Esto es lo que provoca el error que ves... pero ese error es secundario, como creo que ha quedado claro con esta explicación.

  • Cada vez que se llama a playMusic() intentas crear un nuevo elemento de audio. Si esto funcionara, no solo terminarías con múltiples elementos creados a la vez, sino que nunca vas a pausar uno de los creados anteriormente, pues no guardas ninguna referencia a ellos ni haces búsquedas.

  • El elemento de audio, luego de su creación, toma algún tiempo para poder comenzar a reproducir el audio, básicamente el tiempo necesario para descargar los primeros segundos del stream que va a reproducir, por lo que la llamada a play() podría fallar y definitivamente no tendría sentido llamar a pause() sobre un objeto que no se está reproduciendo.

    Los elementos que heredan de HTMLMediaElement, como el HTMLAudioElement creado al llamar a Audio(), tienen una serie de propiedades con las que puedes evaluar su estado actual, si se está reproduciendo, etc. No me baso en ellas para la solución a tu pregunta, para no complicar las cosas, sino que dejaré el mecanismo de la variable click (terrible nombre para una variable por cierto), solo para mantener esto lo más simple posible.

  • Olvidaste poner los paréntesis en la llamada a new Audio();

  • Te falta el ; en la línea donde asignas la propiedad src del nuevo audio.

  • Cada vez que se llama a playMusic() intentas crear un nuevo elemento de audio. Si esto funcionara, no solo terminarías con múltiples elementos creados a la vez, sino que nunca vas a pausar uno de los creados anteriormente, pues no guardas ninguna referencia a ellos ni haces búsquedas.

  • El elemento de audio, luego de su creación, toma algún tiempo para poder comenzar a reproducir el audio, básicamente el tiempo necesario para descargar los primeros segundos del stream que va a reproducir, por lo que la llamada a play() podría fallar y definitivamente no tendría sentido llamar a pause() sobre un objeto que no se está reproduciendo.

    Los elementos que heredan de HTMLMediaElement, como el HTMLAudioElement creado al llamar a Audio(), tienen una serie de propiedades con las que puedes evaluar su estado actual, si se está reproduciendo, etc. No me baso en ellas para la solución a tu pregunta, para no complicar las cosas, sino que dejaré el mecanismo de la variable click (terrible nombre para una variable por cierto), solo para mantener esto lo más simple posible.

  • Olvidaste poner los paréntesis en la llamada a new Audio();

  • Te falta el ; en la línea donde asignas la propiedad src del nuevo audio.

  • La lógica del if está incompleta, pues siempre llamas al método play() y, cuando click tiene valor 2, inmediatamente llamas a pause() (sobre el mismo audio al que acabas de llamar al método play(). Esto es lo que provoca el error que ves... pero ese error es secundario, como creo que ha quedado claro con esta explicación.

Origen Enlace
jachguate
  • 32.1k
  • 8
  • 41
  • 69

Hay varios inconvenientes con tu código:

  • Cada vez que se llama a playMusic() intentas crear un nuevo elemento de audio. Si esto funcionara, no solo terminarías con múltiples elementos creados a la vez, sino que nunca vas a pausar uno de los creados anteriormente, pues no guardas ninguna referencia a ellos ni haces búsquedas.

  • El elemento de audio, luego de su creación, toma algún tiempo para poder comenzar a reproducir el audio, básicamente el tiempo necesario para descargar los primeros segundos del stream que va a reproducir, por lo que la llamada a play() podría fallar y definitivamente no tendría sentido llamar a pause() sobre un objeto que no se está reproduciendo.

    Los elementos que heredan de HTMLMediaElement, como el HTMLAudioElement creado al llamar a Audio(), tienen una serie de propiedades con las que puedes evaluar su estado actual, si se está reproduciendo, etc. No me baso en ellas para la solución a tu pregunta, para no complicar las cosas, sino que dejaré el mecanismo de la variable click (terrible nombre para una variable por cierto), solo para mantener esto lo más simple posible.

  • Olvidaste poner los paréntesis en la llamada a new Audio();

  • Te falta el ; en la línea donde asignas la propiedad src del nuevo audio.

Tratando de aplicar correctivos a estos problemas, lo que hago es:

  • Crear un único elemento de audio al comenzar (ojo con los () y ;).
  • Al inicio de la rutina playOrPause() evalúo la propiedad readyState para determinar si ya está listo el control de audio para comenzar a hacer play/pause. Si no lo está, se sale de la rutina sin cambiar el valor de isPlaying.
  • Si hubiese algún error, lo obtengo al evaluar la propiedad error, que, de estar asignado, nos devuelve un MediaError
  • Finalmente, la rutina entra a la lógoca para hacer play/pause, como entiendo que deseas.

let isPlaying = 0;
let audio;
console.log("creando audio");
audio = new Audio();
audio.src = "Nicholas%20Gunn%20-%20Nature.mp3"

function playOrPause() {
  if (audio.readyState < 2 /*HAVE_CURRENT_DATA*/) {
    console.log("no está listo aún");
    if (audio.error) {
      console.log("error : " + audio.error.code + " -> " + audio.error.message);
    }
    return(0);
  }
  isPlaying = isPlaying + 1;
  console.log(isPlaying);
  if (isPlaying == 1) {
    audio.play();
    console.log("playing");
  } else {
    audio.pause();
    console.log("paused");
    isPlaying = 0;
  }
  return(isPlaying);
}
  <button onclick="playOrPause()">¡hazme clic!</button>