How to get the exact duration of an audio file in js All In One

How to get the exact duration of an audio file in js All In One

errors

audio duration time precise bug

seconds 10 进制转换 bug ❌

solutions

seconds 时间单位 60 进制转换 ✅

function getFormatTime(time) {
  // seconds => minutes : seconds ✅
  const minutes = `${parseInt(time / 60)}`.padStart(2, `0`);
  const seconds = `${parseInt(time % 60)}`.padStart(2, `0`);
  return `${minutes}:${seconds}`;
}

// time
const autoUpdateTime = () => {
  console.log(`audio.duration =`, audio.duration)
  current.innerText = getFormatTime(audio.currentTime);
  total.innerText = getFormatTime(audio.duration);
}

audio.addEventListener("timeupdate", (event) => {
  autoUpdateTime();
});

// fix: https://www.cnblogs.com/xgqfrms/p/18425599

function getFormatTime(time) {
  const hours = `${parseInt(time / 3600)}`.padStart(2, `0`);
  const minutes = `${parseInt(time / 60)}`.padStart(2, `0`);
  const seconds = `${parseInt(time % 60)}`.padStart(2, `0`);
  return `${hours}:${minutes}:${seconds}`;
}

demos

https://github.com/xgqfrms/web-podcast-player

    <!-- <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();
});

// time
const autoUpdateTime = () => {
  console.log(`audio.duration =`, audio.duration)
  current.innerText = getFormatTime(audio.currentTime);
  total.innerText = getFormatTime(audio.duration);
  // minutes => seconds
  // current.innerText = (parseFloat(audio.currentTime.toFixed(2)) / 60).toFixed(2);
  // total.innerText = (parseFloat(audio.duration.toFixed(2)) / 60).toFixed(2);
  // current.innerText = (audio.currentTime / 60).toFixed(2);
  // total.innerText = (audio.duration / 60).toFixed(2);
}

// let sid = setInterval(() => {
//   autoUpdateTime();
// }, 100);


// audio.onloadedmetadata = () => {
//   // fix: https://www.cnblogs.com/xgqfrms/p/18425599
//   autoUpdateTime();
//   // current.innerText = audio.currentTime;
//   // total.innerText = audio.duration;
// };

audio.addEventListener("timeupdate", (event) => {
  autoUpdateTime();
});

https://ielts-guide-2nd.xgqfrms.xyz/

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

how to use js to create one audio player progress bar

progress

<progress id="progress-bar" value="0" max="1">
  <!-- shadow dom / #shadow-root -->
  <div pseudo="-webkit-progress-inner-element">
    <div pseudo="-webkit-progress-bar">
      <div pseudo="-webkit-progress-value" style="inline-size: 28.6192%; block-size: 100%;"></div>
    </div>
  </div>
</progress>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress

function getFormatTime(time) {
  // seconds => minutes : seconds ✅
  const minutes = `${parseInt(time / 60)}`.padStart(2, `0`);
  const seconds = `${parseInt(time % 60)}`.padStart(2, `0`);
  return `${minutes}:${seconds}`;
}

// time
const autoUpdateTime = () => {
  // console.log(`audio.duration =`, audio.duration)
  current.innerText = getFormatTime(audio.currentTime);
  total.innerText = getFormatTime(audio.duration);
  progress.value = (audio.currentTime / audio.duration);
  // progressBackground + progressBar
  // progressBar.style.width =  `${(currentTime / duration) * 100}%`;
}

audio.addEventListener("timeupdate", (event) => {
  autoUpdateTime();
});

input type="range"

<div class="jsx-840757008 progress-bar" style="opacity: 1;">
  <input type="range" min="0" max="100" step="0.001" class="jsx-840757008 " value="0">
  <div class="jsx-840757008 played" style="width: calc(32.77% + 5px);"></div>
 </div>

https://podbay.fm/p/witnessed-night-shift

https://stackoverflow.com/questions/12314345/custom-progress-bar-for-audio-and-progress-html5-elements

refs

web podcast player & music player All In One

https://www.cnblogs.com/xgqfrms/p/18416940

https://stackoverflow.com/search?q=js+audio+duration

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;
}

https://stackoverflow.com/questions/65697079/get-audio-duration-in-js-and-display-in-html

https://stackoverflow.com/questions/47960743/html-audio-object-reporting-wrong-file-duration

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---