如何将当前时间/总时间添加到自定义音频播放器？

Posted 2023-02-25

【中文标题】如何将当前时间/总时间添加到自定义音频播放器？

【英文标题】：How do you add the current time / total time to custom audio player?

【发布时间】：2020-01-01 15:52:21

【问题描述】：

我正在尝试添加当前时间/总时间元素。看起来像 01:11/03:00 的东西。到目前为止，我有进度条和播放暂停按钮。这些是我的变量：

var music = document.getElementById('audioPlayer'); // id for audio element
var duration; // Duration of audio clip
var pButton = document.getElementById('pButton'); // play button
var playhead = document.getElementById('playhead'); // playhead
var timeline = document.getElementById('timeline'); // timeline

// timeline width adjusted for playhead
var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;

这是我的音频播放器元素：

  <audio id="audioPlayer" preload="true" ontimeupdate="initProgressBar()">
        <source src="oh-my.mp3">      
    </audio>
    <div id="wrapper">
        <!--Audio Player Interface-->
        <div id="audioplayer">
            <button id="pButton" class="play"></button>
            <div id="timeline">
                <div class="progress" id="progress"></div>
                <div id="playhead"></div>


            </div>
        </div>
    </div>

链接到我的fiddle。

【问题讨论】：

也许这有帮助？ display audio currentTime

我无法在那里找到我的答案，还有其他想法吗？

【参考方案1】：

在你的小提琴中，我添加了：<span id="tracktime">0:00 / 0:00</span> 在<div id="audioplayer"> 元素（接口）中。

我还将<audio>元素的ontimeupdate函数替换为：ontimeupdate="updateTracktime()" 其中函数updateTracktime() 定义如下：

function updateTracktime()
  let audioPlayer = document.getElementById("audioPlayer");
  var counter = Math.round(Math.floor(audioPlayer.currentTime)/60)+":"+Math.floor(audioPlayer.currentTime-Math.round(Math.floor(audioPlayer.currentTime)/60))+"/"+Math.round(Math.floor(audioPlayer.duration)/60)+":"+Math.floor(audioPlayer.duration-Math.round(Math.floor(audioPlayer.duration)/60));
  document.getElementById('tracktime').innerhtml = counter;
 

它似乎显示了你想要的东西？我刚刚使用了我建议的帖子中的答案，但是您可以改用变量和元素吗？

【讨论】：

谢谢你，虽然你能回答我最近的问题吗？