用JavaScript/jQuery閱讀Chrome中的mp3文件持續時間

我有一個'瀏覽器應用程序'，用戶應該能夠將本地mp3文件拖放到Chrome，並應該看到一些mp3信息（無需將文件上傳到服務器）...
到目前爲止，我可以成功讀取並顯示mp3標籤（使用JavaScript-ID3-Reader庫），但我在顯示mp3的持續時間方面掙扎了一番。只有js/jQuery纔有可能獲得該信息嗎？如果不是，你會推薦什麼來解決這個簡單的問題？我使用的是處理文件拖放到瀏覽器用JavaScript/jQuery閱讀Chrome中的mp3文件持續時間

代碼如下所示：

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

謝謝！

來源

2012-12-17 errata

如果文件沒有上傳，您將無法可靠地找出時間。你將有與元數據相同的問題，因爲你不能只上傳瀏覽器中的第一個x字節AFAIK – devsnd

嗯，好像我可以讀取mp3標籤，沒有任何問題，我正在使用該庫。。但是你想說，如果沒有實際上傳到服務器，就不可能獲得mp3播放時間？ – errata

啊，對不起，我弄錯了。您可能可以輕鬆地處理恆定比特率的文件。你應該能夠從你的id標籤庫中獲得比特率。那麼你可以簡單地通過比特率來劃分文件大小以獲得對持續時間的接近估計。 – devsnd

如果您使用的是支持音頻標籤的最新瀏覽器，則可以將MP3加載到<audio>元素中，並通過DOM訪問duration屬性。

要加載的音頻文件，瀏覽器中看到：window.URL.createObjectURL

來源

2012-12-17 11:45:00 closure

當我嘗試添加一行'objectURL = window.URL.createObjectURL（files [i]）;''''和'console.log'時，我只是得到了'blob：http％3A // localhost/402b0bff-6c6a-43c7 -9aff-66789ecb999e' ...我在這裏做錯了什麼？ – errata

看起來很棒。它不工作？ – closure

並且必須通過window.URL.revokeObjectURL（） – closure

試試這個

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-29 21:07:03

用JavaScript/jQuery閱讀Chrome中的mp3文件持續時間

回答

相關問題