如何让剩余时间不显示持续时间？

Question

这是我的网站。如果你知道如何制作 md 下拉菜单，请告诉我，但就在这里。

//this is a long but working workaround javascript being horrible at decimals. BTW Whosebug, if i put this in a question, FU. you made me add 99 lines of code to a simple site.
math = (type, parameters)=>{
  var tops = []
  switch(type){
    case "+":
      parameters.forEach((parameter)=>{
        if(typeof parameter !== "number"){
          throw "this isnt algebra, not even value "+index;
        }
        if((parameter.toString().split(".").length) > 1){
          tops.push(parameter.toString().split(".")[1].length);
        }else{
          tops.push(0);
        }
      });
      tops.sort(function(a, b){return b-a});
      parameters = parameters.map((parameter)=>{
        return parameter*(10**tops[0]);
      });
      var result = 0;
      parameters.forEach((parameter)=>{
        result += parameter;
      });
      return result/(10**tops[0]);
      break;
    case "-":
      parameters.forEach((parameter, index)=>{
        if(typeof parameter !== "number"){
          throw "this isnt algebra, not even value "+index;
        }
        if((parameter.toString().split(".").length) > 1){
          tops.push(parameter.toString().split(".")[1].length);
        }else{
          tops.push(0);
        }
      });
      tops.sort(function(a, b){return b-a});
      parameters = parameters.map((parameter)=>{
        return parameter*(10**tops[0]);
      });
      var result = 0;
      parameters.forEach((parameter, index)=>{
        if(index === 0){
          result+= parameter;
        }else{
          result-=parameter;
        }
      });
      return result/(10**tops[0]);
      break;
    case "*":
      parameters.forEach((parameter)=>{
        if(typeof parameter !== "number"){
          throw "this isnt algebra, not even value "+index;
        }
        if((parameter.toString().split(".").length) > 1){
          tops.push(parameter.toString().split(".")[1].length);
        }else{
          tops.push(0);
        }
      });
      tops.sort(function(a, b){return b-a});
      parameters = parameters.map((parameter)=>{
        return parameter*(10**tops[0]);
      });
      var result = 1;
      parameters.forEach((parameter)=>{
        result *= parameter;
      });
      return result/(10**tops[0]);
      break;
    case "/":
      parameters.forEach((parameter)=>{
        if(typeof parameter !== "number"){
          throw "this isnt algebra, not even value "+index;
        }
        if((parameter.toString().split(".").length) > 1){
          tops.push(parameter.toString().split(".")[1].length);
        }else{
          tops.push(0);
        }
      });
      tops.sort(function(a, b){return b-a});
      parameters = parameters.map((parameter)=>{
        return parameter*(10**tops[0]);
      });
      var result = 0;
      parameters.forEach((parameter, index)=>{
        if(index === 0){
          result+= parameter;
        }else{
          result/=parameter;
        }
      });
      return result/(10**tops[0]);
      break;
  }
}















pp = document.querySelector("#pp");
fi = document.createElement("input");
fi.type = "file";
bt = document.querySelector("#bt");
tt = document.querySelector("#tt");
cr = document.querySelector("#cr");
ts = document.querySelector("#ts");
tj = document.querySelector("#tj");
au = new Audio();
ly = document.querySelector("#ly");
sl = document.querySelector("#sl");
cr.addEventListener("click", ()=>{
  try{
    clearInterval(iv);
  }catch(USLISERROOR){}
  fl = null;
  au.pause();
  au = new Audio();
  pp.innerText = "▶️";
  ts.value = null;
  tj.hidden = true;
  tt.value = null;
  sl.value = null;
  sl.disabled = true;
  sl.readonly = false;
  sl.placeholder = "nothing is playing";
  ly.disabled = true;
  ly.value = "edt";
});
cr.click();
pp.addEventListener("click", ()=>{
  if(fl !== null){
    if(au.paused){
      au.play();
      pp.innerText = "⏸️";
      iv = setInterval(()=>{
        ts.value = au.currentTime;
        tj.value = au.currentTime;
        tt.value = math("-", [au.duration, au.currentTime]);
      }, 1);
    }else{
      au.pause();
      pp.innerText = "▶️";
      clearInterval(iv);
    }
  }else{
    bt.innerText = "waiting for input..."
    fi.click();
    fi.addEventListener("input", ()=>{
      fl = fi.files[0];
      bt.innerText = "checking file type...";
      if(fl.type.startsWith("audio/")){
        bt.innerText = "reading file...";
        rd = new FileReader();
        rd.readAsBinaryString(fl);
        rd.addEventListener("loadend", ()=>{
          au.src = "data:"+fl.type+";base64,"+btoa(rd.result);
          bt.innerText = "reconstructing audio ..."
          ts.value = 0;
          tj.hidden = false;
          tj.value = 0;
          sl.disabled = false;
          ly.disabled = false;
          sl.placeholder = "input lyrics";
          au.addEventListener("canplaythrough", ()=>{
            bt.innerText = "";
            tj.max = au.duration;   //Math.trunc(au.duration)+1;
            tt.value = au.duration;
          })
        });
      }else{
        bt.innerText = "please input audio only.";
        fl = null;
      }
    });
  }
});
imput = ()=>{
  ts.value = tj.value;
  tt.value = math("-", [au.duration, JSON.parse(tj.value)]);
}
tj.addEventListener("mousedown", ()=>{
  paused = au.paused;
  au.pause();
  pp.innerText = "️↔️";
  try{
    clearInterval(iv);
  }catch(USLISERROOR){}
  tj.addEventListener("input", imput);
});
tj.addEventListener("mouseup", ()=>{
  tj.removeEventListener("input", imput);
  au.currentTime = JSON.parse(tj.value);
  if(!paused){
    au.play();
    iv = setInterval(()=>{
      ts.value = au.currentTime;
      tj.value = au.currentTime;
      tt.value = math("-", [au.duration, au.currentTime]);
    }, 1);
    pp.innerText = "⏸️"
  }else{
    pp.innerText = "️▶️";
    ts.value = au.currentTime;
    tt.value = math("-", [au.duration, au.currentTime]);
  }
});
au.addEventListener("ended", ()=>{
  pp.innerText = "";
  clearInterval(iv);
});

ly.addEventListener("input", ()=>{
  switch(ly.value){
    case "edt":
      sl.disabled = false;
      sl.placeholder = "input lyrics";
      break;
    case "dmo":
      sl.style.color = "#000000"
      sl.disabled = true;
      sl.placeholder = "lyrics at pause";
  }
});
lyrics = [];
times = [];
sl.addEventListener("keyup", (event)=>{
  if (event.key === "Enter"){
    lyrics.push({
      ts: ts.value,
      lyrics: sl.value
    });
    times.push(ts.value);
    times.sort((a, b)=>{return a-b});
    sl.value = null;
  }
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Pley Myoozik</title>
    <script src="script.js" defer></script>
  </head>   
  <body style="font-family: arial;">
    <div style="position: absolute; top: 1%; left: 1%; width: 49%; height: 100%;">
      Audio control
      <br>
      <button id="pp" style="font-size: 200%; padding-top: 3px; padding-bottom: 7px; padding-left: 5px; padding-right: 5px;">▶️</button>
      <div id="bt"></div>
      <input type="number" readonly placeholder="nothing is playing" id="ts" style="width: 97%;">
      <input type="range" id="tj" min="0" max="0" step="0.000001" hidden style="width: 97%;">
      <input type="number" readonly placeholder="nothing is playing" id="tt" style="width: 97%;">
      <br>
      <button id="cr">clear file</button>
    </div>
    <div style="position: absolute; top: 1%; right: 1%; width: 49%; height: 100%;">
      <select id="ly" disabled>
        <option value="edt">LyricEdit'r</option>
        <option value="dmo">LyricDemo'r</option>
      </select>
      <br>
      <input type="text" placeholder="nothing is playing" id="sl" disabled style="position: absolute; bottom: 3%; width: 100%; font-size: 200%;">
    </div>
  </body>
</html>

其目的是播放文件中的音乐。

要使用它，请按播放按钮并上传文件。

我要解决的问题是#tj(range input) 的 mouseup 事件使#tt(bottom number input)显示音频的持续时间，而不是剩余时间。按下播放按钮后问题消失了（你必须暂停它才能重现问题），但是 returns 再次调整 tj 后。（仍然，必须暂停音频才能看到）

根据调试器（不会说谎，我不知道它是如何工作的，但我想我知道？），这发生在第 206 行，但没有任何意义....

我该如何解决这个问题，为什么会这样？

已经将近两天了，还没有在我的 public 网站上进行过一次编辑....我很忙。对不起。除非你打算回答，否则不要投票

Answer 1

在音频文件上设置 currentTime 会导致系统从该位置开始缓冲数据。

当它缓冲到足以播放时（发生得相当快），它会触发 canplaythrough 事件。

您在该事件上有一个事件处理程序，它始终将 tt 设置为持续时间。您需要在该处理程序中减去 currentTime，而不是假设它仅在 currentTime 为零时发生。

au.addEventListener("canplaythrough", ()=>{
            bt.innerText = "";
            tj.max = au.duration;   
            tt.value = math("-", [au.duration, au.currentTime]);
          })

如何让剩余时间不显示持续时间？

How to make remaining time NOT show duration?

html

javascript

html-input

audio-player