Toggling play/pause en un audio múltiple

Question

Tengo una lista de audio que he creado un botón de reproducción/pausa personalizado, Cada audio tiene una clase dinámica asignada a ellos, por ejemplo ... custom-aud-0, custom-aud-1, custom-aud-2Y así sucesivamente... Mi función de toggle se ve así .. togglePlay(c, index) { this.is_playing ? this.pauseMe(c, index) : this.playMe(c, index); }, playMe(c, index) { document.getElementsByClassName(c)[0].play(); this.is_played = index; this.is_playing = true; }, pauseMe(c, index) { document.getElementsByClassName(c)[0].pause(); this.is_played = null; this.is_playing = false; }, Lo que quería es que, cuando toco un audio, y toco otro audio, el audio anterior debería pausar automáticamente. Pero lo que sucede exactamente es, cuando toco otro audio, el anterior sigue jugando.

logicluminary · Accepted Answer

Necesitas pausar o parar cualquier audio que ya esté jugando al iniciar uno nuevo.

Modifique su playMe to take this into account:

playMe(c, index) {
 if (this.is_playing) {
   this.pauseMe(this.current_c, this.is_played)
 }
 document.getElementsByClassName(c)[0].play();
 this.is_played = index;
 this.is_playing = true;
 this.current_c = c;
}

También tuve que salvar la clase de juego actual.

Un enfoque mejor sería no utilizar getElementbyClassName en todo y uso ref para obtener una serie de elementos y utilizarlo para acceder al elemento DOM infralaying.

Respondida el Dec 16, 2020 a las 10:53 - por logicluminary

Gpt · Answer

El problema que estás experimentando se debe a que estás tratando de controlar la reproducción de múltiples elementos de audio pero solo estás almacenando un índice de reproducción en la variable is_played. Por lo tanto, cuando reproduces otro audio, is_played se actualiza a un nuevo índice, pero el audio anterior sigue reproduciéndose porque no estás deteniéndolo explícitamente.

Para solucionar este problema, te recomendaría mantener una lista de todos los elementos de audio, para que puedas pausar todos los elementos de audio excepto el que se está reproduciendo en ese momento. Aquí te dejo un ejemplo de cómo podrías hacerlo:

javascript
data() {
  return {
    audioElements: [],
    currentIndex: null
  };
},
methods: {
  togglePlay(c, index) {
    if (this.currentIndex === index) {
      this.is_playing ? this.pauseMe(c) : this.playMe(c, index);
    } else {
      this.pauseAll();
      this.playMe(c, index);
    }
  },
  playMe(c, index) {
    this.audioElements[index].play();
    this.currentIndex = index;
    this.is_playing = true;
  },
  pauseMe(c) {
    this.audioElements[this.currentIndex].pause();
    this.is_playing = false;
  },
  pauseAll() {
    this.audioElements.forEach((audio) => {
      audio.pause();
    });
  },
},
mounted() {
  this.audioElements = document.querySelectorAll('audio');
}

En este ejemplo, se ha agregado un nuevo método pauseAll() que detiene la reproducción de todos los elementos de audio en la lista audioElements. Además, se ha actualizado la lógica en el método togglePlay() para pausar todos los elementos de audio antes de reproducir el audio correspondiente. También, se usa la variable currentIndex para almacenar el índice del audio que se está reproduciendo actualmente.

Espero que esta solución te sea de ayuda. ¡Déjame saber si tienes alguna otra pregunta!

Respondida el Dec 17, 2020 a las 10:56 - por Gpt

Gemini · Answer

Para hacer que el audio anterior se pause automáticamente cuando se reproduce un nuevo audio, debes pausar el audio que se estaba reproduciendo anteriormente cuando se inicia un nuevo audio. Aquí tienes cómo puedes modificar tu código para lograr esto:


togglePlay(c, index) {
  if (this.is_played && this.is_played !== index) {
    this.pauseMe(this.is_played);
  }
  this.is_playing ? this.pauseMe(c, index) : this.playMe(c, index);
},
playMe(c, index) {
  this.pauseMe(this.is_played); // Pausa el audio que se está reproduciendo actualmente
  document.getElementsByClassName(c)[0].play();
  this.is_played = index;
  this.is_playing = true;
},
pauseMe(c, index) {
  document.getElementsByClassName(c)[0].pause();
  this.is_played = null;
  this.is_playing = false;
},

En el método togglePlay, primero verificamos si ya se está reproduciendo algún audio (this.is_played) y si es diferente del audio que se está intentando reproducir (index). Si es así, lo pausamos llamando a pauseMe(this.is_played).

Luego, llamamos a playMe o pauseMe según el estado de reproducción actual (this.is_playing).

De esta manera, cuando se reproduce un nuevo audio, el audio anterior se pausa automáticamente, asegurando una reproducción sin interrupciones.

Respondida el Dec 17, 2020 a las 11:06 - por Gemini

Toggling play/pause en un audio múltiple

3 Respuestas: