Comment puis-je obtenir le html5 audio d'une durée de temps

J'ai un html5 <audio> balise dans la page, mais comment puis-je savoir sa durée?

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

InformationsquelleAutor hh54188 | 2012-06-26

15

Navigateur essayez-vous de ceci? Sur certains navigateurs, le duration ne fonctionne pas comme il devrait, de retour NaN comme vous l'avez mentionné.

Également vous assurer que le fichier audio est chargé avant de tenter de récupérer la durée?
- J'ai le résoudre, je le lier à une poignée d'événement pour l'événement loadedmetadata, dans ce cas, j'ai pu obtenir la duration propriété
- Qui allait être ma suggestion basée sur la réponse à votre question, mais heureux de voir que vous avez compris par vous-même!
InformationsquelleAutor Ian Devlin

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

seulement chrome c'est à dire pas de travail =/

InformationsquelleAutor Fábio Zangirolami

9

2018 solution:

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 proposé d'utiliser onloadedmetadata pour s'assurer que les métadonnées du fichier audio est extrait de la première. Aussi, ce que la plupart des gens n'ont pas de mentionner que vous avez pour cible le premier indice de l'audio de l'élément DOM avec [0] comme ceci:

-- Vanille Javascript:
```
var audio = $("#audio-1")[0];
audio.onloadedmetadata = function() {
  alert(audio.duration);
};
```
Si cela ne fonctionne pas essayer cela, mais pas de manière fiable et dépend de votre 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);
   }); 
});
```
InformationsquelleAutor AlexioVay
7

Dans un commentaire ci-dessus, il a été mentionné que la solution est de se lier à une poignée d'événement pour l'événement loadedmetadata. C'est la façon dont je l'ai fait -
```
audio.onloadedmetadata = function() {
  alert(audio.duration);
};
```
InformationsquelleAutor ThisClark

J'ai utilisé "canplaythrough" événement 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);

});

InformationsquelleAutor Patrick

J'ai eu du mal avec le chargement de la durée dans une Réagir la composante suivant @AlexioVay solution ici est une réponse si vous êtes à l'aide de Réagir:

Cela suppose l'utilisation d'un ref pour votre composant audio classe dont vous aurez besoin pour cible le 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 la 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 cela, la durée de h:mm:ss format d'écran dès que l'audio src chargement des données. De la douceur.

InformationsquelleAutor joshuaiz

1

D'obtenir la fin de la lecture, il est nécessaire que "loop = false' avec l'événement "onended'. Si loop = true, onended ne fonctionne pas;)

Faire une playlist, vous devez définir loop = false pour utiliser le " onended de l'événement afin de jouer la chanson suivante.

pour la durée, si votre script est fait correctement, vous pouvez récupérer la durée de n'importe où. Si la valeur de la "durée" est NaN le fichier n'est pas trouvé par le navigateur. Si la valeur est "Infini" 'INF' c'est un streaming, dans ce cas, ajoute 1 mn par rapport au temps de lecture 'currentime'.
Pour * I. E c'est de la merde. Currenttime peut être supérieure à la durée, dans ce cas, vous ne:
var durée = (ce.currentime> ce.la durée)? c'.currenttime: ce.durée;

C'est (O_ °)

InformationsquelleAutor Cherif

il est préférable d'utiliser l'événement comme celui-ci ...

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.......
    }
}

InformationsquelleAutor Cherif

-1

Simplement utiliser audioElement.duration
- Non, ça ne fonctionne pas, j'ai essayé:var audio = $('#audio')[0]; console.log('audio', audio.duration); mais le résultat est NaN
- Cela donne la bonne durée (testé dans Firefox), mais seulement après loadedmetadata événement qui s'est passé.
- Semble fonctionner lorsque vous utilisez setTimeout(function () { ... }, 10); au lieu de l'exécuter tout de suite.
InformationsquelleAutor Dave Hogan

Vous devez vous connecter pour publier un commentaire.