話し言葉をパソコンの画面に表示するための簡易的なHTML
SPEACHTEXTERを使ってPCで文字起こしをすると似ていますが、より簡易的なものです。
https://scrapbox.io/files/696200c20aa7aa5d25520797.jpg
以下のリンクをクリックするとファイルをダウンロードできます。ファイルをダウンロード後に、EdgeあるいはChromeでファイルを開くと、画面が表示されるので、「Windowsキー（Windowsの旗のマークのキー）」と「H」のキーを同時に押すことで音声入力（PCにマイクが必要）が可能となります。
https://scrapbox.io/files/6969f444d4362d649cc121ef.png
https://youtu.be/_zS6Z3BABy0
なお、このHTMLを実行するには「パソコンがインターネットに接続された状態」でないとエラーが出て動きません。
話し言葉をモニタに表示する - V2.html　　（ダウンロードできます）
以下が、上記のファイルの中身で、「メモ帳」等で開き編集することが可能です。保存は「上書き保存」にしないと、自動的に「テキストファイル」で保存されてしまうことがあるのでご注意ください。「テキストファイル」として保存されると
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>音声入力テスト</title>
<style>
body {
font-family: system-ui, sans-serif;
margin: 0;
padding: 0;
background: #e5ddd5;
display: flex;
flex-direction: column;
height: 100vh;
}
.chat-container {
flex: 1;
padding: 8px;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.message-row {
display: flex;
margin: 4px 0;
}
.message {
max-width: 70%;
padding: 8px 10px;
border-radius: 8px;
font-size: 60px; //表示の文字サイズ。この数字を大きくすると文字も大きくなる
background: #95ec69;
border-bottom-right-radius: 0;
white-space: pre-wrap;
word-break: break-word;
opacity: 1;
transform: scale(1);
transition: opacity 0.25s ease, transform 0.25s ease;
}
/* 仮バブル（リアルタイム表示） */
.preview {
background: #c8f5b0;
opacity: 0.5;
}
/* 確定時のアニメーション */
.pop {
opacity: 0;
transform: scale(0.8);
}
.input-bar {
padding: 8px;
background: #f0f0f0;
border-top: 1px solid #ccc;
}
.input-bar input {
width: 100%;
font-size: 14px;
padding: 6px 8px;
border-radius: 4px;
border: 1px solid #bbb;
outline: none;
}
.hint {
font-size: 12px;
color: #444;
padding: 4px 8px 0;
}
</style>
</head>
<body>
<div class="chat-container" id="chat"></div>
<div class="hint">
入力欄をクリックしてフォーカスした状態で <b>Win + H</b> を押すと音声入力が始まります。<br>
入力途中の文字は薄く表示され、話し終わった時点で吹き出しとして確定表示されます。
</div>
<div class="input-bar">
<input id="messageInput" type="text" placeholder="Win + H で音声入力開始">
</div>
<script>
const chat = document.getElementById('chat');
const input = document.getElementById('messageInput');
let previewRow = null; // 仮バブルの行
let previewBubble = null; // 仮バブル本体
// 仮バブルを作成または更新
function updatePreview(text) {
if (!previewRow) {
previewRow = document.createElement('div');
previewRow.className = 'message-row';
previewBubble = document.createElement('div');
previewBubble.className = 'message preview';
previewRow.appendChild(previewBubble);
chat.appendChild(previewRow);
}
previewBubble.textContent = text;
chat.scrollTop = chat.scrollHeight;
}
// 確定バブルを追加（アニメーション付き）
function addFinalBubble(text) {
const row = document.createElement('div');
row.className = 'message-row';
const bubble = document.createElement('div');
bubble.className = 'message pop'; // 最初は小さく透明
bubble.textContent = text;
row.appendChild(bubble);
chat.appendChild(row);
chat.scrollTop = chat.scrollHeight;
// 少し遅らせてアニメーション開始
requestAnimationFrame(() => {
bubble.classList.remove('pop');
});
}
// 入力中（リアルタイム更新）
input.addEventListener('input', () => {
const text = input.value.trim();
if (text !== "") {
updatePreview(text);
} else {
// 空になったら仮バブル削除
if (previewRow) {
previewRow.remove();
previewRow = null;
previewBubble = null;
}
}
});
// 音声入力が途切れた瞬間（確定）
input.addEventListener('compositionend', () => {
const text = input.value.trim();
if (text !== "") {
// 仮バブル削除
if (previewRow) {
previewRow.remove();
previewRow = null;
previewBubble = null;
}
// 確定バブル追加
addFinalBubble(text);
// 入力欄クリア
input.value = "";
}
});
window.addEventListener('load', () => {
input.focus();
});
</script>
</body>
</html>
Amical　ローカル環境で動作する、音声入力支援ツール
Amical https://github.com/amicalhq/amical
比較的、低いスペックのPC（Intel N100、Ram８GB）でも動作することを考える
Vosk Offline Speech Recognition API
https://alphacephei.com/vosk/models
https://zenn.dev/kun432/scraps/347513b10a3574
https://qiita.com/JunkiHiroi/items/555845159d996f9016e1
https://circle-road.com/?p=3025
Sokki Voice Web Speech API
https://circle-road.com/?page_id=39