在變量中獲取 mp3 文件的持續時間

Question

我想獲取變量上音頻的持續時間，盡管它總是返回 NaN。

我瀏覽了其他帖子，大多數答案都在談論必須加載音頻文件的元數據，我嘗試了他們的許多解決方案，但它總是返回 NaN。

這兩個都返回 NaN：

        audio.addEventListener('loadedmetadata', function(){
           audio.setAttribute("data-time", audio.duration);
        }, false)
        console.log(audio.duration);
        audio.play(); 

        audio.onloadedmetadata = function() {
            console.log(audio.duration);
        };
        audio.play();

音頻播放沒有問題，其他方法也有效，我只是無法獲得音頻的持續時間。

任何的想法？

蒂亞

Answer 1

有幾種方法可以達到您的目標：

設置您的輸入字段：

<input type="file" id="fileinput"/>

第一個來自您的本地文件：

var audio = document.createElement('audio');

// Add a change event listener to the file input
document.getElementById("fileinput").addEventListener('change', function(event){
    var target = event.currentTarget;
    var file = target.files[0];
    var reader = new FileReader();
  
    if (target.files && file) {
        var reader = new FileReader();

        reader.onload = function (e) {
            audio.src = e.target.result;
            audio.addEventListener('loadedmetadata', function(){
                // Obtain the duration in seconds of the audio file (with milliseconds as well, a float value)
                var duration = audio.duration;
            
                // example 12.3234 seconds
                console.log("The duration of the song is of: " + duration + " seconds");
                // Alternatively, just display the integer value with
                // parseInt(duration)
                // 12 seconds
            },false);
        };

        reader.readAsDataURL(file);
    }
}, false); 

最后一種方法來自 url：

var mp3file = "https://example.com/myaudio.mp3";

// Create an instance of AudioContext
var audioContext = new (window.AudioContext || window.webkitAudioContext)();

// Make an Http Request
var request = new XMLHttpRequest();
request.open('GET', mp3file, true);
request.responseType = 'arraybuffer';
request.onload = function() {
    audioContext.decodeAudioData(request.response, function(buffer) {
        // Obtain the duration in seconds of the audio file (with milliseconds as well, a float value)
        var duration = buffer.duration;

        // example 12.3234 seconds
        console.log("The duration of the song is of: " + duration + " seconds");
        // Alternatively, just display the integer value with
        // parseInt(duration)
        // 12 seconds
    });
};

// Start Request
request.send();

祝你今天過得愉快

Answer 2

假設您已經從輸入中獲得了一個file object，這是非常簡單易讀的方法：

const getDuration = (file) => {
    const reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onloadend = (e) => {
        const ctx = new AudioContext();
        const audioArrayBuffer = e.target.result;
        ctx.decodeAudioData(audioArrayBuffer, data => {
            // this is the success callback
            const duration = data.duration;
            console.log('Audio file duration: ' + duration);
        }, error => {
            // this is the error callback
            console.error(error);
        });
    };
};