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

Posted 2023-02-25

【中文标题】在 JS 中获取音频时长并在 HTML 中显示

【英文标题】：Get audio duration in JS and display in HTML

【发布时间】：2021-01-13 07:02:06

【问题描述】：

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

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 中获取音频文件的总持续时间，以便显示当前时间/持续时间。有什么想法吗？

【问题讨论】：

你的问题的解决方案已经在***上here

【参考方案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;
;

【讨论】：

是的，我看到了这个，但我根本不懂 JS，所以我无法在我的 HTML 中调用它来显示它。

我已添加：

你能保证音频文件存在并且可以工作吗？您是否在 Web 开发人员控制台中遇到任何错误？ （铬 F12）

它工作正常，只是总时长不显示

添加“alert(media.duration);”在“media.onloadedmetadata = function() ”行下方。刷新并让我知道是否弹出任何“警报框”。