代码之家 › 专栏 › 技术社区 › spice

用javascript创建一个“假”媒体播放器?

audio javascript

spice · 技术社区 · 6 年前

我试着描述一下我在做什么。

我目前有两个HTML5音频元素,让我们称之为主和从。

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

audio.duration 获取并计算播放器中其他函数(如擦洗条)的持续时间。

audio.src -相反,它是指向服务器端脚本的链接,每个初始请求都需要唯一的身份验证,因此音频文件不会被缓存(因此需要双重下载)。

我只需要能模仿 audio.currentTime HTML5音频元素吐出的值来更新进度(scrub)栏,但我真的不知道从哪里开始,或者是否可能?

欢迎您提出任何建议,谢谢。

编辑-为了清晰起见,我的网站的工作方式与 Soundcloud

1 回复 | 直到 6 年前

apetrisor 6 年前

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