为 html5 中的音频动态生成时间和小数点格式

Question

我创建了一个非常简单的音频播放器，可以播放一个小的 mp3 文件。

它有效并且功能已被接受，但我想让音频的当前时间的生成更加动态，因为它在音频播放期间生成小数点和分钟位置（如果需要）。

目前我有一个函数可以将 audio.mp3 当前时间转换为分钟、秒和毫秒。

this.format = function () {
    let secsCal = Math.floor(this.audio.currentTime % 60);
    let minsCal = Math.floor(this.audio.currentTime / 60);
    let millsCal = this.audio.currentTime % 60;

    let secs = ('0' + secsCal).substr(-2);
    let mins = ('0' + minsCal).substr(-2);
    let mills = ('0' + millsCal).substr(4, 2);




    document.getElementById('start-time').innerHTML = mins + ':' + secs + '.' + mills;
};

现在这对我有用，但它不是最好的解决方案，因为即使这个特定示例的长度不是一分钟，时间也会向您显示分钟值。所以理想情况下，如果音频允许的话，我们只想显示分钟和秒。

我想要实现的是：

如果音频超过一秒，只显示小数点
如果音频样本实际上超过一分钟，则只显示 :。

我一直在寻找解决方案，如果有人能提供帮助那将是最有帮助的

请在下面找到我的例子

Audio HTML5 example

Answer 1

所以经过一番深思熟虑后，问题的答案相对简单，这里是进行更改的代码。

   // only display 00:00.00 formats if the mp3 requires it

   if (minutes === 0 ) {
   minResult = '\u00a0';
   } else {
   minResult = minutes + ':';
   }
   if (seconds === 0 ) {
   secResult = '\u00a0';
   } else {
   secResult = seconds + '.';
   }
   if (millisecondsCal === 0 ) {
   millResult = '\u00a0';
   } else {
   millResult = milliseconds;
   }

   // append value to dom
   document.getElementById("duration").innerHTML = minResult + secResult + millResult;

所以这是如何工作的，首先检查我们没有任何等于 0 的值，因为如果我们这样做，那么我们不想显示相应的时间格式，否则显示给我们。

显然，这更像是一个 UI 请求，只是给人一种印象，即玩家知道曲目有多长，因此只显示秒和分钟。

这个方法放在持续时间方法中。详情见下文。

const audio = document.createElement("AUDIO");
audio.setAttribute("id", "audio");
audio.src = "http://www.hscripts.com/tutorials/html/music.wav";
audio.controls = true;
audio.onloadedmetadata = function() {
  document.getElementById("duration").style.color = "#bdbdbd";
  document.getElementById("start-time").style.color = "white";
  
  
  
  
  // buttons
  document.getElementById("pButton").addEventListener("click", function (){
  
   // Toggle audio play
  audio[audio.paused ? "play" : "pause"]();
  
  });

  // Convert duration into HH:MM:SS
  duration(audio.duration);
  
};





// function converts audio.duration to SS:mm format
function duration(time) {
  var minutes = parseInt(time / 60, 10);
  var seconds = parseInt(time % 60);
  var millisecondsCal = time % 60;
  var milliseconds = ("0" + millisecondsCal).substr(4, 2);
  
  console.log(seconds);
  
  // create empty vars to store values
  var minResult = '';
  var secResult = '';
  var millResult = '';
  
   // only display 00:00.00 formats if the mp3 requires it
  if (minutes === 0 ) {
  minResult = '\u00a0';
  } else {
   minResult = minutes + ':';
  }
   if (seconds === 0 ) {
  secResult = '\u00a0';
  } else {
   secResult = seconds + '.';
  }
   if (millisecondsCal === 0 ) {
  millResult = '\u00a0';
  } else {
   millResult = milliseconds;
  }

  // append value to dom
  document.getElementById("duration").innerHTML = minResult + secResult + millResult;
}

// convert audio.currentTime to SS:mm format
function format() {
  var secsCal = Math.floor(audio.currentTime % 60);
  var minsCal = Math.floor(audio.currentTime / 60);
  var millsCal = audio.currentTime % 60;
  

  var secs = ("0" + secsCal).substr(-2);
  var mins = ("0" + minsCal).substr(-2);
  var mills = ("0" + millsCal).substr(4, 2);
  
  // create empty vars to store values
  var minResult = '';
  var secResult = '';
  var millResult = '';
  
  // only display 00:00.00 formats if the mp3 requires it
  if (millsCal === 0 ) {
        millResult = '\u00a0';
    } else {
        millResult = mills;
    }

    // else if
    if (audio.currentTime < 1 ) {
        secResult = '\u00a0';
    } else {
        secResult = secs + '.';
    }

    if (minsCal === 0 ) {
        minResult = '\u00a0';
    } else {
        minResult = mins + ':';
    }

  document.getElementById("start-time").innerHTML = minResult + secResult + millResult;
}

var update = function () {
  
  format();
  
}


audio.onplay = function() {
  requestAnimationFrame(audio.onplay);
  update();
  };
  
  audio.onpause = function() {
  cancelAnimationFrame(audio.onplay);
  };

body {
  background-color:black;
}

#pButton{
 
  background-color: #424242;
  border: 2px solid #bdbdbd;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  font-size: 25px;
  color:  #bdbdbd;
  float:left;
  outline:none;
  position: relative;
  cursor: pointer;
  padding:20px;
}

#duration,
#start-time{ 
     padding: 20px;
     float: left;
}

.time {
    font-size: 20px;
    color: black;
    position: relative;
    top: 0px;
 
  min-width: 60px;
}

  <button id=pButton>Play</button>
  <p id="start-time" class="time"></p>
 <p id="duration" class="time">00:00</p>

为 html5 中的音频动态生成时间和小数点格式

Dynamically generate the Time and Decimal point format for audio in html5

html

javascript

audio

html5-audio