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

xgqfrms發表於2024-09-22
JS

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

errors

audio duration time precise bug

image

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

(🐞 反爬蟲測試！打擊盜版⚠️）如果你看到這個資訊, 說明這是一篇剽竊的文章，請訪問 https://www.cnblogs.com/xgqfrms/ 檢視原創文章！

refs

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

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

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 釋出文章使用：只允許註冊使用者才可以訪問！

原創文章，版權所有©️xgqfrms, 禁止轉載 🈲️，侵權必究⚠️！

相關文章