1

lo que tengo es un codigo que al presionar un boton reproduce una cancion y si el usuario vuelve a darle se pause, todo con un mismo boton. Solo que sale un error de :

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

let click=0;
function playMusic() {
    click=click+1
    console.log(click);
    let audio = new Audio;
    audio.src = "nameSong.mp3"
    audio.play();
    if(click==2){
        audio.pause();
        click=0;
        return click
        
    }

3 respuestas 3

1

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.

  • 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.

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>

1
  • 1
    ya quedó, muchas gracias Commented el 12 abr. 2021 a las 3:23
1

Significa:

  1. Si el audio está pausado: if(x.paused)
  2. Estará en play: x.play()
  3. Si no: else
  4. Estará pausado: x.paused(); [Su estado normal]

function btn(){
var x=document.getElementById("aud");
if(x.paused){
x.play()}
else{
x.pause();
}
}
<audio id="aud" src="https://www.w3schools.com/html/horse.mp3" controls=""></audio>
<br><button onclick="btn()">Play/Pause</button>

0

El error te dice claramente que tu solicitud fue interrumpida por llamar a pause(). Está entrando dentro del if que tienes ejecutando audio.pause(), o audio.pause() lo tienes en otro lado que hace que se esté ejecutando, Sería bueno que intentaras mostrar un poco más tu código

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.