JavaScript如何将audio的.duration与.currentTime转换为MM:SS时间格式

修改方案 #

仅需要调整JS部分代码即可实现时间格式转换，无需改动HTML和CSS：

步骤1：新增时间格式化函数

在$(document).ready()代码块的最开头，新增如下工具函数：

// 秒数转MM:SS格式
function formatTime(seconds) {
  // 处理未加载完成时的异常值
  if (isNaN(seconds)) return "00:00";
  const minutes = Math.floor(seconds / 60);
  const remainSeconds = Math.floor(seconds % 60);
  // 不足两位自动补0
  return `${String(minutes).padStart(2, '0')}:${String(remainSeconds).padStart(2, '0')}`;
}

步骤2：替换时间输出逻辑

找到原JS代码中timeupdate事件监听里的两行时间输出代码：

$("#getTime").html(Math.floor(theSound[0].duration));
$('#goTime').html(Math.floor(theSound[0].currentTime));

替换为：

$("#getTime").html(formatTime(theSound[0].duration));
$('#goTime').html(formatTime(theSound[0].currentTime));

修改完成后，音频的总时长和当前播放时间就会自动以MM:SS格式展示，不足两位的数字会自动补0，不会出现格式错误。 #

修改后完整JS代码 #

$(document).ready(function() {

  // 秒数转MM:SS格式
  function formatTime(seconds) {
    // 处理未加载完成时的异常值
    if (isNaN(seconds)) return "00:00";
    const minutes = Math.floor(seconds / 60);
    const remainSeconds = Math.floor(seconds % 60);
    // 不足两位自动补0
    return `${String(minutes).padStart(2, '0')}:${String(remainSeconds).padStart(2, '0')}`;
  }

  var timeDrag = false; /* Drag status */
  var isPlaying = false;
  var theSound = $("#firstTrack");
  var allIcons = $("i");
  var isLoaded = false;


  theSound.on("timeupdate", function() {
    var currentPos = theSound[0].currentTime; //Get currenttime
    var maxduration = theSound[0].duration; //Get video duration
    var percentage = 100 * currentPos / maxduration; //in %
    $('.timeBar').css('width', percentage + '%');
    $("#getTime").html(formatTime(theSound[0].duration));
    $('#goTime').html(formatTime(theSound[0].currentTime));
  });

  $("#playIt").click(function(event) {

    // run once.
    if (!isLoaded) {
      theSound.trigger('load');
      setTimeout(startBuffer, 500);
      isLoaded = true;


    }

    // toggle play/pause
    if (!isPlaying) {

      theSound.trigger('play');

      $("#playIt").find(allIcons).removeClass("fa-play");
      $("#playIt").find(allIcons).addClass("fa-pause");

      isPlaying = true;

    } else {

      theSound.trigger('pause');

      $("#playIt").find(allIcons).removeClass("fa-pause");
      $("#playIt").find(allIcons).addClass("fa-play");

      isPlaying = false;

    }
  });

  $("#stepFive").click(function() {
    var currentPos = theSound[0].currentTime + 5;
    theSound[0].currentTime = currentPos;
  });


  $("#stepFiveback").click(function() {
    var currentPos = theSound[0].currentTime - 5;
    theSound[0].currentTime = currentPos;
  });

  $('.progressBar').mousedown(function(e) {
    timeDrag = true;
    updatebar(e.pageX);
  });

  $(document).mouseup(function(e) {
    if (timeDrag) {
      timeDrag = false;
      updatebar(e.pageX);
    }
  });
  $(document).mousemove(function(e) {
    if (timeDrag) {
      updatebar(e.pageX);
    }
  });

  //update Progress Bar control
  var updatebar = function(x) {
    var progress = $('.progressBar');
    var maxduration = theSound[0].duration; //Video duraiton
    var position = x - progress.offset().left; //Click pos
    var percentage = 100 * position / progress.width();

    //Check within range
    if (percentage > 100) {
      percentage = 100;
    }
    if (percentage < 0) {
      percentage = 0;
    }

    //Update progress bar and video currenttime
    $('.timeBar').css('width', percentage + '%');
    theSound[0].currentTime = maxduration * percentage / 100;
  };

  //loop to get HTML5 video buffered data
  var startBuffer = function() {

    var maxduration = $("#firstTrack")[0].duration;
    var currentBuffer = $("#firstTrack")[0].buffered.end(0);
    var percentage = 100 * currentBuffer / maxduration;
    $('.bufferBar').css('width', percentage + '%');

    //re-loop if not entierely buffered
    if (currentBuffer < maxduration) {
      setTimeout(startBuffer, 500);
    }

  };

});

内容的提问来源于stack exchange，提问作者Mohammad