gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 22:11:12 25 4
gpt4 key购买 nike

我正在尝试添加当前时间/总时间元素。看起来像 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 .

最佳答案

在你的 fiddle 中,我添加了:
<span id="tracktime">0:00 / 0:00</span>
<div id="audioplayer">元素(界面)。

我还替换了 ontimeupdate <audio>的功能元素:
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;
}

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

关于javascript - 如何将当前时间/总时间添加到自定义音频播放器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59553882/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com