在变量中获取 mp3 文件的持续时间

Question

我想获取变量上音频的持续时间，尽管它总是 returns NaN。

我浏览了其他帖子，大多数答案都谈到必须加载音频文件的元数据，我尝试了他们的许多解决方案，但总是 returns 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 对象：

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

在变量中获取 mp3 文件的持续时间

Getting the duration of an mp3 file in a variable

javascript

audio