在 JS 中获取音频时长并在 HTML 中显示

Question

为了显示音频播放器，我的以下代码运行良好，但我还想获得要显示的音频文件的总持续时间：

HTML

    <button id="playAudio"></button>

    <div id="seekObjContainer">
        <div id="seekObj">
            <div id="percentage"></div>
        </div>
    </div>

    <p><small id="currentTime">00:00</small></p>

</div>

JS

    // Audio Player

function $(id) { return document.getElementById(id); };
const media = document.getElementById('audio');

let ui = {
    play: 'playAudio',
    audio: 'audio',
    percentage: 'percentage',
    seekObj: 'seekObj',
    currentTime: 'currentTime'
};

function togglePlay() {
    if (media.paused === false) {
        media.pause();
        $(ui.play).classList.remove('pause');
    } else {
        media.play();
        $(ui.play).classList.add('pause');
    }
}

function calculatePercentPlayed() {
    let percentage = (media.currentTime / media.duration).toFixed(2) * 100;
    $(ui.percentage).style.width = `${percentage}%`;
}

function calculateCurrentValue(currentTime) {
    const currentMinute = parseInt(currentTime / 60) % 60;
    const currentSecondsLong = currentTime % 60;
    const currentSeconds = currentSecondsLong.toFixed();
    const currentTimeFormatted = `${currentMinute < 10 ? `0${currentMinute}` : currentMinute}:${currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds
        }`;

    return currentTimeFormatted;
}

function initProgressBar() {
    const currentTime = calculateCurrentValue(media.currentTime);
    $(ui.currentTime).innerHTML = currentTime;
    $(ui.seekObj).addEventListener('click', seek);

    media.onended = () => {
        $(ui.play).classList.remove('pause');
        $(ui.percentage).style.width = 0;
        $(ui.currentTime).innerHTML = '00:00';
    };

    function seek(e) {
        const percent = e.offsetX / this.offsetWidth;
        media.currentTime = percent * media.duration;
    }

    calculatePercentPlayed();
}

$(ui.play).addEventListener('click', togglePlay)
$(ui.audio).addEventListener('timeupdate', initProgressBar);

我想要什么：

我想在 html 中获取音频文件的总持续时间，以便显示当前时间/持续时间。有什么想法吗？

Answer 1

根据 MDN： (https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration)

myDuration = htmlMediaElement.duration

一个双精度浮点值，指示持续时间 媒体在几秒钟内。如果没有可用的媒体数据，则 NaN 值为 回来。如果元素的媒体没有已知的持续时间——例如 对于实时媒体流——持续时间的值为 +Infinity。

但是，您需要确保在尝试访问该属性之前已加载音频（准确地说是其元数据） - 使用 onloadedmetadata 事件。

所以，首先 - 在您的 html 代码中添加一个 DIV。

然后添加js代码：

media.onloadedmetadata = function() {
  document.getElementById('total-duration').innerText = media.duration;
};