Horloge en Morse

Temps de lecture : 4 minutes

Le code HTML fourni représente une page Web affichant une horloge Morse. Cette horloge montre l’heure actuelle sous une forme lisible par l’homme et la convertit également en code Morse, permettant aux utilisateurs de jouer et d’arrêter l’audio du code Morse.

<!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">
    <title>Horloge en Morse</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horloge Morse - F4HXN</title>
<style>
  body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  .container {
    text-align: center;
    background-color: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    max-width: 400px;
    width: 100%;
  }
  h1 {
    color: #333;
  }
  #currentTime, #morseOutput {
    font-size: 1.5rem;
    margin: 1rem 0;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #e0e0e0;
  }
  #morseOutput {
    font-family: monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  button {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 0.5rem;
  }
  #playButton {
    background-color: #4CAF50;
  }
  #playButton:hover {
    background-color: #45a049;
  }
  #stopButton {
    background-color: #f44336;
  }
  #stopButton:hover {
    background-color: #d32f2f;
  }
  #visualIndicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ccc;
    margin: 1rem auto;
  }
</style>
</head>
<body>
<div class="container">
  <h1>Horloge Morse - F4HXN</h1>
  <div id="currentTime"></div>
  <div id="morseOutput"></div>
  <div id="visualIndicator"></div>
  <button id="playButton">Jouer en Morse</button>
  <button id="stopButton">Arrêter</button>
</div>

<script>
const morseCode = {
  '0': '-----', '1': '.----', '2': '..---', '3': '...--', '4': '....-',
  '5': '.....', '6': '-....', '7': '--...', '8': '---..', '9': '----.',
  ':': '---...', ' ': ' '
};

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const visualIndicator = document.getElementById('visualIndicator');

const dotDuration = 60; // milliseconds
const dashDuration = dotDuration * 3;
const pauseBetweenSymbols = dotDuration;
const pauseBetweenLetters = dotDuration * 3;
const pauseBetweenWords = dotDuration * 7;

let isPlaying = false;
let oscillator = null;
let gainNode = null;

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

function updateTime() {
  const currentTime = getCurrentTime();
  document.getElementById('currentTime').textContent = currentTime;
  document.getElementById('morseOutput').textContent = translateToMorse(currentTime);
}

function translateToMorse(text) {
  return text.split('').map(char => morseCode[char] || char).join(' ');
}

function playMorseCode(morseMessage) {
  if (isPlaying) return;
  isPlaying = true;

  let time = audioContext.currentTime;
  oscillator = audioContext.createOscillator();
  gainNode = audioContext.createGain();
  
  oscillator.type = 'sine';
  oscillator.frequency.setValueAtTime(600, time);
  
  gainNode.gain.setValueAtTime(0, time);
  
  oscillator.connect(gainNode);
  gainNode.connect(audioContext.destination);
  
  oscillator.start();

  morseMessage.split('').forEach(symbol => {
    if (symbol === '.' || symbol === '-') {
      gainNode.gain.setValueAtTime(1, time);
      visualIndicator.style.backgroundColor = '#4CAF50';
      time += symbol === '.' ? dotDuration / 1000 : dashDuration / 1000;
      gainNode.gain.setValueAtTime(0, time);
      visualIndicator.style.backgroundColor = '#ccc';
      time += pauseBetweenSymbols / 1000;
    } else if (symbol === ' ') {
      time += (pauseBetweenWords - pauseBetweenSymbols) / 1000;
    }
  });

  oscillator.stop(time);
  oscillator.onended = () => {
    isPlaying = false;
    oscillator = null;
    gainNode = null;
  };
}

function stopMorseCode() {
  if (!isPlaying) return;
  
  if (oscillator) {
    oscillator.stop();
    oscillator.disconnect();
  }
  if (gainNode) {
    gainNode.disconnect();
  }
  
  isPlaying = false;
  visualIndicator.style.backgroundColor = '#ccc';
}

async function visualizeMorseCode(morseMessage) {
  for (const symbol of morseMessage) {
    if (!isPlaying) break;
    if (symbol === '.') {
      await animateIndicator(dotDuration, '#4CAF50');
      await new Promise(resolve => setTimeout(resolve, pauseBetweenSymbols));
    } else if (symbol === '-') {
      await animateIndicator(dashDuration, '#4CAF50');
      await new Promise(resolve => setTimeout(resolve, pauseBetweenSymbols));
    } else if (symbol === ' ') {
      await new Promise(resolve => setTimeout(resolve, pauseBetweenWords - pauseBetweenSymbols));
    }
  }
}

function animateIndicator(duration, color) {
  return new Promise(resolve => {
    visualIndicator.style.backgroundColor = color;
    setTimeout(() => {
      visualIndicator.style.backgroundColor = '#ccc';
      resolve();
    }, duration);
  });
}

document.getElementById('playButton').addEventListener('click', () => {
  const currentTime = getCurrentTime();
  const morseMessage = translateToMorse(currentTime);
  playMorseCode(morseMessage);
  visualizeMorseCode(morseMessage);
});

document.getElementById('stopButton').addEventListener('click', stopMorseCode);

// Update time every second
setInterval(updateTime, 1000);

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

Structure HTML

  • Section Head:
  • Élément Base : Spécifie l’URL de base pour les URL relatives sur la page comme https://f4hxn.fr/.
  • Balises Meta : Définissent le jeu de caractères en UTF-8 et rendent la page responsive grâce à la balise meta viewport.
  • Titre : Le titre de la page est “Horloge Morse – F4HXN.”
  • Balise Style : Contient les styles CSS pour la mise en page et l’apparence.
  • Section Body:
  • Container : Un <div> central avec la classe container contient tous les éléments interactifs.
  • Titre : Un élément <h1> affiche le titre “Horloge Morse – F4HXN.”
  • Affichage de l’heure actuelle : Un <div> avec l’ID currentTime affiche l’heure actuelle.
  • Sortie Morse : Un <div> avec l’ID morseOutput affiche l’équivalent en code Morse de l’heure actuelle.
  • Indicateur visuel : Un <div> avec l’ID visualIndicator sert d’indicateur visuel pour la lecture du code Morse.
  • Boutons : Deux boutons permettent à l’utilisateur de commencer (playButton) et d’arrêter (stopButton) la lecture du code Morse.

Styles CSS

  • Mise en page de la page :
  • Le corps utilise Flexbox pour centrer le contenu verticalement et horizontalement.
  • Un fond gris clair est appliqué au corps, tandis que le conteneur a un fond blanc avec une ombre pour le contraste.
  • Typographie :
  • La police est définie sur Arial, avec un texte centré dans le conteneur.
  • Éléments interactifs :
  • Les boutons changent de couleur au survol pour fournir un retour d’information à l’utilisateur.
  • L’indicateur visuel est stylisé comme un élément circulaire qui change de couleur pour indiquer la lecture du code Morse.

Fonctionnalité JavaScript

  • Mappage du code Morse : Un objet associe les chiffres et le caractère deux-points aux symboles du code Morse.
  • Contexte audio : Utilise l’API Web Audio pour générer et contrôler la lecture audio des sons du code Morse.
  • Durée du code Morse :
  • Définit la durée des points, des traits et des pauses dans le code Morse.
  • Fonctions principales :
  • getCurrentTime() : Récupère l’heure actuelle au format hh:mm:ss.
  • updateTime() : Met à jour l’heure affichée et la traduit en code Morse.
  • translateToMorse(text) : Convertit un texte donné en code Morse en utilisant l’objet de mappage.
  • playMorseCode(morseMessage) : Joue le message en code Morse en manipulant les réglages de l’oscillateur et du gain pour produire du son.
  • stopMorseCode() : Arrête la lecture du code Morse et réinitialise les paramètres audio.
  • visualizeMorseCode(morseMessage) : Fournit un retour visuel en animant l’indicateur visuel selon le timing du code Morse.
  • Écouteurs d’événements :
  • Attache des événements de clic aux boutons de lecture et d’arrêt pour commencer et arrêter la lecture du code Morse.
  • Un intervalle met à jour l’heure affichée chaque seconde pour s’assurer qu’elle reste à jour.

Cette page Web propose une horloge Morse interactive qui représente visuellement et audiblement l’heure actuelle en code Morse. Elle combine HTML pour la structure, CSS pour le style, et JavaScript pour la fonctionnalité, en utilisant l’API Web Audio pour la génération de son. Cette implémentation est efficace à des fins éducatives ou pour les passionnés intéressés par le code Morse et le développement Web.

Vue : 106