Question

我正在尝试在这里自定义html5音频播放器，但无法弄清楚持续时间有什么问题。它在js文件中添加持续时间，分钟和秒后显示NaN。按钮工作正常，音频也在播放。

JS：

var mytrack = document.getElementById('mytrack');
var playButton = document.getElementById('playButton');
var muteButton = document.getElementById('muteButton');

var duration = document.getElementById('fullDuration');
var currentTime = document.getElementById('currentTime');

var minutes = parseInt(mytrack.duration/60);
var seconds = parseInt(mytrack.duration%60);

duration.innerHTML = minutes + ':'+ seconds;

function playOrPause(){
    if(!mytrack.paused && !mytrack.ended){
        mytrack.pause();
        playButton.style.backgroundImage = 'url(images/play.png)';
    }
    else{
        mytrack.play();
        playButton.style.backgroundImage = 'url(images/pause.png)';
    }
}

function muteOrUnmute() {
    if(mytrack.muted == true){
        mytrack.muted = false;
        muteButton.style.backgroundImage = 'url(images/mute.png)';
    }
    else{
        mytrack.muted = true;
        muteButton.style.backgroundImage = 'url(images/muted.png)';
    }
}

HTML：

<div id="wrap">
    <audio id="mytrack" preload=meta>
        <source src="audio/song.wav" type="audio/wav">
    </audio>
    <nav>
        <div id="defaultBar">
            <div id="progressBar"></div>
        </div>
        <div id="buttons">
            <button type="button" id="playButton"></button>
            <button type="button" id="muteButton"></button>
            <span id="currentTime">0:00</span>/<span id="fullDuration">0:00</span>
        </div>
    </nav>
</div>

Answer 1

您的代码的根本问题是parseInt()并不像您想象的那么聪明：

如果parseInt遇到的字符不是数字指定的基数，它忽略它和所有后续字符和返回解析到该点的整数值。 parseInt截断数字到整数值。允许前导和尾随空格。

console.log(parseInt("11:59"));

据我所知，没有内置函数来处理sexagesimal符号，所以你有很多选择：

自己动手
查找第三方库
将实际数值存储到变量中，而不是从/向文本解析，并仅将文本用于显示目的

滚动你自己不应该特别困难，如果你愿意，请随时寻求帮助。

HTML5音频播放器显示时间0:00 / NaN：NaN

1 个答案: