Question

我有一个'浏览器应用程序'，用户应该能够将本地mp3文件拖放到Chrome，并且应该看到一些mp3信息（不将文件上传到服务器）...
到目前为止，我可以成功读取和显示mp3标签（使用JavaScript-ID3-Reader库），但是我在显示mp3的持续时间方面有点挣扎。是否有可能只使用js / jQuery获取该信息？如果没有，你会建议什么来解决这个简单的问题？

我用来处理拖放文件到浏览器的代码如下所示：

function initialize() {
    var target = document;
    if (target === null) {
        return false;
    }

    target.addEventListener('drop', function(event) {
        event.preventDefault();
        var files = event.dataTransfer.files;
        console.log(files);
        for (var i = 0; i < files.length; i++) {
            processFile(files[i]);
            objectURL = window.URL.createObjectURL(files[i]);
            console.log(objectURL);
        }
    }, true);
}

谢谢！

Answer 1

如果您使用支持音频标签的最新浏览器，则可以在<audio>元素中加载mp3并通过DOM访问duration属性。

要将音频文件加载到浏览器，请参阅：window.URL.createObjectURL

Answer 2

试试这个

var audio = new Audio()
audio.addEventListener("timeupdate", function() {
  console.log(audio.currentTime)
})
audio.addEventListener("canplaythrough", function() {
  console.log(audio.duration)
})

target.on("change", function(e) {
    var file = e.currentTarget.files[0]
    var objectUrl = URL.createObjectURL(file)
    audio.src = objectUrl
    $("#duration").html(audio.duration)
})

使用JavaScript / jQuery在Chrome中读取mp3文件的持续时间

2 个答案: