获取当前时间

Question

我想了解如何在音频播放时获取音频的当前时间。因此，当音频开始播放时，它将记录 0，并且在播放结束时，它将记录总持续时间。这是我在下面尝试过的，它没有返回我的想法。我可能做错了。但我不确定哪里出了问题。

例如，在音频结束时，它返回

currentTime:36.02133333333333 totalDuration36.006875

，其中 currentTime>totalDuration 这是完全错误的。我想利用这些值，因此它们需要准确。

const audioUrl = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/128337/ongoing-thing-crop.ogg';  

/*test url2 - https://s.cdpn.io/1202/Star_Wars_original_opening_crawl_1977.mp3*/

const div = document.querySelector('div');

const audioContext = new(window.AudioContext || window.webkitAudioContext)();
let bufferSource = audioContext.createBufferSource();
let analyser = audioContext.createAnalyser();
let gainNode = audioContext.createGain();

let startTime;

async function setupAudio(url) {
    const response = await fetch(url);
    const audioData = await response.arrayBuffer();
    const buffer = await audioContext.decodeAudioData(audioData);

    bufferSource.buffer = buffer;
    bufferSource.connect(analyser);
    analyser.connect(gainNode);
    gainNode.connect(audioContext.destination);

    function updateTime() {
        let currentTime = audioContext.currentTime - startTime;
        console.log(`currentTime:${currentTime}`,`totalDuration${buffer.duration}`);
        if (currentTime < buffer.duration) {
            requestAnimationFrame(updateTime);
        }
    }

    div.addEventListener('change', () => {
        startTime = audioContext.currentTime;
        bufferSource.start(0);
        requestAnimationFrame(updateTime);
    });
}

setupAudio(audioUrl);

<div id="selector">
  <label for="valueSelection">Choose a value <select id="valueSelection">
      <option>off</option>
      <option>on</option>
    </select>
  </label>
</div>
<audio></audio>

Answer 1

出现此问题的原因是代码在

updateTime

函数的条件检查之外打印控制台输出：

   function updateTime() {
        let currentTime = audioContext.currentTime - startTime;
        console.log(`currentTime:${currentTime}`,`totalDuration${buffer.duration}`);
        if (currentTime < buffer.duration) {
            requestAnimationFrame(updateTime);
        }
    }

您基本上所做的是在以下情况下打印控制台日志输出：

• 每次当

  currentTime

  小于

  buffer.duration

  时打印日志，并且

• 当

  currentTime

  大于等于

  buffer.duration

  时打印一次日志

要解决此问题，只需将控制台日志语句移至条件检查逻辑中，如下所示：

   function updateTime() {
        let currentTime = audioContext.currentTime - startTime;
                if (currentTime < buffer.duration) {
                console.log(`currentTime:${currentTime}`,`totalDuration${buffer.duration}`);
                requestAnimationFrame(updateTime);
        }
    }

这只会在

currentTime < buffer.duration

为

true

时打印控制台日志输出。

检查以下修改后的代码：

const audioUrl = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/128337/ongoing-thing-crop.ogg';

/*test url2 - https://s.cdpn.io/1202/Star_Wars_original_opening_crawl_1977.mp3*/

const div = document.querySelector('div');

const audioContext = new(window.AudioContext || window.webkitAudioContext)();
let bufferSource = audioContext.createBufferSource();
let analyser = audioContext.createAnalyser();
let gainNode = audioContext.createGain();

let startTime;

async function setupAudio(url) {
  const response = await fetch(url);
  const audioData = await response.arrayBuffer();
  const buffer = await audioContext.decodeAudioData(audioData);

  bufferSource.buffer = buffer;
  bufferSource.connect(analyser);
  analyser.connect(gainNode);
  gainNode.connect(audioContext.destination);

  function updateTime() {
    let currentTime = audioContext.currentTime - startTime;
    if (currentTime < buffer.duration) {
      console.log(`currentTime:${currentTime}`, `totalDuration${buffer.duration}`);
      requestAnimationFrame(updateTime);
    }
  }

  div.addEventListener('change', () => {
    startTime = audioContext.currentTime;
    bufferSource.start(0);
    requestAnimationFrame(updateTime);
  });
}

setupAudio(audioUrl);

<div id="selector">
  <label for="valueSelection">Choose a value <select id="valueSelection">
      <option>off</option>
      <option>on</option>
    </select>
  </label>
</div>
<audio></audio>