更改audio src路径后，获取duration为NaN的解决方法

最新推荐文章于 2024-05-31 22:11:41 发布

cjn.

最新推荐文章于 2024-05-31 22:11:41 发布

阅读量1.3w

点赞数 6

分类专栏：前端文章标签： html5 audio

本文链接：https://blog.csdn.net/chenjineng/article/details/77650870

版权

5 篇文章 0 订阅

订阅专栏

切换下一首歌曲时，更改 audio 的 src 路径，直接获取 duration 会得到 NaN 值

myaudio.src = 'music-2.mp3';
alert(myaudio.duration);

解决方法如下：

myaudio.src = 'music-2.mp3';

myaudio.load();

myaudio.oncanplay = function () {
	alert(myaudio.duration);
}

load() 方法用于在更改来源或其他设置后对音频/视频元素进行更新。

canplay	当浏览器可以播放音频/视频时

当浏览器可以播放音频/视频时

更改后需要重新加载 audio 元素，在 audio 元素加载完成后（oncanplay），此时才能获取到正确的 duration 值

-------更新------

duration 的值可以在 canplay 事件发生之前的 durationchange 阶段中获取。

myaudio.onduratiοnchange= function () {
	alert(myaudio.duration);
}

当指定音频/视频的时长数据发生变化时，发生 durationchange 事件。

当音频/视频加载后，时长将由 "NaN" 变为音频/视频的实际时长。

当音频/视频处于加载过程中时，会依次发生以下事件：

关注

专栏目录