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

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

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

time 误差 bug ❌

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://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

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