Question

我想显示html 5音频元素的当前时间以及该元素的持续时间。我一直在寻找互联网，但找不到一个功能脚本，它允许我显示音频文件的长度以及当前的时间是多少。 1:35 / 3:20。

任何人都有任何想法：）？

Answer 1

这里是简单的用法。请记住，html5元素仍处于工作状态，因此任何事情都可以改变：

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

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

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

这里是参考HTML5 Audio

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

simple tutorial audio/video html5 on dev.opera

Answer 2

以下是一个例子：

<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，对于其他浏览器，您可能需要添加替代编码。

Answer 3

robertc的版本将正常工作，除非它不会将您从math.floor()获得的秒数转换为适当的时间值。

这是调用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()来自我发现的here：

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

Answer 4

对于那些希望在你的jquery中实现timeupdate的人。

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

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

Answer 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; 整个代码将保持不变。

Answer 6

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

Answer 7

在TypeScript上：

awk '{num=split($6, A,":");for(i=1;i<=num;i++){B[A[i]]};$6=length(B);print}'   Input_file

请记住用常数替换幻数。这是一个例子。

Answer 8

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

Answer 9

不是新答案，而是多个答案的组合。您可以尝试一下。

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

html5显示音频currentTime

9 个答案: