📌  相关文章
📜  音频获取当前时间 - Javascript (1)

📅  最后修改于: 2023-12-03 14:58:44.818000             🧑  作者: Mango

音频获取当前时间 - JavaScript

当我们需要在页面上控制音频播放时，通常要实现一个进度条，用于表示音频当前的播放进度。而获取音频当前时间是实现进度条的基础。

使用 currentTime 属性获取当前时间

HTMLAudioElement 和 HTMLVideoElement 都具有 currentTime 属性，表示当前的播放时间，以秒为单位。

const audio = new Audio('music.mp3');
console.log(audio.currentTime); // 获取当前播放时间
播放事件监听器

我们可以使用 ontimeupdate 事件来监听音频播放进度的变化，以更新进度条的显示。

const audio = new Audio('music.mp3');
const progressBar = document.querySelector('#progress-bar');

audio.ontimeupdate = () => {
  const progressPercent = (audio.currentTime / audio.duration) * 100;
  progressBar.style.width = `${progressPercent}%`;
};

在这个例子中，我们将进度条的宽度设置为当前时间与总时长的比例，并乘以 100，即可得到进度条所应该显示的百分比。

示例代码

下面是一个完整的示例代码，实现了音频的播放和暂停功能，以及进度条的自动更新：

<!DOCTYPE html>
<html>
<head>
  <title>Audio Player</title>
  <style>
    #progress-bar {
      height: 10px;
      background-color: #ccc;
    }

    #progress-bar-inner {
      height: 100%;
      background-color: #f00;
    }
  </style>
</head>
<body>
  <audio id="audio" src="music.mp3"></audio>
  <button id="play-button">Play</button>
  <button id="pause-button">Pause</button>
  <div id="progress-bar">
    <div id="progress-bar-inner"></div>
  </div>
  <script>
    const audio = document.querySelector('#audio');
    const playButton = document.querySelector('#play-button');
    const pauseButton = document.querySelector('#pause-button');
    const progressBarInner = document.querySelector('#progress-bar-inner');

    playButton.onclick = () => {
      audio.play();
    };

    pauseButton.onclick = () => {
      audio.pause();
    };

    audio.ontimeupdate = () => {
      const progressPercent = (audio.currentTime / audio.duration) * 100;
      progressBarInner.style.width = `${progressPercent}%`;
    };
  </script>
</body>
</html>
结语

获取音频当前时间是音频播放控制的基础之一，也是完成进度条等相关功能的核心代码。希望本文对您有所帮助。