javascript - 如何显示音频持续时间并每秒减去一秒？

Question

我做了这个函数，我希望每秒的音频持续时间减一，但它返回 NaN，然后​​我尝试删除它，" : "所以它是完整的数字，但setInterval只执行一次，例如，如果音频持续时间为 0524，点击后.button它只返回 0523。

<button class="button"></button>
<p class="demo"></p>

var playng= new Audio();
playng.src = audio.mp3;
$('.button').click(function(){
    playng.play()
    songDur()
})
function songDur(){
    var audiod = playng.duration;
    var minutes = "0" + Math.floor(audiod / 60);
    var seconds = Math.floor(audiod - minutes * 60);
    var songTime = minutes + " : " + seconds;
    console.log(songTime);
    setInterval(function(){
    $('.demo').text(songTime - 1)},1000);
}

标签： javascriptjquery

Answer 1

NaN代表“Not a Number”，中间有冒号的两个数字确实不是数字。

如果您删除冒号，它似乎只运行一次的原因是因为您从不更新songTime. 您仅将文本设置为songTime -1，但songTime从未更新，因此songTime -1也将始终输出相同的数字。

还值得一提的是，setInterval它不是很准确，并且会随着时间的推移而变化。

获得倒数计时器的最佳方法是准确倒数歌曲中剩余的时间，是currentTime从duration. 这将为您提供剩余的秒数，以便您可以将其转换为分钟和秒。（请务必在内部进行计算，setInterval以便为每个间隔重新计算。）

var playng = new Audio();
playng.src = 'audio.mp3';
$('.button').click(function() {
  playng.play()
  songDur()
});

function songDur() {
  setInterval(function() {
    var timeRemaining = playng.duration - playng.currentTime;
    var minutes = Math.floor(timeRemaining / 60);
    var seconds = Math.floor(timeRemaining % 60);

    var secondsWithLeadingZero = seconds < 10 ? '0' + seconds : seconds;

    $('.demo').text(minutes + ':' + secondsWithLeadingZero);
  }, 500);
}

<button class="button">Play</button>
<p class="demo"></p>

工作示例：https ://jsfiddle.net/qgp8k7bf/