How can I get the html5 audio's duration time

问题

I have a html5 <audio> tag in page, but how can I know its duration time?

<audio controls="">
    <source src="p4.2.mp3">
</audio>

回答1:

2018 solution:

You will get undefined or NaN (not a number) when the audio metadata isn't loaded yet. Therefore some people suggested to use onloadedmetadata to make sure the metadata of the audio file is fetched first. Also, what most people didn't mention is that you have to target the first index of the audio DOM element with [0] like this:

-- Vanilla Javascript:

var audio = $("#audio-1")[0];
audio.onloadedmetadata = function() {
  alert(audio.duration);
};

If this won't work try this, however not so reliable and dependent on users connection:

setTimeout(function () {
    var audio = $("#audio-1")[0];
    console.log("audio", audio.duration);
}, 100);

-- JQuery:

$(document).ready(function() {
   var audio = $("#audio-1")[0];
   $("#audio-1").on("loadedmetadata", function() {
       alert(audio.duration);
   }); 
});

回答2:

var au = document.createElement('audio');
au.addEventListener('loadedmetadata',function(){
    au.setAttribute('data-time',au.duration);
},false);

回答3:

In a comment above, it was mentioned that the solution is to bind an event handle to the event loadedmetadata. This is how I did that -

audio.onloadedmetadata = function() {
  alert(audio.duration);
};

回答4:

I used "canplaythrough" event to get the track duration. I have a case where I have two players, and I want to stop the second player 2 seconds before the first one is complete.

$('#' + _currentPlayerID).on("canplaythrough", function (e) {   
    var seconds = e.currentTarget.duration;    
    var trackmills = seconds * 1000;
    var subTimeout = trackmills - 2000; //2 seconds before end

    //console.log('seconds ' + seconds);
    //console.log('trackmills ' + trackmills);
    //console.log('subTimeout ' + subTimeout);

    //Stop playing before the end of thet track
    //clear this event in the Pause Event
    _player2TimeoutEvent = setTimeout(function () { pausePlayer2(); }, subTimeout);

});

回答5:

I was struggling with loading the duration in a React component so following @AlexioVay's solution, here is an answer if you're using React:

This assumes you are using a ref for your audio component class which you will need to target the audio elements for your play/pause handler(s).

<audio /> element:

<audio ref={audio => { this.audio = audio }} src={this.props.src} preload="auto" />

Then in your componentDidMount():

componentDidMount() {

    const audio = this.audio

    audio.onloadedmetadata = () => {
        console.log(audio.duration)
        this.setState({
           duration: this.formatTime(audio.duration.toFixed(0))
        })
    }
}

And finally the formatTime() function:

formatTime(seconds) {
    const h = Math.floor(seconds / 3600)
    const m = Math.floor((seconds % 3600) / 60)
    const s = seconds % 60
    return [h, m > 9 ? m : h ? '0' + m : m || '0', s > 9 ? s : '0' + s]
        .filter(a => a)
        .join(':')
}

With this, the duration in h:mm:ss format will display as soon as the audio src data is loaded. Sweetness.

回答6:

To obtain the end of reading it is necessary that 'loop = false' with the event 'onended'. If loop = true, onended does not work;)

To make a playlist, you have to set loop = false to use the 'onended' event in order to play the next song.

for the duration if your script is done correctly you can recover the duration anywhere. If the value of 'duration' is NaN the file is not found by the browser. If the value is 'Infinity' 'INF' it is a streaming, in this case, adds 1 mn compared to the reading time 'currentime'. For * I.E it's crap. Currenttime may be greater than duration, in which case you do: var duration = (this.currentime> this.duration)? this.currenttime: this.duration;

That's (O_ °)

回答7:

Simply use audioElement.duration

回答8:

it's better to use the event like this ...

ObjectAudio.onprogress  =function(){
    if(this.buffered.length){
    var itimeend = (this.buffered.length>1)? this.buffered.end(this.buffered.length-1):this.buffered.end(0);
    ....
        Your code here.......
    }
}

来源：https://stackoverflow.com/questions/11203773/how-can-i-get-the-html5-audios-duration-time

标签

html5

audio

duration