音频对象持续时间不断变化？

Question

我正在尝试获取列表中每个对象的持续时间（以秒为单位），但我的结果遇到了一些问题。我认为这是因为我没有完全理解异步行为。

我从 n 个对象的数组 songs[] 开始我的函数。在我的函数结束时，目标是有一个数组songLengths，其中第一个值是songs[] 中第一个对象的持续时间，依此类推。

我试图在这个例子之后为我的函数建模：JavaScript closure inside loops – simple practical example。但是我得到每个songLengths[] 索引的未定义值。

$("#file").change(function(e) {
  var songs = e.currentTarget.files;
  var length = songs.length;
  var songLengths = [];

  function createfunc(i) {
    return function() {
      console.log("my val = " + i);
    };
  }

  for (var i = 0; i < length; i++) {
    var seconds = 0;
    var filename = songs[i].name;
    var objectURL = URL.createObjectURL(songs[i]);
    var mySound = new Audio([objectURL]);

    mySound.addEventListener(
      "canplaythrough",
      function(index) {
        seconds = index.currentTarget.duration;
      },
      false,
    );
    songLengths[i] = createfunc(i);
  }
});

Answer 1

由于promises，这样的事情应该可以在没有混乱的闭包的情况下工作，并且增加了干净的异步性。

基本上，我们声明了一个辅助函数computeLength，它采用HTML5 File 并执行您已经完成的计算其长度的魔法。 （虽然我确实添加了URL.revokeObjectURL 调用以避免内存泄漏。）

不过，promise 不只是返回持续时间，而是使用包含原始文件对象和计算的持续时间的对象解析。

然后在事件处理程序中，我们映射选择的files 以从中创建computeLength 承诺，并使用Promise.all 等待所有承诺，然后记录[{file, duration}, {file, duration}, ...] 的结果数组。

function computeLength(file) {
  return new Promise((resolve) => {
    var objectURL = URL.createObjectURL(file);
    var mySound = new Audio([objectURL]);
    mySound.addEventListener(
      "canplaythrough",
      () => {
        URL.revokeObjectURL(objectURL);
        resolve({
          file,
          duration: mySound.duration
        });
      },
      false,
    );
  });  
}

$("#file").change(function(e) {
  var files = Array.from(e.currentTarget.files);
  Promise.all(files.map(computeLength)).then((songs) => {
    console.log(songs);
  });
});