html5 显示音频 currentTime

IT技术 javascript html audio duration html5-audio
2021-03-08 12:31:07

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

任何人有任何想法:)?

6个回答

下面是一个例子:

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

有没有办法让这段代码适用于 blob URL 来播放 mp3?
2021-04-18 12:31:07
atharva johri 只需在 ontimeupdate 中使用一个函数并在该函数中执行您的操作。
2021-04-23 12:31:07
我无法ontimeupdate在我的 js 中绑定.. 我该怎么做?
2021-05-10 12:31:07

这是简单的用法。请记住,html5 元素仍在开发中,因此任何事情都可能发生变化:

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

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

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

这是参考HTML5 音频

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

dev.opera 上的简单教程音频/视频 html5

我并不是说他的回答是错误的,我只是不明白 JS 和 html 5 音频对我来说是新的,所以我不太明白该怎么做:)
2021-04-18 12:31:07
在正式发布之前,我不想修改 html5。太多浏览器无法调试 lol =D 谢谢伙计。
2021-04-24 12:31:07
除非您编写 OP 想要的代码,否则您是否不喜欢您的答案不正确?好答案。
2021-04-28 12:31:07
人们需要一段时间才能轻松地将所有这些不同的组件放在一起。我知道当我刚开始的时候,仅仅展示这不会帮助我理解如何编写代码。
2021-05-13 12:31:07

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()了我在这里找到的东西

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

当您使用 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; 整个代码将保持不变。

是的!非常感谢你。这是唯一对我有用的答案:)
2021-05-02 12:31:07
@anuj-sharma 你能帮我解决这个问题吗 --> stackoverflow.com/questions/56765496/...
2021-05-11 12:31:07

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