音声入力Menu
音声入力をやってみたくて、試しにUserScriptで作ってみた
Chromeの
webkitSpeechRecognition を使った文字の入力は/nekobatoken/Ctrl-cで独自のチェックマークを挿入するUserScriptを参考にした
わかったこと
最初のカーソル位置がタイトル行なので、ページロードしてすぐ音声入力するとタイトルを書き換えてしまう
音声入力開始前に、手動でカーソル位置を指定しなければならない
タイトル行にカーソルがある場合は2行目に移動させるべき
連続音声入力
これができると多少便利
入力できてんだかできてないんだか、わかりにくい
テキストとして出てくる前に軽いフィードバックがほしい
マイクの波形とか？
Android Chromeでは動かない
デスクトップChromeは
recognition.continuous = true でできる e.results には、前回の認識結果を含んでしまっている e.results の末尾要素だけ見るつまり
本体に取り入れるなら、desktop/mobileで完全に別のUIにする
テキストのカーソルと、音声入力のカーソルがわかれていると便利だと思う
誤字修正した後、また末尾にカーソル移動しなおすのが面倒くさい
しかも、誤字修正中は声をだしてはならない
window2つ開けば良いのか？
音声読み取り中である事がわかりづらい
タイトルバーを見なければわからない
Page Menuのアイコンで状態を表示する？
現在の状態なのか、押すとこの状態に変化するという意味なのか、わかりにくい
recognition.lang = 'ja' は指定しなくていいなくても動く
script.js(() => {
if (!webkitSpeechRecognition) return
const isMobile = () => /mobile/i.test(navigator.userAgent)
const writeText = text => {
console.log('writeText', text)
document.querySelector('.text-input').focus()
document.execCommand('insertText', null, text)
}
const recognition = new webkitSpeechRecognition()
if (!isMobile()) recognition.continuous = true
recognition.onresult = (e) => {
const result = e.results[e.results.length - 1]
const item = result[0]
writeText(item.transcript + '\n')
}
let enable = false
scrapbox.PageMenu.addMenu({
title: 'speech input',
image: 'https://gyazo.com/6bf5e32e41ac980fa35334d9030ff962/thumb/48'
})
scrapbox.PageMenu('speech input').addItem({
title: () => (enable ? 'Stop' : 'Start') + ' speech input',
onClick: () => {
if (!enable) recognition.start()
else recognition.stop()
if (!isMobile()) enable = !enable
}
})
})()