HTML5显示音频当前时间

39

我想显示HTML5音频元素的当前时间和持续时间。我已经在互联网上搜索了很久,但找不到一个可行的脚本,可以让我显示音频文件的长度以及当前的时间,例如1:35 / 3:20。

有任何想法吗?:)


1
尝试使用audio.currentTime,看看有没有反应?我不确定它是否有效。 - c2h2
我该如何添加它? - Lenny Magico
我该怎么添加呢?<script type="text/javascript">audio.currentTime</script>? - Lenny Magico
11个回答

36

这是一个例子:

<audio id="track" src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg"
       ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime) + ' / ' + Math.floor(this.duration);">
    <p>Your browser does not support the audio element</p>
</audio>
<span id="tracktime">0 / 0</span>
<button onclick="document.getElementById('track').play();">Play</button>

这应该可以在Firefox和Chrome中工作,对于其他浏览器,您可能需要添加备用编码。


我无法在我的JS中绑定 ontimeupdate,我该怎么做? - Arturo
Atharva Johri,只需在ontimeupdate函数中使用一个函数并在该函数中处理您的内容。 - yourkishore
有没有办法让这段代码适用于Blob URL以播放MP3? - user1788736

31

这是一个简单的用法。请记住,HTML5元素仍在开发中,因此任何内容都可能改变:

    audio = document.getElementsByTagName("audio")[0];

    //functions
    audio.load();
    audio.play();
    audio.pause();

    //properties
    audio.currentSrc  
    audio.currentTime  
    audio.duration

这里有一个参考资料:HTML5音频

当音频播放时,要想获取当前时间,你必须附加timeupdate事件,并在回调函数中更新当前时间。

Dev.Opera上的HTML5音/视频简易教程


1
你不觉得很有趣吗?除非你写出了提问者想要的代码,否则你的答案就不正确。好答案。 - clamchoda
我不想去碰 HTML5 直到它正式发布。太多需要调试的浏览器,哈哈 =D 谢了伙计。 - KJYe.Name
1
我并不是说他的答案是错的,只是我不太懂JS和HTML 5音频对我来说是新的,所以我不太明白该怎么做 :) - Lenny Magico
需要一段时间才能轻松地将所有这些不同的组件放在一起。我知道当我刚开始时,仅仅展示这个并不能帮助我理解代码如何编写。 - Jared Dunham

14

除了 math.floor() 得到的秒数没有转换为适当的时间值之外,robertc 的版本可以正常工作。

以下是我的函数,当 ontimeupdate 被调用时它会被执行:

<audio id='audioTrack' ontimeupdate='updateTrackTime(this);'>
  Audio tag not supported in this browser</audio>
<script>
function updateTrackTime(track){
  var currTimeDiv = document.getElementById('currentTime');
  var durationDiv = document.getElementById('duration');

  var currTime = Math.floor(track.currentTime).toString(); 
  var duration = Math.floor(track.duration).toString();

  currTimeDiv.innerHTML = formatSecondsAsTime(currTime);

  if (isNaN(duration)){
    durationDiv.innerHTML = '00:00';
  } 
  else{
    durationDiv.innerHTML = formatSecondsAsTime(duration);
  }
}
</script>

我修改了formatSecondsAsTime()函数,原本是从这里找来的:

function formatSecondsAsTime(secs, format) {
  var hr  = Math.floor(secs / 3600);
  var min = Math.floor((secs - (hr * 3600))/60);
  var sec = Math.floor(secs - (hr * 3600) -  (min * 60));

  if (min < 10){ 
    min = "0" + min; 
  }
  if (sec < 10){ 
    sec  = "0" + sec;
  }

  return min + ':' + sec;
}

5

ES6

       const audio = new Audio();
       audio.src = document.querySelector('#audio').src;
       audio.play();
       audio.addEventListener('timeupdate', (event) => {
            const currentTime = Math.floor(audio.currentTime);
            const duration = Math.floor(audio.duration);
        }, false);

5

当您使用audio.duration()时,它会以秒为单位给出结果。您只需要将其转换为分钟和秒。这里有代码演示,希望能对您有所帮助。

song.addEventListener('timeupdate',function (){

    var duration = song.duration; //song is object of audio.  song= new Audio();

    var sec= new Number();
    var min= new Number();
     sec = Math.floor( duration );    
     min = Math.floor( sec / 60 );
    min = min >= 10 ? min : '0' + min;    
    sec = Math.floor( sec % 60 );
    sec = sec >= 10 ? sec : '0' + sec;

    $("#total_duration").html(min + ":"+ sec);   //Id where i have to print the total duration of song.

    });

这段代码适用于总时长。要获取当前时间,只需使用song.currentTime;代替song.duration;即可,整个代码保持不变。


是的!非常感谢。这是唯一对我有效的答案 :) - Andri
@anuj-sharma,你能帮我解决这个问题吗?--> https://stackoverflow.com/questions/56765496/how-to-dynamically-display-the-video-timestamp-in-html5-js - vinita

3

对于那些想在jQuery中实现timeupdate的人。

<audio id="myAudio">
    <source src='test.mp3' type="audio/mp3" />
</audio>

$("audio#myAudio").get(0).addEventListener("timeupdate",function(){
        // do your stuff here
    });

2
  this.player = new Audio(item.url)
  this.player.play()

  this.player.addEventListener('timeupdate', (event) => {
      const currentTime = Math.floor(this.player.currentTime);
      const duration = Math.floor(this.player.duration);
      this.barWidth = (currentTime*100)/duration
  }, false);

这个问题已经有多个答案和一个被接受的答案了。您能否通过编辑您的答案解释一下它与其他答案的不同之处呢?同时也要知道,仅有代码的答案在长期内是没有用处的。 - 7uc1f3r
我正在寻找一个仅使用JS且不利用DOM的答案。感谢您发布这个! - TK421

0

或者您可以使用控件

用户可以使用控件来控制音频播放,包括音量、快进、暂停/恢复播放等。

<audio controls>
<source src="data:audio/wav;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA//tUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAASW5mbwAAAA8AAABeAACNwAAEBgkMDhEUFxkcHyEkJyksLC8yNDc6PD9CRUdKTU9SVVhYWl1gYmVoa21wc3V4e32Ag4OGiIuOkJOWmZueoaOmqaysrrG0trm8vsHEx8nMz9HU19fa3N/i5Ofq7e/y9ff6/f8AAAAATGF2YzU4LjEzAAAAAAAAAAAAAAAAJAKgAAAAAAAAjcCkg//a//uUZAAAAnwoxBMDfEApIBfpACIADzSzEuyzK8CaEOFgEI24EAq886fOG2yAQQKA/IMADgPJKKSphhhXjdt3c+kHAz/9+uf+miJESl73ve/Y2c3ALgVkXd953r+4fgAQKRSIB1g+/gg7+CAYX//yn0fE+UmkUQMAUYGBO8Th+oo62oMZdYP75dGIKziKnfbo/l30fOdyfyfyHXd8gRJOEElLuq1M6Smx8voAS5J2jB0sMk1apq7LIILlzTVrWdB0fl11n2tX2cptKwq2i8B9T/sfvHGrS3qWSvqtIVYEyWCuS/sZf2GX+h5ymVA0I3ZUwVqv7Go1LqamtU2QMgqEw0CqTzxQ0A8aUL3/1q1SSeLh5fa9fJIEjGQgLjPBOF5U0q2cXnL7/eX59Gou2J09f/v7fp7vtX1Is392a6VQJVZqSuAlkmnDsoqFwAYggJd9kkTl2fe4RxDGc5MbzsYWECK3/wkPfyzx+znqvjlItYxrOv9y93GzuevwEkm/zjkG//uUZCGNFEY8QQuaHHIkgBicACIAEQlzBA3AfgiGAGJwAIgAoXiuxEr1JagaWyuZboMoz96k64xA9vDOzrv6wy5/cmW6kR0GxyA2QpB+A8/Fy+tOBZPg9Uk/JvMxPepgb/nMl/jf6P3OlpNSMjVKVScAhZUnFlXtIdU1sZ9Wt/+9rX6l5P47X/3p0rq/+qcsYU1VRY2eLZGAAM2LCDE6XuNS6tXKTY8FX7GFLlh94qga4t3J/LDdJljjhvLuGeOD2Xu77SWs7d2/Sxpj0/GxxyDoGgf+hmpdd3G5Y5xeg9gFBZFTIokdOU22SQqXCPN23RinROISpWMwoK9jtfO/bnM+eWWTd45Dz8rnkx8yPIi+BCx05Z2q4mlHT/DAlaPQxij9uY1N2W7PW//2U/v7e5Sa/ub9f//pvc1S3U7TJpBR6Fm+oQsuRmMT9JP8+hQMpcPoJTMcuod2P7rvNb1zuH/OW72dazncefHHnMO95Wv54NDkEOkjwJDsPT8ipaSH//uUZCQPBDtCQQNvH4Ih5BhYBCJuEGUdBA20fgiPAuEUEIwAo1ANSGRCRHAp4aTGzRb1j5+s63m+sHrp5mp7ZqhMQeZd1TlH2wtgIP6jj4XAJvyjYWIe4oITdABExXPspuZPmULECUdVlOZyrut/5fn8//Xwb6a/9qOtC22Pui39n9Xb+idz7YelMowSPn03jGNdBGta9bnrkWtTSh/0mcr7eu3UXWpdrxT+/nhzHu7OeV65nEtczx7r9TdvCfYtcqkrsw94pZRcyxuyqy3QRjZo7EBdnB6n1nzxpdOls9MSZs9cYSVsgrhQm6WcLLNPpUm+kGEf070qOXR1FxyHR+gId7DP/6rU2BTQZAdtM3Foz5N7Xcj3r3VUa/+ibrZT07H/+vsb277np//JKrdugm6JhZqc0nuBAM1quByUPAMSq37tBnNlvu1LvZbOdvIvse/kV7+Hc88N7q8zz7i9tm/zPueet17U8n1SUJC/DSXIpDP37NLy1OSdPg8wVBQH//uUZCmNBDI6wINwN4ImYMh4BCYSEQEJAi2s3giRACQ0EIhMstE4dQdOu6L3lM3jldG91lUV6ah7zlR8uMk4yJKIar3v0pwT4bnqcvTKQgWic0pT19vBVAGkEcs5uwklT0OcqlQriFt1n6Mlf/ov/75M9818unv4t076OytJG+1XtT6HQ36DLmMvNvOhpgVHZv7m91dlARO8vWquFJZRfU/jUhesM89V+2N93TbppQ1+rnv69LvHsMXbq34RRjLMEQ8y5uHKlyxMy6GRUeOXRwWDyUNuT8bnbriPv63Cnhaow97bOJSxO83cbf6zOp39etoYBlCNYftkTnO9R7ej7jPvs19YZY0BLZJbGkE2sU1T3ltk0wbpcMFW2/v1af6Pd/J//nKdH//71wDN4otFjy/QP2aybO2xowSFXPDFutr+X5UnXWpf3Y1rjGXuzxl3M8rdJXq455au25Xdfaevbpa2O7F2X3Wsp9tVnR0uKGfLuVjdnliP0gyFmGnQZjwQ//uUZCsIVB1KwjNrH4IoILhpBCkSECTbBk08fgiQkGGEUAoI9sczrj7bMFZkXkEMLVrpZBGuUup/x4fP85MiTtDtJLQDL/jjddjZL5nus/l/2oAZEiAA9mYOB5wPSdxdFcJkTaVjMf8I7l93Xo7f+6ivso/p+i/Y9KQoQF1rF3VuHT5F2mqYm42CSp2Z7dbU5nNruzs1cN7tetmFU/yztzeWHNdu97SWL9x5bWWXZVfl9fOxSv60+WQ6QrCkN9Fat0ueEppa6gB9iYLzLA5P4+PJbMe+/5btZlFa6ByNSHzv9DVg69Pdn3N1Q+X3b+31svbJVviH8ZvfvRjM3F0UwKJb/b6mshPs+VkbqjahRYwY79NZLo/0tp//932UzGt67FjG3DQ+dKzNsbCfDR470In6tHhu8TAM5qlzt2Le0/YHuXqXDmt75z+Y8wt2cYP/H93bHKf+50tHTvQMkhFn3+P1yzJH/t1YSIQg4kpBjIFUsc7Uv0WGxctUaPZxkjOR//uUZDCI1FZDwINvN4IphChgFAjAD1zNDM0zK8CAFyJEECGoxB71tZipxFZfbqK2xCc5HNi7+FQy0PAoWHdN3fm2+N3x75fd5t/iu38bu8UMQJsUibf06+3Vr777zL3BjHhG/KF8uFg3sj1PYzdf//+/6adTWXqUtiDIKPzC6WXMJHrCu3XMhFZTL0Pbr9Xkg3osULGHKLwvVbz9d+f2emZ//uXndplmzT1PxlUrgOVIyIICMJ38J+O9varum/4hJEbjXHchynzp6sr3jytcnt5189ffsTHBIWB4otBkIRXQS7mRCmpWuKtvMDxdAUlK5TQTooGg5//xzxf/aEUHyHl3JdzQgBo+7d+m9qv4Jel39aoWaJawG4My11rruuCxF4GzrlcZkLXYzDstWkBd51aK1VDK9/+Z2LrDkbWta1tIj0A+Lm9f1LSkCEA0ybNui0rdENbLdF2JSoBNLDJt6/K747oMStarj+yxK3+YX06nKphWot8R9480iz3lU0sT//uUZDaAAsgwRUsDW2A3xQhQBCleC31vAsyYYcDdACCgEI0oBZDkVpKxrbQxQsqoXBQPAomAnxpY9qWeALmn/7qN9fTZ/+igBkKASN0vwEJEy0rU9Wi3yqUVZHY0vsUue1VqU75MFVmjVZSMllICcqVgoKU+KCFBSb9WpHGqz//6TUmNYTVfpH8y+Hsayyr/SaymFRvNZ0mMsmhl8NQRBnAV0S0IICgqxoCDw4CscGgkeWk6RDTNR4kwjqdItAwOkdYSeBSHWx3U+liy2e2Y+VTJe+084710IFQFAH5Q8o/67WWgicIg0Sg4KJa6JGbk2co6jYNPBVwKuUBlAZYBlfZ+9trrv+2zf8dLdfkZKSck8o9OqBWDUWeuopIlKMfhThUSoaYCZQNPBWAaqq60KSsiskohIyX7523qrMLDSgalpU7O2Wfjqv//1VkTSzIuAUkX1UwVcoKzJy22Zy+AbAkAw2OBoLEYsGhlAaFJxgmIQJMJBj0CJx6JItBIiWgk//uURFKMwfwNPJNJMJAyAJfjYSMCDwiS5gykywkgCJ3BhhhZaYtE49ZEq0Ti4SOfEjYXJUBMMGmBhxUSTAiSUqlhooiaYJlJSkhxVCVRVJYiWVFOSmKylVSSWhLSimRTNyk5SWiq1KKoATJkJXMBEAbiKPRmbGKYmNBgNAcSLQSNMWidC0SrRqIDTBMoKJJDio4qiJJqktKKVFMlkblJTEtFd1q1LUrWYu1dv2P5rv/tBZlWq/4AGB0OBLFhRBkNBUQnC5AjUTSOnVJoZMsllihgoIEHR0sslIyNWtlllloIHDXgsEhUVWKigkNRXULC4r26xRtQsK/1gKt3///+tv8WFf4r1C7P1igtiwr+Kios3F2QELCrIqKN/FhcVAELoBEBZkOHoShf0enEepFQDhYgIFhZ5MohJOiEkJJ6Qw+4TgDLES5YiWECB4gfDkjwI8eBnhgjSMtNMtMvPMPMMHyT7kn1veGeGHede9z3f/3sZPJPuSfW88M8MOpMQU1F//uUZGeA8kEgr0mJGVAkoAWyBCJeC7xM5ie8wQgAADSAAAAEMy4xMDCqACIszg8DMAAReBqkeTlNHM0p5aUoSDBQkJAgkoKLIwSsFsigSWRUSWDJCUTiRpEpFknRglZGyOEtNUcs5I1E5IsiURYlZGAqwWwVQMsiokkckaicSLIlEWJWRglZHSKiSzUQZIGSNCTgosJKImErIwSsjpFR2monJHJGosk6LEWJWRg7TdNwkkaickckaiUSLIlEYJWRglpHTVE+t1VBBwAUGRYSGns////2f6f//////9NMQU1FMy4xMDBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//uUZKsM9NVgPDNvMEgAAA0gAAABAwgKqg+IIAAAADSAAAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVK+t3/Z/////9P///+z//6Svrd/2f/////T////s//+lMQU1FMy4xMDBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVK+t3/Z/////9P///+z//6UaOsEBEwDQGjWAzgizZLDFsQueMYFCE5iSJUJA4iEHzCBBkGl8uFY4nYcQTgCeEAGCQ8ghuklIsOQOMojFFzIASUSgsY3CrOosA//uUZGGP8IAAqoPgAAAAAA0gAAABAgACqg+AAAAAADSAAAAE3x3DNC4E3JgcqDJwTMlREB0DfO48TLL4dplE0IQXdRHAc58Iam0IORctJ0ItPGoZakVyydZfDtPIyDfTyDMgv58KFHnImVUcZyJNXNCjRClTZxnIuXJUKddIagzLPxWo9OL6uaFWr2p0h64Vq2rIb2dWItPJouZuK1GIeiESjjgLefCVMgv6KQk8zQN9FJQ0DvQ5AHWfi5ZlQfiRRxwHOvMrO2MSpR5yJNXKBTq5LIw62yDOwQWeHtUAzy24wJIMYSwSwGPDoNCTOxUw4cMaBGrCMMDBELBABF1nJkMdZ+FAhAlYUBCt86pmrUW8SrJCJ80Djx+naUr1gr7MrVsbRc8Ns6Zqo24TWHMcNqbUH6fVscSsW3ItMZZM6jvnBg0MQZlUTCSoHNcXg2H4eTeMG4/gQsSScVY0i656Lg8YHM/Klh3PBOHUnrnaGg7ol0SzgnTJyiaNLGYz8SDx//uUZNsO8IAAqoPgAAAAAA0gAAABIEmQxE9p4YAAADSAAAAE4vvEg5gM6no7tDosHMqGcS1HQhkJQaAPlOdqmQkL7Z8iODk2Tkh8mHYl1CcrLTCN0/XHy1gQyoYOp1RSE1G8TIY6yACt5oagM1+1QmGAZYGJAVU2kwXJhhHpey0WayqvGII+lYRjJsAUWgVAaQhGe05LJ1SMqqRyH5KJJ7CIKAORaOYtW3W1rASkZJLLIkqWiUjMVK6CMxUnR88lBq+IJqdH3yy7PacuEpUcntkpi4ZRre9q62vNGR2DVGST3mj662lF1zFwyPoTkyTiSoJSqbrXtxkmpAbH4gnzJiYpBKXnrUB82Yu4dHxdEpeJKnGl11t6LkMSWDI+06Pkq0CVTEFNRTMuMTAwVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//uUZP+M9y9iuAt4Y3IAAA0gAAABF22C3kzhgYgAADSAAAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVMQU1FMy4xMDBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//uUZFGP8AAAaQAAAAgAAA0gAAABAAABpAAAACAAADSAAAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVMQU1FMy4xMDBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//uUZFGP8AAAaQAAAAgAAA0gAAABAAABpAAAACAAADSAAAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVMQU1FMy4xMDBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//uUZFGP8AAAaQAAAAgAAA0gAAABAAABpAAAACAAADSAAAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVMQU1FMy4xMDBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//uUZFGP8AAAaQAAAAgAAA0gAAABAAABpAAAACAAADSAAAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVMQU1FMy4xMDBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//uUZFGP8AAAaQAAAAgAAA0gAAABAAABpAAAACAAADSAAAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVMQU1FMy4xMDBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//uUZFGP8AAAaQAAAAgAAA0gAAABAAABpAAAACAAADSAAAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVMQU1FMy4xMDBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//uUZFGP8AAAaQAAAAgAAA0gAAABAAABpAAAACAAADSAAAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVMQU1FMy4xMDBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//uUZFGP8AAAaQAAAAgAAA0gAAABAAABpAAAACAAADSAAAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVMQU1FMy4xMDBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//uUZFGP8AAAaQAAAAgAAA0gAAABAAABpAAAACAAADSAAAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVMQU1FMy4xMDBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//uUZFGP8AAAaQAAAAgAAA0gAAABAAABpAAAACAAADSAAAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVMQU1FMy4xMDBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//uUZFGP8AAAaQAAAAgAAA0gAAABAAABpAAAACAAADSAAAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVMQU1FMy4xMDBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//uUZFGP8AAAaQAAAAgAAA0gAAABAAABpAAAACAAADSAAAAEVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVU8NTxBHQyLgSQfkTTYe4JwbgRhfRBmixk/GPhCDnVzQzsDXGZhbDw3LOuR6zjXZpueWOcngmhwSPD8JwTgnDizw0MZHjAaD07B+PFobg4C2BHBMHEfY/zcEMJwLgZ5rrCjU5kYLYdBKEAc6vJWGAXA0HR/j1mWr2eJBLejy+IRnMjSSguEVX7pDZ0mZe7FsNAghCFA+JQPQIQPypuG6MeATh6k//uUZFGP8AAAaQAAAAgAAA0gAAABAAABpAAAACAAADSAAAAEBcEpZOKA9A1A4BbC8IhGgmw6zQJwhEyvQ867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">
</audio>


0
关于 TypeScript:
formatTime(seconds: number): string {

    let minutes: any = Math.floor(seconds / 60);
    let secs: any = Math.floor(seconds % 60);

    if (minutes < 10) {
        minutes = '0' + minutes;
    }

    if (secs < 10) {
        secs = '0' + secs;
    }

    return minutes +  ':' + secs;
}

记得用常量替换魔数。这是一个例子。


0

这不是一个新的答案,而是多个答案的混合。你可以尝试这个。

<audio controls src="source_of_audio_file" id="audio" class="audio" ontimeupdate="update_time(this.currentTime, this.duration);" >
  Your browser does not support the audio element.
</audio>


function update_time(current_time, audio_duration){
  $("#currentAudioTime").html(format_time(current_time));
  $("#totalAudioDuration").html(format_time(audio_duration));
}

function format_time(audio_duration){
  sec = Math.floor( audio_duration );
  min = Math.floor( sec / 60 );
  min = min >= 10 ? min : '0' + min;
  sec = Math.floor( sec % 60 );
  sec = sec >= 10 ? sec : '0' + sec;
  return min + ":"+ sec;
}

<div>
  <span id="currentAudioTime"></span> : <span id="totalAudioDuration"></span>
</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接