Блог

Итак, я хочу создать функцию, которая при нажатии на индикатор выполнения изменит текущее время звука, я использую диапазон ввода для создания индикатора прогресса

  <div class="player__duration">
                <div class="player__duration--start"><p></p></div>
                <input class="player__duration--bar" type="range" name="" id="" step="1"  value="0" >
                <div class="player__duration--end"><p></p></div>
            </div>
  

это мой javascript

 let counter = 0
let song = new Audio()
song.src = songs[counter].src

let changeTime = () =>{
    let input = document.querySelector("input")
    input.addEventListener("change",()=>{
        song.currentTime = input.value
    })
}
let play = () =>{
    let playBtn = document.querySelector(".player__btn--play")
    let pauseBtn = document.querySelector(".player__btn--pause")
    playBtn.addEventListener("click",()=>{
        pauseBtn.style.display="block"
        playBtn.style.display="none"
        song.play()
        updateProgressBar()
        totalTime()
    })
}

let pause = () =>{
    let playBtn = document.querySelector(".player__btn--play")
    let pauseBtn = document.querySelector(".player__btn--pause")
    pauseBtn.addEventListener( "click", ()=>{
        playBtn.style.display = "block"
        pauseBtn.style.display = "none"
        song.pause()
    })
}
let checkTime = (i) =>{
    if(i<10){
        i = "0"  i
    }
    return i
}

let updateProgressBar =()=>{
    let input = document.querySelector("input")
    let currentT = document.querySelector(".player__duration--start")
    let range = input.value
    input.max = song.duration
    song.addEventListener("timeupdate",()=>{
        range = Math.floor(song.currentTime)
        input.value = range
        let minute = Math.floor(range / 60)
        let second = Math.floor(range % 60)
        minute = checkTime(minute)
        second = checkTime(second)
        currentT.innerText=minute   ":"  second
    })
}

let totalTime = () =>{
    let totalTime = document.querySelector(".player__duration--end")
    let minute = Math.floor(song.duration / 60)
    let second = Math.floor(song.duration % 60)
    minute = checkTime(minute)
    second = checkTime(second)
    totalTime.innerText = minute   ":"  second
}
play()
changeTime()
pause()
  

Поэтому я использую событие изменения для диапазона ввода, чтобы обновлять текущее время звука всякий раз, когда я нажимаю на индикатор выполнения, он работает нормально, но иногда мне приходится дважды щелкнуть или трижды щелкнуть, чтобы заставить его работать, и я не знаю почему, как я могу изменить текущее время одним щелчком мыши. Спасибо!