Fatal编程技术网
  • javascript/
  • Javascript html5显示音频当前时间

Javascript html5显示音频当前时间

javascript html audio

Javascript html5显示音频当前时间,javascript,html,audio,duration,html5-audio,Javascript,Html,Audio,Duration,Html5 Audio,我想显示HTML5音频元素的当前时间和该元素的持续时间。我一直在互联网上搜索，但找不到一个功能脚本，该脚本允许我显示音频文件的长度和当前的时间，例如1:35/3:20 有人有什么想法吗：）？这里是简单的用法。请记住，html5元素仍在开发中，因此任何东西都可能发生变化： audio = document.getElementsByTagName("audio")[0]; //functions audio.load(); audio.play(); au

我想显示HTML5音频元素的当前时间和该元素的持续时间。我一直在互联网上搜索，但找不到一个功能脚本，该脚本允许我显示音频文件的长度和当前的时间，例如1:35/3:20

有人有什么想法吗：）？

这里是简单的用法。请记住，html5元素仍在开发中，因此任何东西都可能发生变化：

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

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

    //properties
    audio.currentSrc  
    audio.currentTime  
    audio.duration
这是参考资料

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

下面是一个例子：

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


您的浏览器不支持音频元素

0/0
玩
这应该适用于Firefox和Chrome，对于其他浏览器，您可能需要添加替代编码。

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>
对于那些希望在jquery中实现timeupdate的人

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

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


$（“audio#myAudio”）.get（0）.addEventListener（“timeupdate”，function（）{
//在这里做你的事
});
当您使用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

整个代码将保持不变。
查找音频文件的长度很简单！：


<html>
<head>
</head>
<body>
    <audio controls="" id="audio">
        <source src="audio.mp3">
    </audio>
    <button id="button">
    <p id="p"></p>
        GET LENGTH OF AUDIO
    </button>
<script>
    var MYAUDIO = document.getElementById(audio);
    var MYBUTTON = document.getElementById(button);
    var PARA = document.getElementById(p);
    function getAudioLength() {
        PARA.innerHTML = duration.MYAUDIO
    }
MYBUTTON.addEventListener(click, getAudioLength);
</script>
</body>
</html>






获取音频的长度
var MYAUDIO=document.getElementById（音频）；
var MYBUTTON=document.getElementById（按钮）；
var PARA=document.getElementById（p）；
函数getAudioLength（）{
PARA.innerHTML=duration.MYAUDIO
}
MYBUTTON.addEventListener（单击，获取音频长度）；

关于类型脚本：


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



formatTime（秒：数字）：字符串{
让分钟：任意=数学地板（秒/60）；
让秒：任意=数学地板（秒%60）；
如果（分钟<10）{
分钟='0'+分钟；
}
如果（秒<10）{
秒='0'+秒；
}
返回分钟数+'：'+秒；
}


记住用常量替换幻数。这就是一个例子。
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);



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




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




您的浏览器不支持音频元素。
功能更新时间（当前时间、音频持续时间）{
$（“#currentAudioTime”）.html（格式#time（当前#time））；
$（“#totalAudioDuration”）.html（格式为时间（音频持续时间））；
}
功能格式\u时间（音频\u持续时间）{
秒=数学楼层（音频持续时间）；
最小值=数学楼层（秒/60）；
最小值=最小值>=10？最小值：“0”+最小值；
秒=数学下限（秒%60）；
秒=秒>=10秒：“0”秒+秒；
返回最小值+“：”+秒；
}
: 

Try audio.currentTime提供了什么？我不确定它是否有效。我该如何添加它？我该如何添加它？音频。当前时间？你难道不喜欢你的答案不正确，除非你编写OP想要的代码吗？回答得好。在html5正式发布之前，我不想修改它。太多的浏览器无法调试lol=D谢谢伙计。我并不是说他的答案是错的，我只是不理解JS和HTML5音频对我来说是新的，所以我不太明白该怎么做：）人们需要一段时间才能轻松地将所有这些不同的组件放在一起。我知道当我刚开始的时候，仅仅展示这一点并不能帮助我理解如何编写代码。我无法在我的js中绑定
ontimeupdate
。。我该怎么做呢？atharva johri只需在ontimeupdate中使用一个函数，并在该函数中完成您的工作。有没有办法让blob URL播放mp3时使用此代码？是的！非常感谢你。这是唯一对我有效的答案：）@anuj sharma你能帮我解决这个问题吗-->这个问题已经包含了多个答案和一个公认的答案。你能解释一下（通过编辑你的答案）你的答案与其他答案的不同之处吗？还要知道，从长远来看，只有代码的答案是没有用的。我们正在寻找一个只有js的答案，并且没有使用dom。谢谢你发布这个！

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



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