如何将我的搜索滑块与 HTML 中的音频播放器链接？

Posted 2023-02-25

【中文标题】如何将我的搜索滑块与 HTML 中的音频播放器链接？

【英文标题】：How do I link my seek slider with the audio player in HTML?

【发布时间】：2021-09-08 20:44:27

【问题描述】：

我正在制作一个涉及多个音频播放器的 Chrome 扩展程序。我目前有适用于每个单独音频的播放按钮，并且我还制作了搜索滑块的虚拟版本。我想将音频与滑块链接起来，这样我就可以控制音频的进度并查看时间。这是我现在拥有的：

popup.js

const manageAudio = (audio) => 
  const playButton = audio.nextElementSibling;
  let isPlaying = false;
  audio.onplaying = function () 
    isPlaying = true;
  ;
  audio.onpause = function () 
    isPlaying = false;
  ;
  playButton.addEventListener("click", function () 
    if (isPlaying) 
      audio.pause();
     else 
      audio.play();
    
  )
  $(playButton).click(function () 
    $(playButton).toggleClass("paused");
  );
;

$(document).ready(function () 
  for (const audio of $('audio')) 
    manageAudio(audio);
  
);

popup.html

<audio src=".../...mp3" type="audio/mp3"></audio>
<div class="play"></div>
<div class="controls">
    <input type="range" value="0" class="slider">
    <p>0:00</p>
    <p class="endtime">3:25</p>
</div>

页面如下所示：

任何帮助将不胜感激！

【参考方案1】：

建议：

将 range input 的最小值设置为 0； 检查oncanplay是否可以播放音频（查找更多here）；

至少达到某个点需要采取的步骤

获取跟踪时间（以秒为单位）； 将范围 input 的最大值设置为total 跟踪时间（duration - 以秒为单位）； 然后使用ontimeupdate，您可以获得当前播放时间或设置滑块的值（更多信息请查看here； 要更新滑块，您可以获取曲目的当前时间 (currentTime) 并将此值设置为 范围 input。

因此，您只需要跟踪滑块和音频上的更新事件，并且在任何这些更改之后，您将采取行动更新一个或另一个源。

audio.currentTime = 30; // where audio is your audio object; 30 is 30th secnd of your track

请告诉我天气，这足以让你继续

如何设置音频位置？ （见here）