Почему mp3 плеер корректно работает в FireFox, но не работает в других браузерах?

Question

Проблема в перемотке длительности трека. Это работает в FireFox, но не работает в других браузерах. Я даже кеш сбрасывал, в FireFox все работает корректно. Почему это происходит и как это исправить?

JavaScript

let audio = document.getElementById('audio');
let progress = document.getElementById('progress');
let progressBar = document.getElementById('progressBar')


//Progress bar
audio.ontimeupdate = function (){
    progress.value = parseFloat(Math.floor(audio.currentTime * 100 / audio.duration) + "%")
}

//Set progress bar
progress.addEventListener('click', function(e){
   res = (e.offsetX / progress.clientWidth) * audio.duration
   document.getElementById("audio").currentTime = res;
   console.log("e.offsetX: " + e.offsetX + "\nprogress.clientWidth: " + progress.clientWidth + "\naudio.duration: " + audio.duration + "\nres:" + res + "\naudio.currentTime: " + audio.currentTime)
})

HTML

<a class="aTrigger" data-title="{{ beat.title }}" data-active="" data-audio="{{ beat.beat.url }}"><i class='fa fa-play'></i></a>
<div class="time-control" id="progressBar">
   <input id="progress" type="range"  style="height: 5px; border-radius: 5px;">
</div>

Answer 1

Свойство progress.value можно не только читать, но и задавать. Поэтому более грамотно будет объявление переменной res переписать так:

let res = progress.value / 100 *  audio.duration;

И вообще лучше использовать не onclick(), а oninput().

А зачем нужен parseFloat(Math.floor( ... ))? Первая функция должна извлекать дробное число из текстового выражения, но имеется дело не с выражением, а целым числом, полученным функцией Math.floor().

БЛОГ НА HUSL

Почему mp3 плеер корректно работает в FireFox, но не работает в других браузерах?

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