音声入力Menu
Chrome系なら自分のページのcode:script.jsにimport '/api/code/shokai/音声入力Menu/script.js'を書けばインストールできる ChromeのwebkitSpeechRecognitionを使った
https://gyazo.com/306080509ecb46e19506167bba18df50
わかったことshokai.icon
最初のカーソル位置がタイトル行なので、ページロードしてすぐ音声入力するとタイトルを書き換えてしまう
音声入力開始前に、手動でカーソル位置を指定しなければならない
タイトル行にカーソルがある場合は2行目に移動させるべき
連続音声入力
これができると多少便利
入力できてんだかできてないんだか、わかりにくい
テキストとして出てくる前に軽いフィードバックがほしい
マイクの波形とか？
Android Chromeでは動かない
デスクトップChromeはrecognition.continuous = trueでできる
e.resultsには、前回の認識結果を含んでしまっている
e.resultsの末尾要素だけ見る
つまり
本体に取り入れるなら、desktop/mobileで完全に別のUIにする
テキストのカーソルと、音声入力のカーソルがわかれていると便利だと思う
誤字修正した後、また末尾にカーソル移動しなおすのが面倒くさい
しかも、誤字修正中は声をだしてはならない
window2つ開けば良いのか？
音声読み取り中である事がわかりづらい
タイトルバーを見なければわからない
Page Menuのアイコンで状態を表示する？
現在の状態なのか、押すとこの状態に変化するという意味なのか、わかりにくい
recognition.lang = 'ja'は指定しなくていい
なくても動く
code: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) => {
writeText(item.transcript + '\n')
}
let enable = false
scrapbox.PageMenu.addMenu({
title: 'speech input',
})
scrapbox.PageMenu('speech input').addItem({
title: () => (enable ? 'Stop' : 'Start') + ' speech input',
onClick: () => {
if (!enable) recognition.start()
else recognition.stop()
if (!isMobile()) enable = !enable
}
})
})()