БЛОГ НА HUSL


Как сделать чтобы строка прогресса следовала за ползунком?

Автор вопроса: Daniel

Если нажать на плей, и не много подождать будет видно что ползунок идет дальше, а вот прогресс бар - нет. Если же я буду двигать ползунок мышкой то все хорошо. Как сделать чтобы прогресс шел вместе с ползунком?

    const src = document.getElementById("audio-2").src;
    const audio = new Audio(src);
    const playBtn = document.querySelector("button");
    const progressEl = document.querySelector('input[type="range"]');
    let mouseDownOnSlider = false;

    audio.addEventListener("loadeddata", () => {
        progressEl.value = 0;
    });
    audio.addEventListener("timeupdate", () => {
        if (!mouseDownOnSlider) {
            progressEl.value = audio.currentTime / audio.duration * 100;
        }
    });
    audio.addEventListener("ended", () => {
        playBtn.textContent = "►";
    });

    playBtn.addEventListener("click", () => {
        audio.paused ? audio.play() : audio.pause();
        playBtn.textContent = audio.paused ? "►" : "❚❚";
    });

    progressEl.addEventListener("change", () => {
        const pct = progressEl.value / 100;
        audio.currentTime = (audio.duration || 0) * pct;
    });
    progressEl.addEventListener("mousedown", () => {
        mouseDownOnSlider = true;
    });
    progressEl.addEventListener("mouseup", () => {
        mouseDownOnSlider = false;
    });

for (let e of document.querySelectorAll('input[type="range"].slider-progress')) {
 e.style.setProperty('--value', e.value);
 e.style.setProperty('--min', e.min == '' ? '0' : e.min);
 e.style.setProperty('--max', e.max == '' ? '100' : e.max);
 e.addEventListener('input', () => e.style.setProperty('--value', e.value));
}
input[type=range].styled-slider {
  -webkit-appearance: none;
}

/*progress support*/
input[type=range].styled-slider.slider-progress {
  --range: calc(var(--max) - var(--min));
  --ratio: calc((var(--value) - var(--min)) / var(--range));
  --sx: calc(0.5 * 0.7em + var(--ratio) * (100% - 0.7em));
}

input[type=range].styled-slider:focus {
  outline: none;
}

/*webkit*/
input[type=range].styled-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0.7em;
  height: 0.7em;
  border-radius: 1em;
  background: linear-gradient(to right, #F88700, #F35200);
  border: none;
  box-shadow: 0 0 2px black;
  margin-top: calc(max((0.5em - 1px - 1px) * 0.5,0px) - 0.7em * 0.5);
}

input[type=range].styled-slider::-webkit-slider-runnable-track {
  height: 0.5em;
  border: 1px solid #b2b2b2;
  border-radius: 0.5em;
  background: #FFF9E6;
  box-shadow: none;
}

input[type=range].styled-slider::-webkit-slider-thumb:hover {
  background: #FF8C4A;
}

input[type=range].styled-slider:hover::-webkit-slider-runnable-track {
  background: #FFF9E6;
  border-color: #9A9A9A;
}

input[type=range].styled-slider::-webkit-slider-thumb:active {
  background: linear-gradient(to right, #F88700, #F35200);
}

input[type=range].styled-slider:active::-webkit-slider-runnable-track {
  background: #FFF9E6;
  border-color: #c1c1c1;
}

input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
  background: linear-gradient(#F8A100,#F8A100) 0/var(--sx) 100% no-repeat, #FFF9E6;
}

input[type=range].styled-slider.slider-progress:hover::-webkit-slider-runnable-track {
  background: linear-gradient(#F8A100,#F8A100) 0/var(--sx) 100% no-repeat, #FFF9E6;
}

input[type=range].styled-slider.slider-progress:active::-webkit-slider-runnable-track {
  background: linear-gradient(#F8A100,#F8A100) 0/var(--sx) 100% no-repeat, #FFF9E6;
}

/*mozilla*/
input[type=range].styled-slider::-moz-range-thumb {
  width: 0.7em;
  height: 0.7em;
  border-radius: 1em;
  background: linear-gradient(to right, #F88700, #F35200);
  border: none;
  box-shadow: 0 0 2px black;
}

input[type=range].styled-slider::-moz-range-track {
  height: max(calc(0.5em - 1px - 1px),0px);
  border: 1px solid #b2b2b2;
  border-radius: 0.5em;
  background: #FFF9E6;
  box-shadow: none;
}

input[type=range].styled-slider::-moz-range-thumb:hover {
  background: #FF8C4A;
}

input[type=range].styled-slider:hover::-moz-range-track {
  background: #FFF9E6;
  border-color: #9A9A9A;
}

input[type=range].styled-slider::-moz-range-thumb:active {
  background: linear-gradient(to right, #F88700, #F35200);
}

input[type=range].styled-slider:active::-moz-range-track {
  background: #FFF9E6;
  border-color: #c1c1c1;
}

input[type=range].styled-slider.slider-progress::-moz-range-track {
  background: linear-gradient(#F8A100,#F8A100) 0/var(--sx) 100% no-repeat, #FFF9E6;
}

input[type=range].styled-slider.slider-progress:hover::-moz-range-track {
  background: linear-gradient(#F8A100,#F8A100) 0/var(--sx) 100% no-repeat, #FFF9E6;
}

input[type=range].styled-slider.slider-progress:active::-moz-range-track {
  background: linear-gradient(#F8A100,#F8A100) 0/var(--sx) 100% no-repeat, #FFF9E6;
}

/*ms*/
input[type=range].styled-slider::-ms-fill-upper {
  background: transparent;
  border-color: transparent;
}

input[type=range].styled-slider::-ms-fill-lower {
  background: transparent;
  border-color: transparent;
}

input[type=range].styled-slider::-ms-thumb {
  width: 0.7em;
  height: 0.7em;
  border-radius: 1em;
  background: linear-gradient(to right, #F88700, #F35200);
  border: none;
  box-shadow: 0 0 2px black;
  margin-top: 0;
  box-sizing: border-box;
}

input[type=range].styled-slider::-ms-track {
  height: 0.5em;
  border-radius: 0.5em;
  background: #FFF9E6;
  border: 1px solid #b2b2b2;
  box-shadow: none;
  box-sizing: border-box;
}

input[type=range].styled-slider::-ms-thumb:hover {
  background: #FF8C4A;
}

input[type=range].styled-slider:hover::-ms-track {
  background: #FFF9E6;
  border-color: #9A9A9A;
}

input[type=range].styled-slider::-ms-thumb:active {
  background: linear-gradient(to right, #F88700, #F35200);
}

input[type=range].styled-slider:active::-ms-track {
  background: #FFF9E6;
  border-color: #c1c1c1;
}

input[type=range].styled-slider.slider-progress::-ms-fill-lower {
  height: max(calc(0.5em - 1px - 1px),0px);
  border-radius: 0.5em 0 0 0.5em;
  margin: -1px 0 -1px -1px;
  background: #F8A100;
  border: 1px solid #b2b2b2;
  border-right-width: 0;
}

input[type=range].styled-slider.slider-progress:hover::-ms-fill-lower {
  background: #F8A100;
  border-color: #9A9A9A;
}

input[type=range].styled-slider.slider-progress:active::-ms-fill-lower {
  background: #F8A100;
  border-color: #c1c1c1;
}
     <button type="button" class="btn btn-warning">▶</button>
     <input class="styled-slider slider-progress" id="audio-2" src="https://www.kozco.com/tech/LRMonoPhase4.wav" type="range" value="0" min="0" max="100" step="1">


Источник

Ответы (2 шт):

Автор решения: Александр Рогонов

e.addEventListener('input'); не срабатывает когда вы меняете значение через JS. Вот так будет работать.

const valueChanged = (e) => (e.style.setProperty('--value', e.value))

    const src = document.getElementById("audio-2").src;
    const audio = new Audio(src);
    const playBtn = document.querySelector("button");
    const progressEl = document.querySelector('input[type="range"]');
    let mouseDownOnSlider = false;

    audio.addEventListener("loadeddata", () => {
        progressEl.value = 0;
    });
    audio.addEventListener("timeupdate", () => {
        if (!mouseDownOnSlider) {
            progressEl.value = audio.currentTime / audio.duration * 100;
valueChanged(progressEl)
        }
    });
    audio.addEventListener("ended", () => {
        playBtn.textContent = "►";
    });

    playBtn.addEventListener("click", () => {
        audio.paused ? audio.play() : audio.pause();
        playBtn.textContent = audio.paused ? "►" : "❚❚";
    });

    progressEl.addEventListener("change", () => {
        const pct = progressEl.value / 100;
        audio.currentTime = (audio.duration || 0) * pct;
    });
    progressEl.addEventListener("mousedown", () => {
        mouseDownOnSlider = true;
    });
    progressEl.addEventListener("mouseup", () => {
        mouseDownOnSlider = false;
    });

for (let e of document.querySelectorAll('input[type="range"].slider-progress')) {
 e.style.setProperty('--value', e.value);
 e.style.setProperty('--min', e.min == '' ? '0' : e.min);
 e.style.setProperty('--max', e.max == '' ? '100' : e.max);
 e.addEventListener('input', () => valueChanged(e));
}
input[type=range].styled-slider {
  -webkit-appearance: none;
}

/*progress support*/
input[type=range].styled-slider.slider-progress {
  --range: calc(var(--max) - var(--min));
  --ratio: calc((var(--value) - var(--min)) / var(--range));
  --sx: calc(0.5 * 0.7em + var(--ratio) * (100% - 0.7em));
}

input[type=range].styled-slider:focus {
  outline: none;
}

/*webkit*/
input[type=range].styled-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0.7em;
  height: 0.7em;
  border-radius: 1em;
  background: linear-gradient(to right, #F88700, #F35200);
  border: none;
  box-shadow: 0 0 2px black;
  margin-top: calc(max((0.5em - 1px - 1px) * 0.5,0px) - 0.7em * 0.5);
}

input[type=range].styled-slider::-webkit-slider-runnable-track {
  height: 0.5em;
  border: 1px solid #b2b2b2;
  border-radius: 0.5em;
  background: #FFF9E6;
  box-shadow: none;
}

input[type=range].styled-slider::-webkit-slider-thumb:hover {
  background: #FF8C4A;
}

input[type=range].styled-slider:hover::-webkit-slider-runnable-track {
  background: #FFF9E6;
  border-color: #9A9A9A;
}

input[type=range].styled-slider::-webkit-slider-thumb:active {
  background: linear-gradient(to right, #F88700, #F35200);
}

input[type=range].styled-slider:active::-webkit-slider-runnable-track {
  background: #FFF9E6;
  border-color: #c1c1c1;
}

input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
  background: linear-gradient(#F8A100,#F8A100) 0/var(--sx) 100% no-repeat, #FFF9E6;
}

input[type=range].styled-slider.slider-progress:hover::-webkit-slider-runnable-track {
  background: linear-gradient(#F8A100,#F8A100) 0/var(--sx) 100% no-repeat, #FFF9E6;
}

input[type=range].styled-slider.slider-progress:active::-webkit-slider-runnable-track {
  background: linear-gradient(#F8A100,#F8A100) 0/var(--sx) 100% no-repeat, #FFF9E6;
}

/*mozilla*/
input[type=range].styled-slider::-moz-range-thumb {
  width: 0.7em;
  height: 0.7em;
  border-radius: 1em;
  background: linear-gradient(to right, #F88700, #F35200);
  border: none;
  box-shadow: 0 0 2px black;
}

input[type=range].styled-slider::-moz-range-track {
  height: max(calc(0.5em - 1px - 1px),0px);
  border: 1px solid #b2b2b2;
  border-radius: 0.5em;
  background: #FFF9E6;
  box-shadow: none;
}

input[type=range].styled-slider::-moz-range-thumb:hover {
  background: #FF8C4A;
}

input[type=range].styled-slider:hover::-moz-range-track {
  background: #FFF9E6;
  border-color: #9A9A9A;
}

input[type=range].styled-slider::-moz-range-thumb:active {
  background: linear-gradient(to right, #F88700, #F35200);
}

input[type=range].styled-slider:active::-moz-range-track {
  background: #FFF9E6;
  border-color: #c1c1c1;
}

input[type=range].styled-slider.slider-progress::-moz-range-track {
  background: linear-gradient(#F8A100,#F8A100) 0/var(--sx) 100% no-repeat, #FFF9E6;
}

input[type=range].styled-slider.slider-progress:hover::-moz-range-track {
  background: linear-gradient(#F8A100,#F8A100) 0/var(--sx) 100% no-repeat, #FFF9E6;
}

input[type=range].styled-slider.slider-progress:active::-moz-range-track {
  background: linear-gradient(#F8A100,#F8A100) 0/var(--sx) 100% no-repeat, #FFF9E6;
}

/*ms*/
input[type=range].styled-slider::-ms-fill-upper {
  background: transparent;
  border-color: transparent;
}

input[type=range].styled-slider::-ms-fill-lower {
  background: transparent;
  border-color: transparent;
}

input[type=range].styled-slider::-ms-thumb {
  width: 0.7em;
  height: 0.7em;
  border-radius: 1em;
  background: linear-gradient(to right, #F88700, #F35200);
  border: none;
  box-shadow: 0 0 2px black;
  margin-top: 0;
  box-sizing: border-box;
}

input[type=range].styled-slider::-ms-track {
  height: 0.5em;
  border-radius: 0.5em;
  background: #FFF9E6;
  border: 1px solid #b2b2b2;
  box-shadow: none;
  box-sizing: border-box;
}

input[type=range].styled-slider::-ms-thumb:hover {
  background: #FF8C4A;
}

input[type=range].styled-slider:hover::-ms-track {
  background: #FFF9E6;
  border-color: #9A9A9A;
}

input[type=range].styled-slider::-ms-thumb:active {
  background: linear-gradient(to right, #F88700, #F35200);
}

input[type=range].styled-slider:active::-ms-track {
  background: #FFF9E6;
  border-color: #c1c1c1;
}

input[type=range].styled-slider.slider-progress::-ms-fill-lower {
  height: max(calc(0.5em - 1px - 1px),0px);
  border-radius: 0.5em 0 0 0.5em;
  margin: -1px 0 -1px -1px;
  background: #F8A100;
  border: 1px solid #b2b2b2;
  border-right-width: 0;
}

input[type=range].styled-slider.slider-progress:hover::-ms-fill-lower {
  background: #F8A100;
  border-color: #9A9A9A;
}

input[type=range].styled-slider.slider-progress:active::-ms-fill-lower {
  background: #F8A100;
  border-color: #c1c1c1;
}
     <button type="button" class="btn btn-warning">▶</button>
     <input class="styled-slider slider-progress" id="audio-2" src="https://www.kozco.com/tech/LRMonoPhase4.wav" type="range" value="0" min="0" max="100" step="1">

→ Ссылка
Автор решения: Юрий

Привяжи событие не к прогрессу - а к ползунку (seek) и обновляй их вместе, по следующему принципу:

function skipAhead(e) {
  var skipTo = e.target.dataset.seek ? e.target.dataset.seek : e.target.value;
  video.currentTime = skipTo;
  progres.value = skipTo;
  seek.value = skipTo;
}
seek.addEventListener("input", skipAhead);

function updateProgres(){ 
  if(!video.paused && !video.stoped){
    progres.value = video.currentTime;
    seek.value = video.currentTime;
  } 
}
video.addEventListener("timeupdate", updateProgres);
→ Ссылка

licensed under cc by-sa 3.0 with attribution.