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

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

duration metadata audio javascript

0

Martin · 技术社区 · 7 年前

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

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

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);
  }
});

1 回复 | 直到 7 年前

1

AKX Bryan Oakley 7 年前

类似这样的东西应该可以在没有大量闭包的情况下工作,并且由于 promises .

基本上我们声明了一个helper函数, computeLength File 你已经用魔法计算了它的长度。(尽管我添加了 URL.revokeObjectURL 调用以避免内存泄漏。)

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

files 选择创建 计算长度 他们的承诺,以及 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);
  });
});