この Seesaa ブログでもテストしました(リッチテキストは使用できません)。ブックマークレットを実行すると、ページの左上に IFRAME のウインドウを埋め込みます。その後、ページ内の対象のテキストエリアにカーソルを置くと開始ボタンが使えるようになるので『開始』をクリックします。
あとは、マイクで話すだけです。時々固まって動作しなくなる場合があるのでその場合は、『終了ボタン』を押すして再度開始ボタンを押して再開して下さい。
終了ボタンを押すと停止状態になり、テキストエリア内のテキストを編集しても結構です。最後に改行等を入れて開始ボタンで再開すると、最後の位置に追加して行きます。
長い時間何も音声入力が無いと自動的に終了します。
Google Chrome で音声認識の精度は想像以上に凄いです。学生がおもしろがって般若心経を朗読はじめたんですが、見事に認識されました(凄い)。
※ 前後にある文章や語句によって結果を変更して行くのがリアルタイムに見て取れる場合があります
▼ ブックマークレット登録用リンク
音声からテキスト
コードのメインは、Google Chrome での音声認識処理 を使用しています。但し、処理部分は私のサイトの recognition.js の中にあります。
parent.document.getElementById("if").style.position='absolute';
parent.document.getElementById("if").style.width='400px';
parent.document.getElementById("if").style.height='100px';
parent.document.getElementById("if").style.left='0px';
parent.document.getElementById("if").style.top='0px';
parent.document.getElementById("if").style.zIndex=0x7FFFFFFF;
parent.document.getElementById("if").style.borderColor='#000000';
parent.document.getElementById("if").style.borderWidth='1px';
parent.document.getElementById("if").style.borderStyle='solid';
parent.window.ds = parent.document.createElement('div');
parent.window.ds.setAttribute('id','ds')
parent.document.body.appendChild(parent.window.ds);
parent.document.getElementById("ds").style.position='absolute';
parent.document.getElementById("ds").style.width='400px';
parent.document.getElementById("ds").style.height='100px';
parent.document.getElementById("ds").style.left='8px';
parent.document.getElementById("ds").style.top='8px';
parent.document.getElementById("ds").style.zIndex=0x7FFFFFFE;
parent.document.getElementById("ds").style.backgroundColor='#000000';
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("msie") > -1) {
parent.document.getElementById("ds").style.filter='alpha(opacity=18)';
}
else {
parent.document.getElementById("ds").style.opacity=.18;
}
str="";
str+="<body style='margin:0;background-color:#ffffff;padding:15px;'> \n";
str+="<style> \n";
str+=" * { \n";
str+=" font-family:";
str+=" \"メイリオ\", Meiryo, \"ＭＳ Ｐゴシック\"; \n";
str+=" font-size:12px;";
str+="} \n";
str+="</style> \n";
str+="<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js\"></"+"script> \n";
str+="<div id=\"check\"></div> \n";
str+="<input id=\"st_btn\" type=\"button\" value=\"開始\" disabled> \n";
str+="<input id=\"ed_btn\" type=\"button\" value=\"終了\" disabled> \n";
str+="<div id=\"info\" style='display:inline-block;'></div> \n";
str+="<div id=\"result\"><div id=\"first_text\"></div></div> \n";
str+="<"+"script> \n";
str+="$( function(){ \n";
str+=" \n";
str+=" load_action(); \n";
str+=" \n";
str+="} ); \n";
str+="</"+"script> ";
str+="</body> \n";
document.write( str );
document.close();
parent.scroll(0,0);
var target_textarea;
var rec = null;
var target;
var back_text = "";
function load_action() {
parent.focus();
var iid = setInterval(function(){
parent.focus();
target_textarea = parent.document.activeElement;
if ( (target_textarea.tagName).toLowerCase() == "textarea" ) {
$("#check").text("textarea を取得しました");
clearInterval(iid);
$("#st_btn").prop("disabled", false);
$("#ed_btn").prop("disabled", false);
}
else {
$("#check").text("テキストエリアにカーソルを置いて下さい");
}
},500);
if ( typeof webkitSpeechRecognition === 'undefined' ) {
$("#info").text("使用できません");
$("#st_btn").prop("disabled", true);
$("#ed_btn").prop("disabled", true);
}
else {
target = $("#first_text");
// インスタンス作成
rec = new webkitSpeechRecognition();
// 初期設定
rec.lang = "ja-JP";
rec.interimResults = true;
rec.continuous = true;
// イベント登録
rec.onerror = function(){
$("#info").text("error");
};
rec.onnomatch = function(){
$("#info").text("nomatch");
};
rec.onsoundstart = function(){
$("#info").text("音検知");
};
rec.onsoundend = function(){
$("#info").text("soundend");
};
rec.onspeechstart = function(){
$("#info").text("スピーチ開始");
};
rec.onspeechend = function(){
$("#info").text("スピーチ終了");
};
rec.onstart = function(){
$("#info").text("開始");
};
rec.onend = function(){
$("#info").text("終了");
};
// 結果テキストの作成
rec.onresult = function(ev){
var obj = ev.results;
for (var i = ev.resultIndex; i < obj.length; i++ ) {
if( obj[i].isFinal ) {
target.text(obj[i][0].transcript);
target = $("<div></div>");
$("#result").append(target);
target_textarea.value = back_text + $("#result").text();
}
else {
target.text(obj[i][0].transcript);
}
}
};
// ボタンイベント
$("#st_btn").on("click",function(){
back_text = target_textarea.value;
rec.start();
$("#st_btn").prop("disabled",true);
})
$("#ed_btn").on("click",function(){
rec.stop();
$("#st_btn").prop("disabled",false);
$("#result").html("<div id=\"first_text\"></div>");
target = $("#first_text");
})
}
}
途中、IE のチェックをしているところがありますが、汎用テンプレートを使用して作成しているからです。
改行を入れて読みやすくしたブックマークレットコード
javascript:
var%20wnd=document.createElement('iframe');
wnd.setAttribute('id','if');
wnd.frameBorder=0;
document.body.appendChild(wnd);
var%20url='';
if((location.href).substr(0,5)=='https'){
url='https://lightbox.sakura.ne.jp/toolbox/recognition.js';
}else{
url='http://toolbox.winofsql.jp/recognition.js';
}
wnd.contentWindow.document.write('<script src=\''+url+'\' charset=\'utf-8\'></script>')
最後の document.write は DOM でも書けますが、どうせ js のほうでは画面を作成するのに document.write を使用せざるを得ないので同じ事です。初期画面の HTML や JavaScript の文字列化はこちらから実行できます。
( ﾌﾟﾛｸﾞﾗﾑ用文字列 の JavaScript ボタン )
ソースコード
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
