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" >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>