こんにちは．ふじえもんです．
今日は，ブラウザ上で音声入力を行い，その認識結果中の一部の単語を絵文字に変換して表示させるということをやってみたので，それについてやったことを書きます．
なんてことはない処理ですが，やってみると色々応用できそうだと気づきました．
この記事の続きを書くかどうかわかりませんが，まずはとっかかりとして本稿を公開しようと思います．
Text2Emojiはこちらのリンクから試すことができます．
サンプルコード
コードはこちらです．HTML内でJavaScriptを書いています．
サンプルコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text2Emoji</title>
<style>
button {
margin: 10px;
}
textarea {
width: 100%;
height: 150px;
}
</style>
</head>
<body>
<button onclick="startRecognition()">Start</button>
<button onclick="stopRecognition()">Stop</button><button onclick="deleteText()">Delete</button>
<button onclick="copyToClipboard()">Copy</button>
<br>
<textarea id="output"></textarea>
<script>
const output = document.getElementById('output');
let recognition;
let finalTranscript = '';
function startRecognition() {
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
recognition = new SpeechRecognition();
recognition.lang = 'ja-JP';
recognition.interimResults = true;
recognition.continuous = true;
recognition.onresult = (event) => {
let interimTranscript = '';
for (let i = event.resultIndex; i < event.results.length; i++) {
const transcript = event.results[i][0].transcript + ".";
if (event.results[i].isFinal) {
finalTranscript += transcript;
} else {
interimTranscript += transcript;
}
}
output.value = convertToEmoji(finalTranscript + interimTranscript);
};
recognition.start();
}
function stopRecognition() {
recognition.stop();
}
function deleteText() {
output.value = '';
finalTranscript = '';
}
function copyToClipboard() {
output.select();
document.execCommand('copy');
alert('Text copied to clipboard!');
}
function convertToEmoji(text) {
const emojiMap = {
"音声": "🎙",
"認識": "👂",
"技術": "🔧",
"人": "👤",
"コンピュータ": "💻",
"テキスト": "📜",
"命令": "⚙️",
"AI": "🤖",
"ディープラーニング": "🧠",
"モデル": "📊",
"データ": "📈",
"学習": "📚",
"人間": "👥",
"製品": "📦",
"サービス": "🛎️",
"スマートスピーカー": "🔊",
"ユーザー": "👥",
"音楽": "🎵",
"天気": "⛅",
"家電": "📺",
"スマートフォン": "📱",
"電話": "☎️",
"スケジュール": "📅",
"情報": "🔍",
"業務": "💼",
"医療": "🏥",
"診断": "🩺",
"倉庫": "🏢",
"在庫": "📦",
"手作業": "🖐️",
"入力": "⌨️",
"課題": "❗",
"方言": "🗣️",
"アクセント": "🎤",
"雑音": "📢",
"研究": "🔍",
"開発": "👩💻",
"生活": "🏡",
"便利": "🎉",
"ウォーターフォール": "📈",
"スパイラル": "🌀",
"アジャイル": "🔄",
"ソフトウェア": "💻",
"開発": "🛠",
"フェーズ": "📅",
"要件": "📝",
"設計": "📐",
"実装": "💡",
"テスト": "🔍",
"デプロイ": "🚢",
"保守": "🔧",
"リスク": "⚠️",
"計画": "📋",
"エンジニアリング": "🔧",
"評価": "📊",
"サイクル": "🔄",
"フィードバック": "🗣",
"スクラム": "🏉",
"カンバン": "🪧",
"聴覚障害": "👂",
"耳": "👂",
"聴覚経路": "🧠",
"聴力": "🔉",
"難聴": "🔇",
"先天的": "👶",
"外傷": "🤕",
"感染症": "🦠",
"老化": "👴",
"高音量": "🔊",
"困難": "❌",
"コミュニケーション": "💬",
"手話": "🤟",
"筆談": "✍️",
"補聴器": "🦻",
"テクノロジー": "🔧",
"スマートフォンアプリ": "📱",
"デバイス": "📟"
};
for (let word in emojiMap) {
text = text.replace(new RegExp(word, 'g'), emojiMap[word]);
}
return text;
}
</script>
</body>
</html>
WebSpeechAPIを使って音声認識を行い，予め絵文字とテキストを対応させておいたemojiMapオブジェクトを使用して，テキスト内の各キーワードを対応する絵文字に起きかけています．
これの応用アイデア
今回は絵文字に変換してみましたが，いろいろ応用できそうですね．
音声認識結果中の単語を検出して画像や動画を表示するとか．
ChatGPTのようなLLMと連携するとユーザーの会話を元に，情報共有を支援したり新たな会話ネタの提供など情報提示の幅が拡張できそうです．
リポジトリはこちらGithub-Text2Emojiです．