Discussion :

[iBesorongola]

Bonjour !
Je me suis confectionné un simple lecteur audio. Les boutons Play/Pause/Stop fonctionnent très bien. C'est sur l'affichage de la durée de la piste que j'ai un problème.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
/* Ma piste audio est dans une balise audio mytrack */
var mytrack = document.getElementById('mytrack');
 
/* La durée de la piste devrait s'afficher dans un span fullDuration */
var duration = document.getElementById('fullDuration');
 
/* Pour afficher la durée de la piste */
duration.innerHTML = mytrack.duration;

Sur ma page, ce script me renvoie "NaN" ;



pourtant quand je lance dans un console, cela m'affiche bien la durée de la piste en millisecondes.





Alors si quelqu'un peut m'expliquer pourquoi la durée ne s'affiche pas sur la page.
Merci pour votre aide.

[SpaceFrog]

A quel moment le script est il lancé ?
l'élément n'est pas instancié

[iBesorongola]

A quel moment le script est il lancé ?
l'élément n'est pas instancié

Sur cette remarque j'ai modifié mon script comme suit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
var mytrack = document.getElementById('mytrack');
var duration = document.getElementById('fullDuration');
 
// Ici j'ai créé une fonction
function printDuration(){
duration.innerHTML = mytrack.duration;
}
 
// J'appelle la fonction avec un window.onload
window.onload = printDuration;

Et cela marche nickel, merci à SpaceFrog pour la piste.

PS : S'il y a une autre façon de faire je suis preneur.

[NoSmoking]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
// J'appelle la fonction avec un window.onload
window.onload = printDuration;

Et cela marche nickel, merci à SpaceFrog pour la piste.

PS : S'il y a une autre façon de faire je suis preneur.

l’inconvénient de cette méthode est qu'elle écrase (supprime), toutes celles déclarées avant, cela peut poser problème.

Il existe, pour « faire propre »

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
// Initialisation après chargement du DOM
document.addEventListener("DOMContentLoaded", function() {
    // ici le code à lancer après chargement de la page
});

Dans ton cas cela donnerait, pour faire simple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
// Initialisation après chargement du DOM
document.addEventListener("DOMContentLoaded", function() {
    // ici le code à lancer après chargement de la page
    printDuration();
});

[danielhagnoul]

mdn duration : HTMLMediaElement.duration

myDuration = htmlMediaElement.duration

A double-precision floating-point value indicating the duration of the media in seconds. If no media data is available, the value NaN is returned. If the element's media doesn't have a known duration—such as for live media streams—the value of duration is +Infinity.

Valeur à virgule flottante en double précision indiquant la durée du support en secondes. Si aucune donnée multimédia n'est disponible, la valeur NaN est renvoyée. Si le média de l'élément n'a pas de durée connue, comme pour les flux de média en direct, la valeur de la durée est + Infinity.