How to get the exact duration of an audio file in js All In One
errors
audio duration time
precisebug
time 误差 bug ❌
Reduced time precision / 时间精度降低
To offer protection against timing attacks and fingerprinting, the precision of video.currentTime might get rounded depending on browser settings. In Firefox, the privacy.reduceTimerPrecision preference is enabled by default and defaults to 2ms. You can also enable privacy.resistFingerprinting, in which case the precision will be 100ms or the value of privacy.resistFingerprinting.reduceTimerPrecision.microseconds, whichever is larger.
For example, with reduced time precision, the result of video.currentTime will always be a multiple of 0.002, or a multiple of 0.1 (or privacy.resistFingerprinting.reduceTimerPrecision.microseconds) with privacy.resistFingerprinting enabled.
为了防止计时攻击和指纹识别，video.currentTime 的精度可能会根据浏览器设置进行舍入。在 Firefox 中，privacy.reduceTimerPrecision 首选项默认启用，默认为 2 毫秒。您还可以启用 privacy.resistFingerprinting，在这种情况下精度将为 100 毫秒或 privacy.resistFingerprinting.reduceTimerPrecision.microseconds 的值，以较大者为准。例如，在降低时间精度的情况下，video.currentTime 的结果将始终是 0.002 的倍数，或者在启用 privacy.resistFingerprinting 的情况下是 0.1 的倍数（或 privacy.resistFingerprinting.reduceTimerPrecision.microseconds）。
The HTMLMediaElement interface's currentTime property specifies the current playback time in seconds. Changing the value of currentTime seeks the media to the new time.
HTMLMediaElement 接口的 currentTime 属性指定当前播放时间（以秒为单位）。 更改 currentTime 的值会寻找新时间的媒体。
A double-precision floating-point value indicating the current playback time in seconds.
指示当前播放时间（以秒为单位）的双精度浮点值。
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime
The read-only HTMLMediaElement property duration indicates the length of the element's media in seconds.
只读 HTMLMediaElement 属性持续时间指示元素媒体的长度（以秒为单位）。
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration
solutions
???
demos
<!-- <audio
id="audio"
controls
loop
autoplay
muted
src="./000-xyz/《雅思考试官方指南》（第2版）_听力练习音频_06 Test Practice - Section 1.mp3">
</audio> -->
<figure>
<figcaption>《雅思考试官方指南》（第2版）/听力练习音频/06 Test Practice - Section 1.mp3</figcaption>
<audio
id="audio"
controls
loop
src="./000-xyz/《雅思考试官方指南》（第2版）_听力练习音频_06 Test Practice - Section 1.mp3">
</audio>
</figure>
<!-- progress 进度条 -->
<div>
<span id="current-time">current</span>
<span id="time-line">/</span>
<span id="total-time">total</span>
</div>
// time
const current = document.getElementById("current-time");
const total = document.getElementById("total-time");
// time
const autoUpdateTime = () => {
// current.innerText = audio.currentTime;
// total.innerText = audio.duration;
current.innerText = (audio.currentTime / 60).toFixed(2);
total.innerText = (audio.duration / 60).toFixed(2);
}
// let sid = setInterval(() => {
// autoUpdateTime();
// }, 100);
audio.addEventListener("timeupdate", (event) => {
console.log("The currentTime attribute has been updated. Again.");
autoUpdateTime();
});