在自定义 htm5 音频播放器的进度条（搜索栏）末尾添加移动友好 "dot grabb"

Question

我找到了一个自定义 html5 音频播放器并成功地重新设计了它，现在我想添加一个 "grabber" 以便能够在特定时间抓取和移动搜索栏进度线（移动设备友好).我想要 iOS 中的 "dot" 之类的东西能够抓住（触摸）并将进度条（搜索栏）移动到我想要的确切时间。

我是 JS 新手，我不知道如何使用此源代码完成此操作

完整代码CodePen

如何实现？

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 player = document.getElementById('player');
  var length = player.duration
  var current_time = player.currentTime;

  // calculate total length of value
  var totalLength = calculateTotalValue(length)
  jQuery(".end-time").html(totalLength);

  // calculate current value time
  var currentTime = calculateCurrentValue(current_time);
  jQuery(".start-time").html(currentTime);

  var progressbar = document.getElementById('seekObj');
  progressbar.value = (player.currentTime / player.duration);
  progressbar.addEventListener("click", seek);

  if (player.currentTime == player.duration) {
    $('#play-btn').removeClass('pause');
  }

  function seek(evt) {
    var percent = evt.offsetX / this.offsetWidth;
    player.currentTime = percent * player.duration;
    progressbar.value = percent / 100;
  }
};

function initPlayers(num) {
  // pass num in if there are multiple audio players e.g 'player' + i

  for (var i = 0; i < num; i++) {
    (function() {

      // Variables
      // ----------------------------------------------------------
      // audio embed object
      var playerContainer = document.getElementById('player-container'),
        player = document.getElementById('player'),
        isPlaying = false,
        playBtn = document.getElementById('play-btn');

      // Controls Listeners
      // ----------------------------------------------------------
      if (playBtn != null) {
        playBtn.addEventListener('click', function() {
          togglePlay()
        });
      }

      // Controls & Sounds Methods
      // ----------------------------------------------------------
      function togglePlay() {
        if (player.paused === false) {
          player.pause();
          isPlaying = false;
          $('#play-btn').removeClass('pause');

        } else {
          player.play();
          $('#play-btn').addClass('pause');
          isPlaying = true;
        }
      }
    }());
  }
}

initPlayers(jQuery('#player-container').length);

Answer 1

不确定是否可以用 "progress" 元素完成，但可以用 "range" 元素完成

首先，删除 "progress" 并添加此

<input id="seekObj" type="range" name="rng" min="0" step="0.25" value="0" onchange="seekAudio()" oninput="seekAudio()" style="width: 99%">

之后让我们添加一些 css 使其看起来像一个很好的搜索栏，在您的情况下您使用的是 "SCSS" 所以这里是代码

$background_color_1: #df7164;

input[type=range] {
    -webkit-appearance: none;
    -moz-apperance: none;
    border-radius: 6px;
    height: 6px;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #df7164), color-stop(0%, #F5D0CC));
    background-image: -moz-linear-gradient(left center, #DF7164 0%, #DF7164 0%, #F5D0CC 0%, #F5D0CC 100%);
    &:focus {
        outline: none;
        border: none;
    }
    &::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        background-color: $background_color_1;
        height: 13px;
        width: 13px;
        border-radius: 50%;
    }
    &::-moz-range-thumb {
        -moz-appearance: none !important;
        background-color: $background_color_1;
        border: none;
        height: 13px;
        width: 13px;
        border-radius: 50%;
    }
}
input[type="range"] {
    &::-moz-range-track {
        border: none;
        background: none;
        outline: none;
    }
}

现在全部完成，所以我们必须对 JS 和 HTML 进行一些更改才能使其正常工作

在 JS 中添加这些函数

function setupSeek() {
  seek.max = player.duration;
}
function seekAudio() {
isSeeking=true;
player.currentTime = seek.value;
isSeeking=false;
}

将 "player" 和 "seek" 元素检索移至顶部并添加搜索状态持有者

var isSeeking=false;
var seek = document.getElementById("seekObj");
var player = document.getElementById("player");

现在在 "initProgressBar()" 函数中添加一些代码以使 "range" 元素工作

if(!isSeeking){
seek.value = player.currentTime;
}

至此，一切都已完成，我们只需要调用 HTML 中的函数，让我们进行更改，从音频元素中，我们需要调用 "setUpSeek" 中的函数只需将其添加到 "audio"

ondurationchange="setupSeek()"

现在，我们完成了，您可以查看CodePen以便更好地理解

更多改进以使滑块以更好的方式工作。

添加此 Javascript 代码，这将使搜索栏看起来和感觉起来像本机移动搜索栏

function SetSeekColor(){
  try{
   var val = ($("#seekObj").val() - $("#seekObj").attr('min')) / ($("#seekObj").attr('max') - $("#seekObj").attr('min'));
    var percent = val * 100;
  $("#seekObj").css('background-image',
        '-webkit-gradient(linear, left top, right top, ' +
        'color-stop(' + percent + '%, #df7164), ' +
        'color-stop(' + percent + '%, #F5D0CC)' +
        ')');

    $("#seekObj").css('background-image',
        '-moz-linear-gradient(left center, #DF7164 0%, #DF7164 ' + percent + '%, #F5D0CC ' + percent + '%, #F5D0CC 100%)');
  }
  catch(e){}
}

为了完美的拖动你可能需要添加第三方plugin/js，你可以找到一个here

在自定义 htm5 音频播放器的进度条（搜索栏）末尾添加移动友好 "dot grabb"

Add a mobile friendly "dot grabb" at the end of a progress bar (seek bar) to custom htm5 audio player

html

javascript

css

html5-audio