5546 sujets

Sémantique web et HTML

[Résolu] Evénements sur balise audio

Bonsoir

EN essayant de moderniser mon site, j'ai introduit des balise audio.
Le lancement et les contrôles ne posent pas de problème.
Par contre j'aimerais rendre invisible la div qui contient cette balise lorsque la lecture de sons s'arrête, soit parce qu'on est à la fin du fichier, soit parce qu'il y a une erreur.
J'ai écrit:

                    var lectureObject = document.getElementById('lecture');
                    ..............................................................................
                    with(lectureObject) {
                        src = fileName;
                        onabort = lectureEnd;
                        ended = lectureEnd;
                        error = lectureEnd;
                    }

avec "lectureEnd" = une fonction de terminaison.
Je constate que cette fonction n'est jamais appelée.
Quelqu'un aurait il une idée sur ce qui coince?

Merci de votre aide
JP
Modifié par PapyJP (06 Jan 2015 - 19:31)
adrien881 a écrit :
with(lectureObject) {

Je ne connais pas cette syntaxe.

C'est la syntaxe standard pour dire que les propriétés ou méthodes qui suivent appartiennent à l'objet "lectureObject".
Tony Monast a écrit :
Bonjour,

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/with

Son utilisation est déconseillée.

Ça existe depuis plus de 20 ans!

Il est exact qu'il faut faire attention à ce qu'on écrit, car -- contrairement à la même instruction dans d'autres langages -- les effets de bord d'erreurs de syntaxe pourraient conduire à des problèmes. Mais ici, ce n'est manifestement pas le cas.
En fait tout se passe comme si ces événements n'etaient pas reconnus.
Et ainsi ? 
var lectureObject = document.getElementById('lecture');
lectureObject.src = fileName;
lectureObject.onabort = function () {
	lectureEnd();
};
lectureObject.onended = function () {
	lectureEnd();
};
lectureObject.onerror = function () {
	lectureEnd();
};
adrien881 a écrit :
Et ainsi ? 
var lectureObject = document.getElementById('lecture');
lectureObject.src = fileName;
lectureObject.onabort = function () {
	lectureEnd();
};
lectureObject.onended = function () {
	lectureEnd();
};
lectureObject.onerror = function () {
	lectureEnd();
};

C'est la même chose avec une syntaxe légèrement différente.
J'ai essayé (on ne sait jamais!) mais hélas ça ne marche pas mieux.
Ce que je me demande c'est si les évènements audio sont bien gérés de cette façon, à commencer par FF, mon navigateur favori.
Modifié par PapyJP (08 Jan 2015 - 15:43)
Modérateur
Bonjour PapyJP,

Est-ce que tu attends que le DOM soit prêt avant de faire ton getElementByID et d'attacher les évènements?

Normalement, j'utilise JQuery, mais voici un exemple en JS pur : http://codepen.io/anon/pen/pvRPva
Modifié par Tony Monast (08 Jan 2015 - 18:01)
Modérateur
Rebonjour,

À mon avis, c'est fileName qui n'est pas défini ou l'attribut ID de l'élément qui est incorrect. Difficile d'en être certain sans voir la totalité de la page et du script.

Un bon réflexe lorsqu'un script ne fonctionne pas est de regarder dans la console du navigateur pour y détecter les erreurs Javascript. C'est dans Outils > Développement Web > Console Web > Onglet JS

Par exemple, dans ton code, si jamais la variable fileName est non définie (fileName is not defined), le script s'arrêtera là et les évènements ne seront jamais reliées à lectureObject.
Tony Monast a écrit :
Rebonjour,

À mon avis, c'est fileName qui n'est pas défini ou l'attribut ID de l'élément qui est incorrect. Difficile d'en être certain sans voir la totalité de la page et du script.

Un bon réflexe lorsqu'un script ne fonctionne pas est de regarder dans la console du navigateur pour y détecter les erreurs Javascript. C'est dans Outils > Développement Web > Console Web > Onglet JS

Par exemple, dans ton code, si jamais la variable fileName est non définie (fileName is not defined), le script s'arrêtera là et les évènements ne seront jamais reliées à lectureObject.

Je ne vois aucune erreur de ce genre.
Voici la page : http://www.alma-musica.net/html/repertoire.php?cur (ne pas oublier "?cur" pour éviter d'avoir une page énorme contenant tout le répertoire des 3 dernières années)
On peut afficher le HTML et le JS par l'habituel Ctrl-U de FIreFox ou l'équivalent des autres navigateurs.
On peut lancer le script de lecture en appuyant sur les petits carrés dorés, les petits hauts-parleurs ou le sigle Abc.
Si tout se passait bien, lorsque l'on a fini la lecture d'un fichier, ça devrait "cacher" la div contenant les contrôles audio. Pour pallier ce problème, et éviter que ça reste affiché indéfiniment j'ai fait en sorte que si on clique en dehors de cette div, elle disparaisse.

Voici la totalité du code js:

var lectureObject, startLecture = 0;
                
                function lire(fileName, curdiv) {
                    var now = new Date();
                    if(now - startLecture < 3000) return;
                    startLecture = now;
                    if(!lectureObject) {
                        lectureObject = $('lecture');
                    }
                    var lectdiv = $('lectdiv');
                    if (! lectdiv) {
                        if(fileName != '') window.open(fileName);
                    }
                    if (fileName == '') {
                        lectdiv.style.display = 'none';
                        lectureObject.muted = true;
                        return;
                    }  
                    var nameParts = fileName.split('.');
                    var ext = nameParts[nameParts.length - 1];
                    if(ext != 'mp3' && ext != 'ogg') {
                        window.open(fileName);
                        return;
                    }
                    lectureObject.src = fileName;
                    lectureObject.onabort = function() {lire('');};
                    lectureObject.ended = function() {lire('');};
                    lectureObject.error = function() {lire('');};
                    var curRectangle = new Rectangle(curdiv);
                    with(lectdiv.style) {
                        left = curRectangle.right + 6 + 'px';
                        top = curRectangle.top + 'px';
                        display = '';
                    }
                }
                function pageclick() {
                    var lectdiv = $('lectdiv');
                    if(!lectdiv) return;
                    var lectRectangle = new Rectangle(lectdiv);
                    if(lectRectangle.contains(mouseX, mouseY)) return;
                    lire('');
                }

la fonction "$" est définie en dehors et se traduit par "document.getElementById"
l'objet "Rectangle" définit un rectangle englobant l'élément.
if(lectRectangle.contains(mouseX, mouseY)) signifie "est-ce que la souris se trouve dans le rectangle au moment du clic".
avec 

<body onclick="pageclick();">

Modifié par PapyJP (08 Jan 2015 - 21:38)
Modérateur
Je n'ai pas eu le temps de tester avec ton code, mais le problème semble venir du nom de l'évènement. Tu utilises

object.ended=function(){myScript};

Alors qu'il faudrait que ce soit :

object.onended=function(){myScript};

Idem pour error.

Voir la syntaxe selon la méthode choisie :
http://www.w3schools.com/jsref/event_onended.asp

Peux-tu le tester?
Modifié par Tony Monast (08 Jan 2015 - 22:07)
Merci Tony

La syntaxe me semblait bizarre.
En fait, si je comprends bien "ended" est un état et "on ended" est un événement. La doc n'est pas très claire, mais ça paraît logique.
Je teste dès que possible.

Edit 08/01/15 23:48: j'ai testé sur iPad, ça ne semble pas mieux marcher. J'essaierai demain sur PC
Edit 09/01/15 09:40: j'ai testé ce matin sur PC (Firefox): ça fonctionne!
Comme mon iPad est en version 1, il ne peut pas supporter les récentes mises à jour de IOS. Quelqu'un pourrait il essayer avec une version plus récente?
http://www.alma-musica.net/html/repertoire.php?cur
Le fichier le plus court est "Darkness", bouton Abc.
Merci.
Modifié par PapyJP (09 Jan 2015 - 09:45)
Pour ceux que ça intéresse, voici le code qui fonctionne:

<body onclick="pageclick();">
    <div id="lectdiv" style="display:none;"><audio id="lecture" src="" controls="controls" 
                        onabort="lire('');" onended="lire('');" onerror="lire('');"></audio>
     </div>
.....................



var lectureObject, startLecture = 0;

function lire(fileName, curdiv) {
    var now = new Date();
    if(now - startLecture < 3000) return;
    startLecture = now;
    if(!lectureObject) {
        lectureObject = $('lecture');
    }
    var lectdiv = $('lectdiv');
    if (! lectdiv) {
        if(fileName != '') window.open(fileName);
    }
    if (fileName == '') {
        lectdiv.style.display = 'none';
        lectureObject.muted = true;
        return;
    }  
    var nameParts = fileName.split('.');
    var ext = nameParts[nameParts.length - 1];
    if(ext != 'mp3' && ext != 'ogg') {
        window.open(fileName);
        return;
    }
    lectureObject.src = fileName;
    var curRectangle = new Rectangle(curdiv);
    with(lectdiv.style) {
        left = curRectangle.right + 6 + 'px';
        top = curRectangle.top + 'px';
        display = '';
    }
}
function pageclick() {
    var lectdiv = $('lectdiv');
    if(!lectdiv) return;
    var lectRectangle = new Rectangle(lectdiv);
    if(lectRectangle.contains(mouseX, mouseY)) return;
    lire('');
}

Les "onevent" de <audio> n'ont pas raison d'être dynamiques, mais ça marchait aussi avec:

<body onclick="pageclick();">
    <div id="lectdiv" style="display:none;">
        <audio id="lecture" src="" controls="controls"></audio>
     </div>
.....................



var lectureObject, startLecture = 0;

function lire(fileName, curdiv) {
    var now = new Date();
    if(now - startLecture < 3000) return;
    startLecture = now;
    if(!lectureObject) {
        lectureObject = $('lecture');
    }
    var lectdiv = $('lectdiv');
    if (! lectdiv) {
        if(fileName != '') window.open(fileName);
    }
    if (fileName == '') {
        lectdiv.style.display = 'none';
        lectureObject.muted = true;
        return;
    }  
    var nameParts = fileName.split('.');
    var ext = nameParts[nameParts.length - 1];
    if(ext != 'mp3' && ext != 'ogg') {
        window.open(fileName);
        return;
    }
    with(lectureObject) {
        src = fileName;
        onabort = "lire('')";
        onended="lire('')"
        onerror="lire('')";
    }

......................

Modifié par PapyJP (09 Jan 2015 - 10:15)
Sujet clos
Aller à