Horloge parlante

Temps de lecture : 3 minutes

Ce script HTML crée une page web qui affiche une horloge numérique et prononce l’heure actuelle en français lorsqu’un bouton est cliqué.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="F4HXN">
    <meta name="description" content="Générateur de Code Morse">
    <meta name="copyright" content="Libre de droits">
    <base href="https://f4hxn.fr/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horloge Parlante - F4HXN</title>
<style>
  body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  .container {
    background-color: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    text-align: center;
  }
  h1 {
    color: #333;
  }
  #clock {
    font-size: 3rem;
    margin: 1rem 0;
  }
  button {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    margin: 0.5rem;
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s;
  }
  button:hover {
    background-color: #45a049;
  }
</style>
</head>
<body>
<div class="container">
  <h1>Horloge Parlante - F4HXN</h1>
  <div id="clock"></div>
  <button id="speakButton">Dire l'heure</button>
</div>

<script>
function getCurrentTime() {
  const now = new Date();
  return now.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
}

function updateClock() {
  document.getElementById('clock').textContent = getCurrentTime();
}

function speakTime() {
  const now = new Date();
  const hours = now.getHours();
  const minutes = now.getMinutes();
  
  let timeString = `Il est ${hours} heure`;
  if (hours > 1) timeString += 's';
  
  if (minutes > 0) {
    timeString += ` ${minutes}`;
    if (minutes === 1) {
      timeString += ' minute';
    } else {
      timeString += ' minutes';
    }
  }

  const utterance = new SpeechSynthesisUtterance(timeString);
  utterance.lang = 'fr-FR';
  speechSynthesis.speak(utterance);
}

document.getElementById('speakButton').addEventListener('click', speakTime);

// Update clock every second
setInterval(updateClock, 1000);

// Initial update
updateClock();
</script>
</body>
</html>

Structure HTML

Ce script HTML crée une page web qui affiche une horloge numérique et prononce l’heure actuelle en français lorsqu’un bouton est cliqué. Voici une explication détaillée du code :

Structure HTML

Base et Métadonnées :

  • <base href="https://f4hxn.fr/"> : Définit l’URL de base pour les liens relatifs sur la page.
  • <meta charset="UTF-8"> : Spécifie l’encodage des caractères pour la page.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> : Assure que la page s’adapte correctement aux différentes tailles d’écrans, notamment pour les appareils mobiles.

Titre :

  • <title>Horloge Parlante - F4HXN</title> : Définit le titre de la page qui s’affichera dans l’onglet du navigateur.

Contenu :

  • La page contient une div avec la classe container qui centre le contenu et applique du style.
  • Un h1 affiche le titre “Horloge Parlante – F4HXN”.
  • Un div avec l’identifiant clock est utilisé pour afficher l’heure actuelle.
  • Un button avec l’identifiant speakButton permet de déclencher la prononciation de l’heure.

Style CSS

  • Typographie et Positionnement :
  • Le style global applique une police Arial et centre verticalement et horizontalement le contenu de la page.
  • Style de la div container :
  • Arrière-plan blanc, bordures arrondies, et une ombre pour donner un effet de carte.
  • Boutons :
  • Les boutons ont une couleur de fond verte, un texte blanc et changent de couleur au survol.

Script JavaScript

Fonction getCurrentTime():

  • Utilise Date pour obtenir l’heure actuelle et retourne une chaîne formatée en utilisant toLocaleTimeString avec le format français fr-FR.

Fonction updateClock():

  • Met à jour le contenu de l’élément clock avec l’heure actuelle chaque seconde.

Fonction speakTime():

  • Extrait les heures et les minutes actuelles.
  • Crée une chaîne de texte décrivant l’heure en français.
  • Utilise SpeechSynthesisUtterance pour prononcer cette chaîne en utilisant la synthèse vocale avec le paramètre lang défini sur fr-FR pour assurer une prononciation en français.

Événements et Intervalles:

  • Un gestionnaire d’événement est ajouté au bouton pour déclencher speakTime() quand il est cliqué.
  • setInterval(updateClock, 1000); met à jour l’horloge chaque seconde.
  • updateClock(); appelle la fonction une première fois pour afficher l’heure immédiatement au chargement de la page.

Fonctionnement Général

Ce script affiche continuellement l’heure actuelle et permet à l’utilisateur d’entendre l’heure en français en appuyant sur un bouton. Il utilise des fonctionnalités modernes de JavaScript comme l’API de synthèse vocale pour offrir une expérience interactive et informative.

Vue : 109