Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

211
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda