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

Question

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

我用 songs[] 个包含 n 个对象的数组开始我的函数。在我的函数结束时，目标是得到一个数组 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);
  });
});

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

Audio object duration keeps changing?

javascript

audio

duration

metadata