为javascript音频播放器定制进度条

Question

我有两个轨道，加载到一个单一的 <audio> 当你点击播放这些曲目中的任何一个时。这似乎工作得很好。这些音轨中的每个音轨都有一个单独的 <progress> 场，但无论你玩的是什么轨道，你只能看到进度条在第一条轨道上移动。<progress> 领域。

有办法解决吗？

还有一个错误，当你暂停一首歌并继续播放时。总时间和当前时间文本字段在显示正确的totalcurrent时间之前，会在一瞬间显示一个 "Na "信息。

我如何才能阻止这种情况发生？

HTML

<audio id="globalAudio"></audio>

<div class="mp3Player" data-src="https://www.freesound.org/data/previews/338/338825_1648170-lq.mp3" data-pos="0">
    <button class="btnPlayPause button">Play</button>
    <span class="infoLabel">
        <span id="seekObjContainer">
            <progress id="seekbar" value="0" max="1"></progress>
        </span>
        <span class="start-time"></span>
        <span class="end-time"></span>
    </span>
</div>

<div class="mp3Player" data-src="http://www.lukeduncan.me/oslo.mp3" data-pos="0">
    <button class="btnPlayPause button">Play</button>
    <span class="infoLabel">
        <span id="seekObjContainer">
            <progress class="seekbar1" value="0" max="1"></progress>
        </span>
        <span class="start-time"></span>
        <span class="end-time"></span>
    </span>
</div>

JS

var globalAudio = document.getElementById("globalAudio");
var current = null;
var playingString = "<span>Pause</span>";
var pausedString = "<span>Play</span>";
$(document.body).on('click', '.btnPlayPause', function(e) {
  var target = this;

function calculateTotalValue(length) {
  var minutes = Math.floor(length / 60),
    seconds_int = length - minutes * 60,
    seconds_str = seconds_int.toString(),
    seconds = seconds_str.substr(0, 2),
    time = minutes + ':' + seconds;

  return time;
}

function calculateCurrentValue(currentTime) {
  var current_hour = parseInt(currentTime / 3600) % 24,
    current_minute = parseInt(currentTime / 60) % 60,
    current_seconds_long = currentTime % 60,
    current_seconds = current_seconds_long.toFixed(),
    current_time = (current_minute < 10 ? "0" + current_minute : current_minute) + ":" + (current_seconds < 10 ? "0" + current_seconds : current_seconds);

  return current_time;
}

function initProgressBar() {
  var length = globalAudio.duration;
  var current_time = globalAudio.currentTime;

  var totalLength = calculateTotalValue(length);
  jQuery(".end-time").html(totalLength);
  var currentTime = calculateCurrentValue(current_time);
  jQuery(".start-time").html(currentTime);

  var progressbar = document.getElementById('seekbar');
  progressbar.value = globalAudio.currentTime / globalAudio.duration;
  console.log(target);
}

if (current == target) {
  target.innerHTML = pausedString;
  target.parentNode.setAttribute('data-pos', globalAudio.currentTime); //start from paused
  globalAudio.pause();
  current = null;
} else {
  if (current != null) {
    current.innerHTML = pausedString;
    current.parentNode.setAttribute('data-pos', '0'); //reset position
    target.parentNode.setAttribute('data-pos', globalAudio.currentTime); //start from paused
  }
  current = target;
  target.innerHTML = playingString;
  globalAudio.src = target.parentNode.getAttribute('data-src');
  globalAudio.play();
  globalAudio.onloadeddata = function() {
    globalAudio.currentTime = parseFloat(target.parentNode.getAttribute('data-pos'));
    globalAudio.addEventListener("timeupdate",function(){ initProgressBar(); });
  };
}
});

这里是一个工作的例子，在这个 抚弄

谢谢你了

Answer 1

那是因为只有第一个 <progress> 标签有一个id。

<progress id="seekbar" value="0" max="1"></progress>
<progress class="seekbar1" value="0" max="1"></progress>

那么

var progressbar = document.getElementById('seekbar'); // <-- always getting the first progress tag
progressbar.value = globalAudio.currentTime / globalAudio.duration;

对于 NaN 问题出现的一瞬间，那是因为当加载一个源在一个 <audio> 标榜 duration 是未知的，直到浏览器检索到文件的元数据。虽然这 duration 未知，其值为 NaN (不是一个数字)。

你可以添加一个支票。

if (Number.isNaN(element.duration)) {
  // display 00:00 or whatever you want
}