3

.pod{
	margin: 25px;
	background: #ededed;
	flex-wrap: wrap;
}
.pod audio{
	margin: 10px;
	width: 450px;
}
<div class="pod">
	<audio src="sound/happy.mp3" controls="controls" preload="preload"></audio>
	<audio src="sound/sad.mp3" controls="controls" preload="preload"></audio>
</div>

Tengo estas lineas de código y necesito que al momento de reproducir una se pause la otra en caso de que esta se esté reproduciendo. Agradezco sus respuestas.

2
  • Que has intentado ? no solo busques que te hagan el trabajo, agrega el código que has intentado o errores que te estén deteniendo en el desarrollo , este tipos de preguntas son de baja calidad, y puedes obtener votos negativos. el 25 oct. 2019 a las 21:38
  • @FRANCISCOJ.BLANCO Muchísimas gracias por la sugerencia, la tendré en cuenta para futuras preguntas.
    – Samsepi
    el 28 oct. 2019 a las 2:40

1 respuesta 1

4

Te dejo una solucion en jQery, solo tenes que agregar esta funcion en un JS aparte, o en la etiqueta script como lo hago en el ejemplo mas abajo.

  // CUANDO SE DÉ PLAY EN CUALQUIER ELEMENTO CON LA ETIQUETA AUDIO
$("audio").on("play", function() {  
  // A TODOS LOS DEMAS AUDIOS QUE NO SEAN EL QUE SE PUSO EN PLAY      
$("audio").not(this).each(function(index, audio) {
        // LO PAUSO
        audio.pause();
    });
});

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<title>Document</title>
</head>
<body>
	<div class="pod">
	<audio src="https://ia800207.us.archive.org/29/items/MLKDream/MLKDream_64kb.mp3" controls="controls" preload="preload"></audio>
	<audio src="https://ia800207.us.archive.org/29/items/MLKDream/MLKDream_64kb.mp3" controls="controls" preload="preload"></audio>
</div>

<script>
$("audio").on("play", function() {
    $("audio").not(this).each(function(index, audio) {
        audio.pause();
    });
});
</script>
</body>
</html>

1
  • 1
    Muchísimas gracias compañero, estoy trabajando en una sección podcast y me topé con el problema que los audios se mezclaban. De antemano agradezco un montón tu ayuda.
    – Samsepi
    el 28 oct. 2019 a las 2:54

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.