0

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

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

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

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

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

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

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

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

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

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

4

1 回答 1

0

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

  • 在 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() 函数，该函数将依次移动假滑块。使用数值播放，直到移动类似于真正的音频播放器滑块。

于 2018-10-01T00:48:13.167 回答