了解 javascript jquery 函数以获取文件持续时间？ [关闭]

Question

我有一个 javascript 函数可以正确获取一个上传文件的文件持续时间，我正在尝试重新使用工作函数，以便我可以在其他地方获取文件持续时间，但我遇到了问题，我的 html5 代码看起来像这样：

<link rel="stylesheet" type="text/css" href="style.css">
<p>Select a .mp3 file</p>
<input type="file" id="file" multiple="multiple"/>

<audio id="audio"></audio>

<p>
  <label>Song Duration:</label>
  <span id="duration"></span>
</p>

<p>
  <label>Tracklist:</label>
  <span id="tracklist"></span>
</p>

我的 javascript 函数会在第一个文件上传后立即获取持续时间，如下所示：

$("#audio").on("canplaythrough", function(e){
    console.log("calculating duration");
    var seconds = e.currentTarget.duration;
    var duration = moment.duration(seconds, "seconds");

    var time = "";
    var hours = duration.hours();
    if (hours > 0) { time = hours + ":" ; }

    time = time + duration.minutes() + ":" + duration.seconds();
    $("#duration").text(time);

    URL.revokeObjectURL(objectUrl);
});

我基本上是在尝试复制此功能，因为我知道它可以工作，并在上传的多个文件的数组中获取每首歌曲的持续时间（以秒为单位）。但是如果我只是尝试歌曲[i].duration，那总是会产生一个“未定义”的值，这是一个带有我完整代码的 jsfiddle：

https://jsfiddle.net/gt4wro11/

tldr;我有一个用户上传的多个文件的数组，我试图打印出数组中每个文件的持续时间。这 $("#audio").on("canplaythrough", function(e){ 函数成功获取了一个文件的持续时间，我正在尝试重新调整它的用途以满足我的需求，但不知道如何让它工作。

感谢您处理这么长的问题！

Answer 1

songs[i] 是File 的一个实例，你需要一个HTMLAudioElement 的实例。

每当触发文件选择的change 事件时，您应该读取选定的文件，为每个文件创建一个对象URL，并通过创建不可见的<audio> 元素来加载它们。等到所有音频元素的canplaythough 已触发，然后读取它们的持续时间。

您的代码可能看起来像这样：（您可能需要编辑某些部分以跟踪每个音频的文件名/大小/等）

function loadAudio(url) {
    return new Promise((resolve, reject) => {
    var audio = new Audio();
    audio.oncanplaythrough = () => resolve(audio);
    audio.onerror = reject;
    audio.src = url;
  });
}

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

    Promise.all(Array.from(files).map(file => loadAudio(URL.createObjectURL(file))))
    .then(audios => {
        console.log("Audio elements: ", audios)
    });
});