Обновление строки прогресса с использованием значений процента?

Question

Я создал пользовательский плеер, созданный для того, чтобы быть отзывчивым. Пока все работает нормально, за исключением того, что я не могу заставить аудио играть в том месте, где пользователь нажал на индикатор выполнения. Все обучающие программы, которые я видел для этого использования, используют значения пикселей, тогда как мой игрок использует проценты, поэтому, когда я устанавливаю barSize = 100 + '%';, он разбивает код, и я получаю сообщение об ошибке «Не удалось установить свойство currentTime на HTMLMediaElement: предоставленное двойное значение не равно -конечный».

HTML

<!-- PROGRESS BAR --> 
<div id="progress_bar"> 
    <div id="bar"></div> 
</div> 

JS код (прогресс бар)

// PROGRESS BAR 

// audio display 
var progress = document.getElementById('bar'); 
//click area 
var audioBar = document.getElementById('progress_bar'); 
var barSize = 100 + '%'; 

audio.addEventListener('timeupdate', updateProgress, false); 


function updateProgress() { 
    if (audio.currentTime > 0) { 
     var value = 0; 
     value = Math.floor((100/audio.duration) * audio.currentTime); 

     progress.style.width = value + '%'; 
    }  
    else{ 
     $('#play').html('<img src="img/play.png" width="70" height="70" />'); 

     $(curTimeDisplay).html('0:00'); 

     progress.style.width = 0; 
    } 

} 

// CHANGING TIME ON PROGRESS BAR 

$('#progress_bar').bind('click', function (e) { 
    var $div = $(e.target); 
    var $display = $div.find('#progress_bar'); 

    var offset = $div.offset(); 
    var x = e.clientX - offset.left; 

    //$('#bar').width(x); 

    var newtime = x*audio.duration/barSize; 

    audio.currentTime = newtime; 

    progress.style.width = x + '%'; 
}); 

CSS

#progress_bar { 
border:1px solid #500012; 
margin:1em 0; 
cursor:pointer; 
background:#f2f2f2; 
width:100%; 
height:20px; 
display:inline-block; 
padding:0; 
} 

#bar { 
background:#77001A; 
height:20px; 
display:inline-block; 
float:left; 
width:0%; 
} 

Любая помощь приветствуется :) спасибо!

Answer 1

Ключ в сообщении об ошибке. Он хочет получить двойное значение, и ваш barSize var вычисляется как строка при его инициализации. Это происходит, когда вы добавляете + '%' к любому числу - javascript изменит это значение с числового на строковое значение. Выполнение математических операций на строке даст вам «NaN».

Но в этом случае вы хотите, чтобы медиа было пропорционально тому, где произошло щелчок, поэтому замените barSize на ширину пикселя общей площади бара. $ ('# progress_bar'). width() должен предоставить вам то, что вам нужно. Вы, вероятно, хотите переместить операнды выражения вокруг как так ...

Заменить

var newtime = x*audio.duration/barSize; 

С

var newtime = (x/$('#progress_bar').width()) * audio.duration; 

Узнают консоли и средства отладки в вашем браузере. Добавление контрольных точек и часов очень полезно с таким кодом.