働き方改革の一助にーローカルでも使える音声入力ページー
長い文章を入れたり，思いついたことのメモなどに，Googleドキュメントの音声入力を時々使っていますが，もっと手軽にやりたいなと作ってみました。
音声認識には，Webページ上で音声認識や音声合成を利用することができるJavascriptのAPIであるWeb Speech APIを使っています（ここでは音声認識のみ使用）。
APIを埋め込み，JavaScriptだけで音声認識できますし，何より無料で使えます。
内部では，GoogleのCloud Speech APIが動いているようです。認識精度もほぼ同じですが，残念なのは句読点が認識されないこと。
そこで，区点のみですがボタンを押すと追加されるようにしました。2秒くらい間を空けると自動的に改行されます。また文書を読み上げて入力したり，メールの下書き等に使うためにクリップボードへのコピーもできるようにしました。
その場でしゃべったり，読み上げたものを，結構な精度でテキスト化してくれるので思いの外便利です。
知り合いの皆さんに紹介をしたところ，入力した文字数をカウントできたらとのご要望をいただきましたので，カウント機能も追加しました。
お試しで設置したページはこちら マイクが使用可能であれば，すぐに使えるかと思います・
以下のソースファイルをコピー＆htmlファイルとして保存すれば，ローカルでも実行可能です（もちろんネットにつながっていないと音声認識できませんが）
研究室学生らのミニツール＆リンク集と組み合わせた練習用にするために，極力簡単にしてみました。適当に編集して使っていただき構いません。
動作は，まだWindowsPC＋Chromeでしか確認していません。Android，iPadではうまく動作していませんが，仕事用に作ったのでまあいいかと(誰か直したらアップしてください)
<!doctype html>
<html lang="ja">
<!-- http://www.mura-lab.info/ -->
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>音声認識</title>
<style>
button.put { width: 70px; }
textarea {
width:50%;
height: 20em;
}
</style>
</head>
<body>
<center>
１文後に2秒おくと改行されます<br>
<button id="button" onclick="toggleStartStop()" class="put"> </button>
<button onclick=" kuten()" class="put">区点追加</button>
<button onclick="Clipboard()" class="put">コピー</button>
<button id="clear" onclick="textClear()" class="put">クリア</button></p>
<textarea id="Text1" class ="Text" onkeyup="ShowLength(value);"></textarea><br>
<p id="inputlength">文字数=0 ※最後にエンターキーを押すとカウントします。</p>
</center>
<script type="text/javascript">
// 音声認識処理 参考 https://wicg.github.io/speech-api/#examples-recognition
var recognizing;
window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.lang = 'ja';
recognition.interimResults = true;
stop();
recognition.onend = stop;
recognition.onresult = function (event) {
var results = event.results;
for (var i = event.resultIndex; i < results.length; ++i) {
if (results[i].isFinal) {
document.getElementById('Text1').value += results[i][0].transcript + "\n";
}
}
}
function stop() {
recognizing = false;
button.innerHTML = "音声認識";
}
function toggleStartStop() {
if (recognizing) {
recognition.stop();
stop();
}
else {
recognition.start();
recognizing = true;
button.innerHTML = "停止";
}
}
</script>
<script type="text/javascript">
// 文末に区点を追加
function kuten() {
var input = document.getElementById("Text1").value;
ar = new Array(
[/\n/g, '。\n'],
[/。。/g, '。'],
);
for(let i = 0; i < ar.length; i++) { //変換ループ
var result = input.replace(ar[i][0], ar[i][1]);
var input = result;
document.getElementById("Text1").value = result; //変換結果出力
}
}
// テキストをクリップボードにコピー
function Clipboard() {
var copyTarget = document.getElementById("Text1");
copyTarget.select();
document.execCommand("Copy");
}
// テキストボックスのクリア
function textClear() {
document.getElementById('Text1').value = "";
}
//文字列カウント
function ShowLength( str ) {
str=str.replace(/\n/g, "");
document.getElementById("inputlength").innerHTML = "文字数="+ str.length ;
}
</script>
</body>
</html>
投稿者 村松浩幸(信州大学)
投稿者プロフィール
最新の投稿
Gijyutu.com2025年10月27日学習課題（問い）の生成支援ツール「トイ☆パレット」
Gijyutu.com2025年10月19日MechAnalyzerで歯車機構のシミュレーション
Gijyutu.com2025年10月19日MechAnalyzerでカム機構のシミュレーション
Gijyutu.com2025年10月11日MechAnalyzerでリンク機構のシミュレーション
関連するお勧め教材
＼ 最新情報をチェック ／
