获取音频播放持续时间时出现问题

【问题标题】：Having issue while while getting duration of audio play获取音频播放持续时间时出现问题
【发布时间】：2023-02-03 03:35:45
【问题描述】：

let audioElement = new Audio('1.mp3');
let myProgressBar = document.getElementById('myProgressBar');

let progress = parseInt((audioElement.currentTime / audioElement.duration) * 100);
console.log("progress", progress);
myProgressBar.value = progress;

在控制台中，它显示 NaN 表示进度。我尝试通过单独的计算来获取它，例如：

let currentTime = audioElement.currentTime;
let duration = audioElement.duration;
console.log(currentTime); // No problem in audioElement.currentTime
console.log(duration); // NaN

【问题讨论】：

请阐明您的具体问题或提供更多详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： javascript audio progress-bar

【解决方案1】：

正如 HTMLMediaElement.duration 的 documentation 所说：

如果没有可用的媒体数据，则返回值NaN。

我相信您正在尝试在加载音频之前获取音频的持续时间。如果是这样，持续时间将为NaN。将数字乘以 NaN，正如您所做的那样，将始终返回 NaN。

有几种方法可以解决这个问题。这是一个：

您用于 Audio 元素的构造函数采用 url 参数并开始加载音频异步地. （source）。所以在访问duration之前必须等待元数据加载。尝试订阅onloadedmetadata 事件：
audioElement.addEventListener('loadedmetadata', () => {
    console.log(audioElement.duration)
})

【讨论】：