Comment puis-je obtenir la durée de l'audio html5

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

dans un commentaire ci-dessus, il a été mentionné que la solution est de lier un gestionnaire d'événement à l'événement loadedmetadata. C'est la façon dont je l'ai fait -

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

solution 2018:

Vous obtiendrez undefined ou NaN (pas un nombre) lorsque les métadonnées audio n'est pas encore chargé. Par conséquent, certaines personnes ont suggéré d'utiliser onloadedmetadata pour s'assurer que les métadonnées du fichier audio sont récupérées en premier. En outre, ce que la plupart des gens n'ont pas mentionné est que vous devez cibler le premier index de L'élément DOM audio avec [0] comme ceci:

-- Vanille Javascript:

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

Si cela ne fonctionne pas essayez ceci, cependant pas si fiable et dépend de connexion:

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

j'ai trouvé cet article, pourrait être utile.

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-with-jquery/

j'ai utilisé l'événement "canplaythrough" pour obtenir la durée de la piste. J'ai un cas où j'ai deux joueurs, et je veux arrêter le deuxième joueur 2 secondes avant que le premier soit terminé.

$('#' + _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);

});

j'ai eu du mal à charger la durée dans un composant React donc en suivant la solution de @AlexioVay, voici une réponse si vous utilisez React:

cela suppose que vous utilisez un ref pour votre composant audio classe dont vous aurez besoin pour cible audio éléments pour votre play/pause gestionnaire(s).

<audio /> élément:

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

Puis dans votre componentDidMount():

componentDidMount() {

    const audio = this.audio

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

Et enfin formatTime() fonction:

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(':')
}

avec ceci, la durée en h:mm:ss le format s'affichera dès que les données audio src seront chargées. Douceur.

simplement audioElement.durée

Dave