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请求，只是给人的印象是玩家知道曲目有多长，并且只显示秒和分。

此方法放在持续时间方法中。请参阅下文了解更多详情。

＆＃13;

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);
  };

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

1 个答案: