モールス信号の送信速度をスライダーで調整できす。送信中の文字が画面中央に大きく表示されるようにしています。モールス符号も表示します。（モールス信号勉強用。）
コードをメモ帳などのテキストエディタに貼り付け、ファイルを「index.html」などの拡張子が.htmlのファイルとして保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MORS発信</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
input {
padding: 10px;
width: 300px;
font-size: 18px;
}
button {
padding: 10px 20px;
font-size: 18px;
margin-top: 10px;
}
/* 現在送信中の文字を大きく表示するスタイル */
#currentChar {
font-size: 100px;
color: #333;
margin: 20px;
height: 120px;
}
/* 現在送信中のモールス符号を表示するスタイル */
#currentMorse {
font-size: 30px;
color: #666;
}
#speedLabel {
margin-top: 20px;
font-size: 18px;
}
#speedSlider {
width: 300px;
}
</style>
</head>
<body>
<h1>MORS信号発信機</h1>
<p>メッセージを入力してください:</p>
<!-- メッセージ入力ボックス。デフォルトで"Hello World"が設定されています -->
<input type="text" id="messageInput" value="Hello World">
<br><br>
<!-- MORS発信ボタン。押すとモールス信号の送信が開始される -->
<button onclick="sendMorse()">MORS発信</button>
<br><br>
<!-- スピード調整の表示ラベル -->
<p id="speedLabel">速度調整: 1x</p>
<!-- スピード調整用のスライダー。送信速度を変更できる -->
<input type="range" id="speedSlider" min="0.5" max="2" step="0.1" value="1" oninput="updateSpeed()">
<br><br>
<!-- 送信中の文字を大きく表示 -->
<div id="currentChar"></div>
<!-- 送信中のモールス符号を表示 -->
<div id="currentMorse"></div>
<!-- 音を鳴らすためのaudioタグ。JavaScriptで音声を制御する -->
<audio id="morseSound"></audio>
<script>
// アルファベットと数字に対応するモールス符号の辞書
const morseCode = {
'a': '.-', 'b': '-...', 'c': '-.-.', 'd': '-..', 'e': '.', 'f': '..-.', 'g': '--.', 'h': '....',
'i': '..', 'j': '.---', 'k': '-.-', 'l': '.-..', 'm': '--', 'n': '-.', 'o': '---', 'p': '.--.',
'q': '--.-', 'r': '.-.', 's': '...', 't': '-', 'u': '..-', 'v': '...-', 'w': '.--', 'x': '-..-',
'y': '-.--', 'z': '--..', '1': '.----', '2': '..---', '3': '...--', '4': '....-', '5': '.....',
'6': '-....', '7': '--...', '8': '---..', '9': '----.', '0': '-----', ' ': ' ' // スペースはスペースとして扱う
};
// 基本的な時間設定。ドットやダッシュ、間隔の時間を定義
let dotDuration = 100; // ドット (.) の長さ (ミリ秒)
let dashDuration = 300; // ダッシュ (-) の長さ (ミリ秒)
let betweenSymbols = 100; // モールス符号内のシンボル間のスペース
let betweenLetters = 300; // 文字間のスペース
let speedFactor = 1; // 初期速度倍率
// Web Audio APIを使って音を生成
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
let oscillator; // 音を生成するためのオシレーター
// スライダーの値に基づいて送信速度を更新する関数
function updateSpeed() {
const slider = document.getElementById('speedSlider');
speedFactor = slider.value;
document.getElementById('speedLabel').innerText = `速度調整: ${speedFactor}x`;
// スピードに応じて、各種時間設定を変更
dotDuration = 100 / speedFactor;
dashDuration = 300 / speedFactor;
betweenSymbols = 100 / speedFactor;
betweenLetters = 300 / speedFactor;
}
// モールス信号の音を指定された時間だけ鳴らす関数
function playMorseSound(duration) {
oscillator = audioContext.createOscillator();
oscillator.type = 'sine'; // 音の波形を指定
oscillator.frequency.setValueAtTime(600, audioContext.currentTime); // 音の周波数 (600Hz)
oscillator.connect(audioContext.destination); // オシレーターを出力に接続
oscillator.start(); // 音を鳴らす
setTimeout(() => oscillator.stop(), duration); // durationミリ秒後に音を止める
}
// 指定した時間だけ待機するための関数 (非同期処理)
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
// 入力されたメッセージをモールス信号で送信する非同期関数
async function sendMorse() {
// 入力フィールドからメッセージを取得し、小文字に変換
const message = document.getElementById('messageInput').value.toLowerCase();
// 各文字をモールス符号に変換し、スペースで区切って表示用に変換
const morseMessage = message.split('').map(char => morseCode[char] || '').join(' ');
// メッセージ内の各文字を順番に送信
for (let char of message) {
const morse = morseCode[char] || ''; // 文字に対応するモールス符号を取得
document.getElementById('currentChar').innerText = char.toUpperCase(); // 現在の文字を表示
document.getElementById('currentMorse').innerText = morse; // モールス符号を表示
// モールス符号の各シンボル (ドットやダッシュ) を送信
for (let symbol of morse) {
if (symbol === '.') {
playMorseSound(dotDuration); // ドット音を鳴らす
await sleep(dotDuration + betweenSymbols); // 音の後にシンボル間の待機
} else if (symbol === '-') {
playMorseSound(dashDuration); // ダッシュ音を鳴らす
await sleep(dashDuration + betweenSymbols); // 音の後にシンボル間の待機
}
}
await sleep(betweenLetters); // 文字間の待機
}
// メッセージの送信が終わったら、再び最初から送信する
sendMorse();
}
</script>
</body>
</html>