Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

212
Vistas
Actualice la posición del buscador (es decir, el rango de tipo de entrada html) mientras se reproduce un audio

Quiero que el control deslizante de rango cambie automáticamente durante la reproducción de audio.

 <input type="range" name="seek" id="seeker" min="0" max="100" value="0" > 

 let music = new Audio('https://www.computerhope.com/jargon/m/example.mp3'); music.play();
 <input type="range" name="seek" id="seeker" min="0" max="100" value="0" >

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Dado que new Audio() en realidad crea un nuevo elemento <audio> (simplemente no se inyecta en su DOM), aún puede escuchar eventos DOM. Para su caso de uso, querrá escuchar el evento timeupdate y obtener el progreso de la reproducción dividiendo la duration total del clip de audio con currentTime :

 music.addEventListener('timeupdate', () => { const percent = music.currentTime / music.duration * 100; seeker.value = percent; });

Sin embargo, si desea que los usuarios usen el elemento <input> para buscar a través del clip de audio (supuse que dado que nombró a su elemento #seeker ), entonces también deberá escuchar el evento de input del elemento. Puede usar matemáticas simples para calcular qué valor de currentTime debe establecer en el elemento de audio.

Aquí hay un ejemplo de prueba de concepto. Me he asegurado de que play() solo se active al hacer clic en un botón, ya que la mayoría de los navegadores no reproducen automáticamente los archivos de audio en la actualidad.

 const music = new Audio('https://www.computerhope.com/jargon/m/example.mp3'); const seeker = document.querySelector('#seeker'); music.addEventListener('timeupdate', () => { const percent = music.currentTime / music.duration * 100; seeker.value = percent; }); // Allow seeking seeker.addEventListener('input', (e) => { music.currentTime = e.target.value / 100 * music.duration; }); document.querySelector('#play-button').addEventListener('click', () => { music.play(); });
 <input type="range" name="seek" id="seeker" min="0" max="100" value="0"> <button type="button" id="play-button">Play</button>

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda