javascript - 我的音频时间进度条不起作用

Question

所以我想创建一个功能，当我点击进度条时，音频的当前时间会改变，我正在使用输入范围来制作进度条

 <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()

因此，每当我单击进度条时，我都会使用输入范围的更改事件来更新音频的当前时间，它工作正常，但有时我必须双击或三次单击才能使其工作，我不知道为什么，如何通过单击更改当前时间。谢谢 ！

标签： javascripthtmlhtml5-audio