#javascript #html #html5-audio
#javascript #HTML #html5-аудио
Вопрос:
Итак, я хочу создать функцию, которая при нажатии на индикатор выполнения изменит текущее время звука, я использую диапазон ввода для создания индикатора прогресса
<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()
Поэтому я использую событие изменения для диапазона ввода, чтобы обновлять текущее время звука всякий раз, когда я нажимаю на индикатор выполнения, он работает нормально, но иногда мне приходится дважды щелкнуть или трижды щелкнуть, чтобы заставить его работать, и я не знаю почему, как я могу изменить текущее время одним щелчком мыши. Спасибо!
Комментарии:
1. Привет и добро пожаловать в StackOverlow! Я знаю, что это ваш первый вопрос, и я здесь, чтобы помочь. Для того, чтобы кто-то мог вам помочь, вы можете сделать несколько вещей, чтобы помочь им: — Удалите весь избыточный код, оставив только минимальный объем кода, необходимый для воспроизведения проблемы. — Предоставьте рабочий пример, используйте stackblitz.com или что-то подобное, чтобы предоставить работающий пример проблемы. Сообществу будет намного проще помочь вам с вашей проблемой, и это окажет больше помощи будущим пользователям! Добро пожаловать в сообщество 🙂
2. спасибо, да, я новичок в StackOverflow, в следующий раз я буду более осторожен