Module 14 : Minuterie et gestion de sons en JavaScript

Introduction

Ce module présente l'utilisation des minuteries en JavaScript (setInterval, setTimeout, clearInterval) ainsi que la création et le contrôle de sons via l'API Audio HTML5. Vous apprendrez quand utiliser chaque minuterie, comment les arrêter proprement et comment jouer, mettre en pause et arrêter un audio.

Objectifs du cours

Comprendre setInterval, setTimeout et clearInterval
Savoir démarrer, arrêter et réinitialiser une minuterie
Créer et contrôler la lecture audio avec l'API Audio
Mettre en pratique ces concepts via une démonstration interactive

Théorie

1 : Minuterie en JavaScript

Définition

Les minuteries permettent d'exécuter du code après un délai (setTimeout) ou de manière répétée à intervalle régulier (setInterval). clearInterval (ou clearTimeout) permet d'annuler une minuterie active.

setInterval

La fonction setInterval sers à exécuter une fonction de son choix, de manière répétée (indéfiniment) à un intervalle de temps défini (en millisecondes).

Syntaxe : setInterval(uneFonction, delay) où delay est le temps en millisecondes entre chaque exécution de la fonction.

Comment arrêter une minuterie ?

La fonction setInterval retourne un identifiant utilisable pour arrêter l'intervalle avec clearInterval.
Il est important de stocker cet identifiant dans une variable pour pouvoir l'arrêter plus tard, sans quoi la minuterie continuera à s'exécuter indéfiniment.

setTimeout

La fonction setTimeout sers à exécuter une fonction de son choix, une seule fois, après un délai défini (en millisecondes).

Syntaxe : setTimeout(uneFonction, delay) où delay est le temps en millisecond
uneFonction est la fonction qui sera exécutée après le délai spécifié, une seule fois (elle s'arrêtera automatiquement après son exécution).

clearInterval et clearTimeout

clearInterval(intervalID) : arrête une minuterie créée avec setInterval en utilisant son identifiant.
clearTimeout(timeoutID) : arrête une minuterie créée avec setTimeout en utilisant son identifiant.

Exemple complet

Soit le code HTML suivant :

html

<div>
    <p>Compteur : <span id="compteur">0</span></p>
    <button id="demarrerInterval">Démarrer minuterie (à intervals réguliers)</button>
    <button id="demarrerTimeout">Démarrer une fonction dans 5 secondes (une seule fois)</button>
    <button id="arreter">Arrêter minuterie</button>

</div>

Soit le code JS qui gère l'interface HTML :

javascript

// Variables globales
let compteur = 0;

// identifiants des minuteries, doit être mis à null au départ pour indiquer qu'elles ne sont pas actives
let intervalID = null;
let timeoutID = null;

// Fonction qui met à jour la variable
function MAJcompteur() {
  console.log(`Compteur : ${compteur}`);
  compteur++;

  // Mettre à jour le compteur HTML
  let spanCompteur = document.getElementById("compteur");
  spanCompteur.textContent = compteur;
}

/**
 * Fonction qui gère le clic sur le bouton Démarrer la minuterie à intervals réguliers"
 */
function gererBtnDemarrerMinuterie()
{
  // Exécuter MAJcompteur chaque seconde, indéfiniment, et stocker l'identifiant de la minuterie dans une variable globale.
  intervalID = setInterval(MAJcompteur, 1000);
}

function message() {
  alert("Message : je me suis déclenché après 5 secondes !");
}

function gererBtnDemarrerTimeout()
{
  // Exécuter la fonction Fin une seule fois après 5 secondes, et stocker l'identifiant de la minuterie dans une variable globale.
  timeoutID = setTimeout(message, 5000);
}

/**
 * Fonction qui gère le clic sur le bouton Arrêter"
 */
function gererBtnArreter()
{
    // Arrêter la minuterie à intervalle régulier
    if (intervalID !== null) {
        clearInterval(intervalID);
        intervalID = null; // Réinitialiser l'identifiant pour indiquer que la minuterie est arrêtée
    }

    // On peut aussi arrêter la minuterie de timeout si elle est active et n'a pas encore déclenché la fonction
    if (timeoutID !== null) {
        clearTimeout(timeoutID);
        timeoutID = null; // Réinitialiser l'identifiant pour indiquer que la minuterie est arrêtée
    }
}

function initialisation() {
  
  // Associer les fonctions de gestion des clics aux boutons
  document.getElementById('demarrerInterval').addEventListener('click', gererBtnDemarrerMinuterie);
  document.getElementById('demarrerTimeout').addEventListener('click', gererBtnDemarrerTimeout);
  document.getElementById('arreter').addEventListener('click', gererBtnArreter);

}

addEventListener('load', initialisation, false);

Points importants

setInterval retourne un identifiant utilisable avec clearInterval.
setTimeout retourne un identifiant utilisable avec clearTimeout (ou clearInterval).
Toujours nettoyer les timers (par ex. lors du changement de page ou d'un composant) pour éviter des exécutions indésirables.

2 : Créer et gérer des sons en JavaScript

Définition

L'API Audio permet de charger et contrôler la lecture d'un fichier audio côté client (play, pause, position courante).

Exemple

javascript

// Créer un élément audio en variable globale (le dossier et fichier doivent exister)
let audio = new Audio('/sons/positif.mp3');

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

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

function arreterMusique() {
  audio.pause();
  audio.currentTime = 0;
}

Contexte d'utilisation

Jouer des sons d'interface (clic, notification)
Implémenter un lecteur audio simple
Synchroniser des animations avec la durée d'un son

Exemple complet avec interface HTML

index.html

html

<main>
    <h1>Contrôle Audio</h1>

    <p>Que ce soit une musique ou un effet sonore, les fonctions sont exactements les mêmes. C'est juste que avec une musique, on à souvent besoin de faire des pauses, arrêter, etc. Alors qu'avec un effet sonore, c'est simplement de le lancer et de le laisser s'arrêter tout seul.</p>

    <h2>Exemple musique</h2>
    <div>
      <p>Lecteur audio</p>
      <button id="play">Jouer</button>
      <button id="pause">Pause</button>
      <button id="stop">Stop</button>
    </div>

    <h2>Exemple Effets Sonores</h2>
    <div>
        <button id="effetSonorePositif">Effet Sonore (positif)</button>
        <button id="effetSonoreNegatif">Effet Sonore (négatif)</button>
    </div>
</main>

script.js

javascript

// On créer un objet Audio pour la musique car on devra le contrôler (play, pause, stop) à travers différentes fonctions. 
let musique = new Audio('./sons/piano.mp3');

// On créer les boutons globalement pour faciliter leur utilisation dans toutes les fonctions
const btnPlay = document.getElementById('play');
const btnPause = document.getElementById('pause');
const btnStop = document.getElementById('stop');
const btnEffetSonorePositif = document.getElementById('effetSonorePositif');
const btnEffetSonoreNegatif = document.getElementById('effetSonoreNegatif');

function playAudio() {
  console.log("Lancement de la fonction playAudio  --- musique.play()");
  musique.play();
}

function pauseAudio() {
  console.log("Lancement de la fonction pauseAudio");
  console.log("Mise en pause de la musique --- musique.pause()");
  musique.pause();
}

function stopAudio() {
  console.log("Lancement de la fonction stopAudio");
  console.log("Arrêt de la musique musique.pause() et remise à zéro musique.currentTime = 0");
  musique.pause();
  musique.currentTime = 0;
}

function gererBtnEffetSonorePositif() {
  console.log("Lancement de la fonction gererBtnEffetSonorePositif");

  // Juste besoin de créer et jouer ici, car pas besoin d'avoir des contrôles play/pause/stop : c'est un simple son qui se lance et s'arrête tout seul. Pas besoin de le contrôler à travers différentes fonctions, donc pas besoin de le créer globalement.
  let effetSonorePositif = new Audio('./sons/positif.mp3');
  effetSonorePositif.play();
}

function gererBtnEffetSonoreNegatif() {
  console.log("Lancement de la fonction gererBtnEffetSonoreNegatif");
  // Juste besoin de créer et jouer ici, car pas besoin d'avoir des contrôles play/pause/stop : c'est un simple son qui se lance et s'arrête tout seul. Pas besoin de le contrôler à travers différentes fonctions, donc pas besoin de le créer globalement.
  let effetSonoreNegatif = new Audio('./sons/negatif.mp3');
  effetSonoreNegatif.play();
}

function initialisation() {
  // Association des boutons en lien avec la MUSIQUE
  btnPlay.addEventListener('click', playAudio);
  btnPause.addEventListener('click', pauseAudio);
  btnStop.addEventListener('click', stopAudio);

  // Association des boutons en lien avec les EFFETS SONORES
  btnEffetSonorePositif.addEventListener('click', gererBtnEffetSonorePositif);
  btnEffetSonoreNegatif.addEventListener('click', gererBtnEffetSonoreNegatif);
}

addEventListener('load', initialisation, false);

Exercices pratiques

Exercice 1 : Minuterie avec image

Énoncé

Créer une page contenant une image de votre choix. Ajouter un compteur affiché comme "TEMPS : 10". Au clic sur l'image, démarrer une minuterie qui décrémente le compteur chaque seconde jusqu'à 0. Lorsque le compteur atteint 0, l'image doit disparaître en ajoutant une classe CSS qui applique display: none.

Consignes

Ajouter une image dans index.html avec un id (par exemple, <img id="image" src="votre-image.jpg" alt="Image">).
1. Image suggérée :
Ajouter un paragraphe pour afficher le compteur : <p>TEMPS : <span id="compteur">10</span></p>.
Dans script.js, ajouter un événement click sur l'image qui démarre un setInterval décrementant le compteur chaque seconde.
Lorsque le compteur atteint 0, arrêter l'intervalle et ajouter une classe CSS (par exemple, hidden) à l'image.
Définir la classe CSS .hidden { display: none; } dans un fichier styles.css ou directement dans <style>.

Exercice 2 : Minuterie avec musique et explosion

Énoncé

Créer une page similaire à l'exercice 1 : une image, un compteur "TEMPS : 10" qui descend à 0 au clic sur l'image. Mais cette fois, au clic, démarrer également une musique automatiquement. Lorsque le compteur atteint 0, arrêter la musique, jouer un son d'explosion, puis masquer l'image.

Consignes

Utiliser une image et un paragraphe pour le compteur comme dans l'exercice 1.
Préparer deux objets Audio : un pour la musique (par exemple, 'musique.mp3'), un pour l'explosion ('explosion.mp3').
1. Utilise ce matériel : Sons et musique
Au clic sur l'image, démarrer le setInterval pour décrémenter le compteur chaque seconde ET jouer la musique.
Lorsque le compteur atteint 0, arrêter la musique, jouer le son d'explosion, puis ajouter la classe CSS pour masquer l'image.

Résumé

Points clés à retenir

setInterval : répéter une fonction à intervalle régulier ; annuler avec clearInterval.
setTimeout : exécuter une fonction une fois après un délai ; annuler avec clearTimeout.
Toujours nettoyer les timers et arrêter les médias lors du démontage d'une page.
L'API Audio permet de jouer, mettre en pause et réinitialiser la lecture audio côté client.

Corrigés des exercices

Corrigé Exercice 1 : Minuterie avec image

index.html

html

<div>
    <p>TEMPS : <span id="compteur">10</span></p>
    <img id="image" src="./images/creeper.png" alt="Image">
</div>

styles.css

css

.hidden {
    display: none;
}

script.js

javascript

let compteur = 10;
let intervalID = null;


function decrementerCompteur() {
    compteur--;
    document.getElementById('compteur').textContent = compteur;

    if (compteur <= 0) {
        clearInterval(intervalID);
        document.getElementById('image').classList.add('hidden');
    }
}

function gererClickImage() {

    // Empêcher de démarrer plusieurs intervalles car le compteur serait décrémenté plus rapidement que prévu (ex : 2 clics = 2 intervalles = compteur qui descend de 2 chaque seconde au lieu de 1). On vérifie que l'intervalle n'est pas déjà actif avant d'en démarrer un nouveau.
    if (intervalID === null) 
    {
        intervalID = setInterval(decrementerCompteur, 1000);
    }
}

function init()
{
    document.getElementById('image').addEventListener('click', gererClickImage);
}

addEventListener('load', init, false);




## Références
- Tutoriel `setTimeout` / `setInterval` : https://www.tabnine.com/academy/javascript/how-to-use-settimeout/

Module 14 : Minuterie et gestion de sons en JavaScript ​

Introduction ​

Objectifs du cours ​

Théorie ​

1 : Minuterie en JavaScript ​

Définition ​

setInterval ​

setTimeout ​

clearInterval et clearTimeout ​

Exemple complet ​

Points importants ​

2 : Créer et gérer des sons en JavaScript ​

Définition ​

Exemple ​

Contexte d'utilisation ​

Exemple complet avec interface HTML ​

index.html ​

script.js ​

Exercices pratiques ​

Exercice 1 : Minuterie avec image ​

Énoncé ​

Consignes ​

Exercice 2 : Minuterie avec musique et explosion ​

Énoncé ​

Consignes ​

Résumé ​

Points clés à retenir ​

Corrigés des exercices ​

Corrigé Exercice 1 : Minuterie avec image ​

index.html ​

styles.css ​

script.js ​

Module 14 : Minuterie et gestion de sons en JavaScript

Introduction

Objectifs du cours

Théorie

1 : Minuterie en JavaScript

Définition

setInterval

setTimeout

clearInterval et clearTimeout

Exemple complet

Points importants

2 : Créer et gérer des sons en JavaScript

Définition

Exemple

Contexte d'utilisation

Exemple complet avec interface HTML

index.html

script.js

Exercices pratiques

Exercice 1 : Minuterie avec image

Énoncé

Consignes

Exercice 2 : Minuterie avec musique et explosion

Énoncé

Consignes

Résumé

Points clés à retenir

Corrigés des exercices

Corrigé Exercice 1 : Minuterie avec image

index.html

styles.css

script.js