Ajout de boutons play -pause

Fermé
chabinot Messages postés 322 Date d'inscription mardi 10 novembre 2015 Statut Membre Dernière intervention 27 août 2024 - 20 oct. 2017 à 15:46
Dotarkadim Messages postés 41 Date d'inscription jeudi 26 octobre 2017 Statut Membre Dernière intervention 30 octobre 2017 - 26 oct. 2017 à 17:05
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 jeudi 26 octobre 2017 Statut Membre Dernière intervention 30 octobre 2017 1
Modifié le 26 oct. 2017 à 17:53
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