3

我有一个“浏览器应用程序”,用户应该能够将本地 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);
}

谢谢!

4

2 回答 2

3

试试这个

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)
})
于 2017-01-29T21:07:03.007 回答
1

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

要将音频文件加载到浏览器,请参见:window.URL.createObjectURL

于 2012-12-17T11:45:00.613 回答