<!DOCTYPE html>
<html lang="ja">
<!--
現在 試験運用中のAPIを使用するため、コードを動かす前にChromeの設定（フラグ）を変更する必要があります。
準備：Chromeの設定を変更する
ブラウザのURL欄に以下をコピー＆ペーストして、それぞれの設定を [Enabled] に変更し、Chromeを再起動してください。
chrome://flags/#translation-api → Enabled
chrome://flags/#optimization-guide-on-device-model → Enabled Bypass...（またはEnabled）
chrome://components/ を開き、「Optimization Guide On Device Model」の項目を探して [アップデートを確認] を押し、最新の状態にします。
-->
<head>
<meta charset="UTF-8">
<title>AI音声通訳アプリ（Chrome Built-in AI）</title>
<style>
body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; padding: 20px; }
.box { width: 80%; border: 1px solid #ccc; padding: 15px; margin: 10px; border-radius: 8px; }
#status { color: blue; font-weight: bold; }
button { padding: 10px 20px; font-size: 1.2rem; cursor: pointer; background: #4285f4; color: white; border: none; border-radius: 5px; }
</style>
</head>
<body>
<h1>AI音声通訳アプリ</h1>
<p id="status">AIの準備を確認中...</p>
<button id="startBtn">話し始める (日本語 → 英語)</button>
<div class="box">
<strong>聞き取り（日）:</strong>
<p id="speechResult">...</p>
</div>
<div class="box">
<strong>翻訳結果（英）:</strong>
<p id="translatedResult">...</p>
</div>
<script>
const startBtn = document.getElementById('startBtn');
const status = document.getElementById('status');
const speechResult = document.getElementById('speechResult');
const translatedResult = document.getElementById('translatedResult');
// 1. Translator APIの準備
let translator;
async function initAI() {
if (!window.translation || !window.translation.createTranslator) {
status.innerText = "❌ このブラウザはTranslator APIをサポートしていません。設定を確認してください。";
return;
}
try {
// 日本語から英語への翻訳機を作成
translator = await translation.createTranslator({
sourceLanguage: 'ja',
targetLanguage: 'en'
});
status.innerText = "✅ AI準備完了。マイクで喋ってください。";
} catch (e) {
status.innerText = "❌ モデルの準備中です... 少し待ってから再読み込みしてください。";
}
}
initAI();
// 2. 音声認識 (SpeechRecognition)
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.lang = 'ja-JP';
startBtn.onclick = () => {
recognition.start();
status.innerText = "🎤 聞き取り中...";
};
recognition.onresult = async (event) => {
const text = event.results[0][0].transcript;
speechResult.innerText = text;
status.innerText = "🔄 翻訳中...";
// 3. AIで翻訳
try {
const translated = await translator.translate(text);
translatedResult.innerText = translated;
// 4. 音声読み上げ (SpeechSynthesis)
const utterance = new SpeechSynthesisUtterance(translated);
utterance.lang = 'en-US'; // 英語で読み上げ
window.speechSynthesis.speak(utterance);
status.innerText = "✅ 完了！";
} catch (err) {
translatedResult.innerText = "翻訳エラー: " + err;
}
};
</script>
</body>
</html>
使用変数
| charset | |
| class | |
| id | |
| initAI -------( Function ) | |
| innerText | |
| lang | |
| onclick | |
| onresult | |
| recognition | |
| SpeechRecognition | |
| speechResult | |
| startBtn | |
| status | |
| text | |
| translated | |
| translatedResult | |
| translator | |
| utterance |