Tengo una barra de búsqueda de audio personalizada en la que me gustaría hacer clic y hacer que el audio salte a esa sección. Este es mi código HTML de la barra de búsqueda de audio

 <audio src="" preload="auto" controls id="audioPlayer" ontimeupdate="updateTrackTime(this);" style="width: 0px; visibility: hidden ;"></audio> <div class="p-bar"> <div class="progress1" id="progress1"></div> </div>

Este es mi código CSS:

 .p-bar{ flex: ; width: 25%; height: 4px; background: #333333; } .progress1 { height:3px; background: whitesmoke; transition: width .1s linear; cursor: pointer; justify-self: left; left: 0; box-shadow: 1px 1px 2px white; }

Este es mi código JavaScript de la barra de búsqueda:

 var track = document.getElementById('audioPlayer'); var controlBtn = document.getElementById('play-pause'); var timer; var percent = 0; var audio = document.getElementById("audioPlayer"); audio.addEventListener("playing", function(_event) { var duration = _event.target.duration; advance(duration, audio); }); audio.addEventListener("pause", function(_event) { clearTimeout(timer); }); var advance = function(duration, element) { var progress = document.getElementById("progress1"); increment = 10/duration percent = Math.min(increment * element.currentTime * 10, 100); progress.style.width = percent+'%' startTimer(duration, element); } var startTimer = function(duration, element){ if(percent < 100) { timer = setTimeout(function (){advance(duration, element)}, 100); } }