Ajout de boutons play -pause

chabinot Messages postés 322 Date d'inscription   Statut Membre Dernière intervention   -  
Dotarkadim Messages postés 41 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
J'ai un script javascript comme suit:
const audio = document.getElementById('audio');
const duration = document.getElementById('duration');
const timeslice = document.getElementById('timeslice');

function playAudio() {
    audio.play();
}

function pauseAudio() {
    audio.pause();
}

audio.addEventListener('loadeddata', function() {
    duree = audio.duration;
    // Transformer duree en hh:mm:ss
    jour = 60 * 60 * 24;
    heure = 60 * 60;
    minutes = 60;
    secondes = 1;
    // Début
    nbj = Math.floor(duree / jour);
    nbj != 0 ? duree = duree - (nbj * jour) : nbj = 0;

    nbh = Math.floor(duree / heure);
    nbh != 0 ? duree = duree - (nbh * heure) : nbh = 0;

    nbm = Math.floor(duree / minutes);
    nbm != 0 ? duree = duree - (nbm * minutes) : nbm = 0;

    nbs = Math.floor(duree / secondes);
    nbs != 0 ? duree = duree - (nbs * secondes) : nbs = 0;

    nbj = Math.round(nbj);
    nbh = Math.round(nbh);
    nbm = Math.round(nbm);
    nbs = Math.round(nbs);

    var duration = new Date(0, 0, 0, nbj, nbm, nbs, 0);
    var timeslice = new Date(0, 0, 0, 0, 0, 0, 0);

    var interval = setInterval(compteur, 1000);

    function compteur() {
        if (duration.getHours() > 0 || duration.getMinutes() > 0 || 
            duration.getSeconds() > 0) {
            duration.setTime(duration.getTime() - 1000);
            h = duration.getHours();
            m = duration.getMinutes();
            s = duration.getSeconds();
            h = h < 10 ? '0' + h : h;
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;
            timeslice.setTime(timeslice.getTime() + 1000);
            hh = timeslice.getHours();
            mm = timeslice.getMinutes();
            ss = timeslice.getSeconds();
            hh = hh < 10 ? '0' + hh : hh;
            mm = mm < 10 ? '0' + mm : mm;
            ss = ss < 10 ? '0' + ss : ss;


            document.getElementById('duration').innerHTML = h + ':' + m + ':' + s;
            document.getElementById('timeslice').innerHTML = hh + ':' + mm + ':' + ss;
        } else {
            clearInterval(interval);
        }
    }
})

J'ai ajouté 2 boutons 1 - Play 2 - Pause.
Quand je lance mon audio, play et pause marchent bien. J'aimerais, quand je clique sur pause, que mes compteurs s'arrêtent et lorsque je clique sur play, ils redémarrent.
Si quelqu'un peur m'aider, je lui en serais reconnaissant.


1 réponse

Dotarkadim Messages postés 41 Date d'inscription   Statut Membre Dernière intervention   1
 
Bonjour,

tu n'as pas bessoin d'Utiliser setTimeout travail avec ton [ Object Audio ] en javascript, avec l'event audio.ontimeupdate :

la liste des propriété et méthode de l'object audio en js :

https://www.w3schools.com/jsref/dom_obj_audio.asp

Dans ta Callback ( audio.ontimeupdate ) tu reload tes éléments DOM (html ) du temps, par exemple :

audio.ontimeupdate = function( e ){

// DOM
handleDOMTime.value = time( this.duration .... );

};



et lorsque du utilisera audio.pause( ); l'object n'appellera plus la callback de audio.ontimeupdate donc tes éléments DOM seront stoppé.

et quand tu relancera audio.play( ); elle rappellera la callback de audio.ontimeupdate

look le code source en speed c'est un très vieux truc y a long temps que j'ai fait, je n'utilise pas setTimeout.

http://dev.gnode.free.fr/gnode/vlc/vlc.html

et je ne sais pas si c'est tout ton code complet mais attention a tes déclaration de variables beaucoup sont utiliser dans ta function sans avoir été déclarer cela pourrait être mauvais. porté des variables en javascript , et au lieu de const pour les déclarer utilise var.

cordialement.
0