【问题标题】:Javascript/HTML5: get current time of audio tagJavascript/HTML5:获取音频标签的当前时间
【发布时间】:2014-03-19 09:45:02
【问题描述】:

我的模板中有一个音频标签,我需要在单击按钮时显示它的 currentTime。请检查下面的代码:

var myaudio = document.getElementsByTagName("audio")[0];
var cur_time = myaudio.currentTime;
$('#curPosition').val(cur_time);

但在播放音频时它总是返回 0 作为当前时间。有人对此有任何想法吗?

谢谢

【问题讨论】:

  • 请提供一个小提琴,因为我也需要 html。
  • 请在此处检查并纠正错字:jsfiddle.net/jAdhF/1

标签: javascript jquery html


【解决方案1】:

你可以这样试试

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

或者在 javascript 中你可以这样做

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

我目前正在使用 javascript

【讨论】:

    【解决方案2】:

    这是一个错字。你声明var myaudio,然后你使用audio.currentTime而不是myaudio.currentTime

    试试:

    var myaudio = document.getElementsByTagName("audio")[0];
    var cur_time = myaudio.currentTime;//<-----Change here
    $('#curPosition').val(cur_time);
    

    DEMO

    【讨论】:

    • 抱歉,将问题添加到 Stack 时发生了拼写错误。非常感谢!!。
    • 是的.. 可能是我的浏览器问题。感谢您的更新。
    猜你喜欢
    • 2014-05-27
    • 1970-01-01
    • 1970-01-01
    • 2014-02-23
    • 2020-07-29
    • 1970-01-01
    • 2023-03-24
    • 2023-04-10
    • 2014-11-16
    相关资源
    最近更新 更多