Question

我将尽力描述我在做什么。

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

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

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

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

一切正常，但是明显的缺点是音频文件为每首歌曲加载了两次。（PHP将音频文件打包为小块文件-audio.src中没有直接链接到.mp3文件的链接-而是指向服务器端脚本的链接，该脚本需要对每个初始请求进行唯一身份验证，因此音频文件没有被缓存-因此需要双重下载。

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

我只需要一些能模仿HTML5音频元素吐出的audio.currentTime值来更新进度条（进度条）的工具，但我真的不知道从哪里开始或者是否有可能？ / p>

欢迎提出任何建议，在此先感谢。

编辑-为清楚起见，我的网站的工作方式类似于Soundcloud的工作方式。即-屏幕上呈现了很多播放器（从属），所有这些都可以单独播放，也可以由页脚播放器（主）控制。我网站上的所有内容（除了包含Master播放器的元素之外）都动态加载了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（）函数，它将依次移动假滑块。播放数值，直到动作类似于真实的音频播放器滑块为止。

在javascript中创建“假”媒体播放器？

1 个答案: