javascript - 在 javascript 中创建 "fake"媒体播放器？

Question

我会试着描述我在做什么。

我目前有 2 个 HTML5 音频元素，我们称它们为 Master 和 Slave。

它们都加载完全相同的媒体文件，但从属设备默认情况下将其音频静音。

每个玩家都可以被对方控制(暂停、播放、擦洗等)。

每个播放器都有自己的自定义样式，并从外部 JSON 文件接收持续时间数据(因此两者都不依赖 audio.duration 来获取和计算播放器中其他功能的持续时间，例如擦洗条)。

一切都很完美，但明显的缺点是每首歌曲的音频文件都加载了两次。 (音频文件由 PHP 以小块的形式提供 - audio.src 中没有指向 .mp3 文件的直接链接 - 相反，它是一个到服务器端脚本的链接，该脚本需要对每个初始请求进行唯一身份验证，因此音频文件没有被缓存 - 因此双重下载)。

我实际上根本不需要在静音播放器上使用 HTML5 音频元素，除了获取轨道的 currentTime 之外，有什么办法可以“伪造”音频元素吗？也许通过为轨道的长度运行 setTimeout 或类似的东西？

我只需要可以模仿 audio.currentTime 的东西HTML5 音频元素吐出以更新进度(擦洗)栏的值，但我真的不知道从哪里开始，或者是否有可能？

欢迎任何建议，非常感谢提前。

编辑 - 为清楚起见，我的网站的工作方式类似于 Soundcloud作品。即 - 屏幕上呈现的许多玩家(奴隶)，所有这些都可以单独播放，所有这些也可以由页脚玩家(主人)控制。我网站上的所有内容(除了包含主播放器的元素)都是使用 Ajax 动态加载的。

Answer 1

您应该能够“伪造”从属音频播放器，如下所示:

在 HTML 和 CSS 中构建元素并将其放置在静态以外的任何位置，以启用使用 javascript 动画。您在伪造播放器上的进度条最初将具有以下 css :

#progress-bar{
    left: 0px;
}

您可以使用 setInterval 为假玩家的进度条设置动画，如下所示:

function moveRight() {
  var progressBar = document.getElementById('progressBar');
  var pos = 0;
  //position on X Axis

  let move = setInterval(frame,5);
  //start moving, once every 5 miliseconds

  function frame() {
      if (pos == 400) {
        clearInterval(move);
      } else {
        pos++; 
        progressBar.style.left = 5 + pos/10 + '%'; 
      }
  }
}

您必须调整此示例中的数字以适合您的播放器的长度。您还必须在此行考虑实际音频文件的长度:
if (pos == 400)当您单击主播放器时，调用此 moveRight() 函数，该函数将依次移动假 slider 。使用数值播放，直到移动类似于真正的音频播放器 slider 。